Implementacja widżetu na stronie
Dowiedz się, jak zaszyć skrypt w kodzie strony (dla zaawansowanych)
Jeżeli posiadasz dane produktów w swojej bazie danych i chcesz zautomatyzować wyświetlanie się widżetu BUY.BOX od razu w całym twoim serwisie, możesz zaszyć skrypt w szablonie swojej strony. Jeżeli nie masz takiej możliwości, skorzystaj z Generatora widżetu.
Krok 1
Poniższy kod wstaw w sekcji <head> na wszystkich podstronach, na których będziesz używać widżetu BUY.BOX.
<script src="https://widget.buybox.click/js/widget.min.js" defer></script>
Krok 2
Wstaw poniższy tag HTML w miejscu, w którym ma się wyświetlać widżet i każdorazowo uzupełnij odpowiednie dane, w tym identyfikujące produkt.
<div
class="bb-widget"
id="{unikalne_id_elementu}"
data-bb-type="{typ_widżetu}"data-bb-id="{twoj_buybox_ID}"
data-bb-number="{numer_EAN_produktu}"
data-bb-name="{nazwa_produktu}"
data-bb-info="{dodatkowy_atrybut_opisujący_produkt}"
data-bb-alt="{identyfikator_kontenera_z_Twoją_alternatywną_treścią}"
>
{opcjonalnie_element_uruchamiający_widżet}
</div>
Parametry podstawowe (wymagane)
data-bb-id- unikalny identyfikator Twojego widżetu do pobrania w panelu w zakładce Widżet > Ustawienia.id- identyfikator elementu (jeżeli na jednej podstronie wstawisz kilka widżetów, dla każdego musi być unikalna wartość)data-bb-type- nazwa rodzaju widżetu. Jeżeli widżet ma być wyświetlany w standardowy sposób, nie wstawiaj w kodzie tego parametru
Parametry definujące produykt (wymagane)
data-bb-number- kod EAN/ISBN produktudata-bb-name- nazwa produktu, tytuł książkidata-bb-info- dodatkowe atrybuty opisujący produkt (opis poniżej)
Wymagane jest podanie numeru EAN/ISBN (zalecane) lub nazwy produktu i dodatkowego atrybuty. Można też użyć wszystkie trzy parametry razem.
Dodatkowe atrybuty opisujące produkt dla poszczególnych kategorii:
- Książki - imię i nazwisko autora
- Filmy - imię i nazwisko reżysera
- Muzyka - wykonawca
- Elektronika - nazwa producenta
- Kosmetyki - nazwa producenta
Parametry definiujące rodzaj widżetu (opcjonalnie)
Wybierz rodzaj widżetu, który chcesz użyć na swojej stronie. Jeżeli ma być inny niż standardowy, wstaw w kodzie jeden z poniższych parametrów. W przypadku nie podania jednego z poniższych parametrów zostanie załadowany widżet standardowy.
data-bb-type="overlay"- widżett overlaydata-bb-type="logotypy"- widżet logotypydata-bb-type="popover"- widżett popover
W przypadku wybrania wersji popover, należy dodatkowo ustalić sposób uruchamiania widżetu poprzez dodanie dodatkowego paramatru data-bb-popover-event={wartość}, któremu należy nadać jadną z dwóch poniższych wartości:
hover- widżet będzie wyświetlany po najechaniu kursorem na element uruchamiającyclick- widżet będzie wyświetlany po kliknięciu w element uruchamiający
Parametry dodatkowe (opcjonalnie)
data-bb-alt- identyfikator kontenera z Twoją alternatywną treścią, która wyświetli się w przypadku braku dostępności ofert dla danego produktu, np.:<div id="{identyfikator}" style="display: none;">Przykro nam, ale dla tego produktu nie znaleźliśmy żadnej ofery</div>.data-bb-abpar1,data-bb-abpar2,data-bb-abpar3- dodatkowe parametry, w których możesz nam przekazać własne dane, które zostaną zapisane wraz z transakcją.
Element uruchamiający widżet
Jeżeli skorzystasz z wersji popover lub overlay, musisz w kodzie dodać elelemt uruchamiający widżet. Może to być dowolny tag HTML np.:
<div
class="bb-widget"
id="{unikalne_id_elementu}"
...
>
<button class="{twoja_klasa_css}">Sprawdź, gdzie kupić</button>
</div>
Przykłady
Wersja standardowa
<div class="bb-widget" id="where-to-buy-1" data-bb-id="1" data-bb-number="9788380871182" data-bb-name="Zero To One" data-bb-info="Thiel Peter"></div>
Wersja overlay
<span class="bb-widget" id="where-to-buy-1" data-bb-type="overlay" data-bb-id="1" data-bb-number="9788380871182" data-bb-name="Zero To One" data-bb-info="Thiel Peter">
<button class="btn">Kup online</button>
</span>
Wersja popover
<span class="bb-widget" id="buybox-1" data-bb-popover-event="click" data-bb-type="popover" data-bb-id="903" data-bb-number="4008496716890">
<span>Sprawdź, gdzie kupić</span>
</span>