Wskazówki i odpowiedzi od zespołu BUY.BOX

Waldemar Sadowski
Autor Waldemar Sadowski

Implementacja widżetu na stronie

Zaszyj 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 identyfukują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ą}" 
>
  {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.

  • data-bb-type="overlay" - widżett overlay
  • data-bb-type="logotypy" - widżet logotypy
  • data-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ący
  • click - 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.:

<button class="{twoja_klasa_css}">Sprawdź, gdzie kupić</button>

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> 
Kategorie: