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.
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>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-image="{adres_URL_zdjęcia_produktu}"
data-bb-alt="{identyfikator_kontenera_z_Twoją_alternatywną_treścią}">
{opcjonalnie_element_uruchamiający_widżet}
</div>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.
data-bb-number – kod EAN lub ISBN produktu,
data-bb-name – nazwa produktu lub tytuł książki (ta wartość będzie wyświetlana w widżecie w szczegółach produktu),
data-bb-info – dodatkowe atrybuty opisujący produkt (ta wartość będzie wyświetlana w widżecie w szczegółach produktu); opis atrybutów dla poszczególnych kategorii poniżej.
data-bb-image – adres URL grafiki pozwalający na podmianę zdjęcia produktu wyświetlanego w widżecie.
Wymagane jest podanie numeru EAN/ISBN (zalecane) lub nazwy produktu i dodatkowego atrybuty. Można też użyć wszystkie trzy parametry razem.
Książki – imię i nazwisko autora
Filmy – imię i nazwisko reżysera
Muzyka – wykonawca
Elektronika – nazwa producenta
Kosmetyki – nazwa producenta
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.
Rodzaje widżetu
Poznaj cztery sposoby wyświetlania widżetu
data-bb-type="overlay" – widżet overlay,
data-bb-type="logotypy" – widżet logotypy,
data-bb-type="popover" – widżet 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ący
click – widżet będzie wyświetlany po kliknięciu w element uruchamiający
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ą.
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;">
<p>Przykro nam, ale dla tego produktu nie znaleźliśmy żadnej oferty</p>
</div>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>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>