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 produktu
- data-bb-name – nazwa produktu, tytuł książki
- data-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ż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
Parametry dodatkowe (opcjonalnie)
- 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>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>
