Implementacja widżetu na stronie

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>