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

W miejscu w którym ma się wyświetlać widżet, wstaw poniższy tag HTML oraz zdecyduj jaki rodzaj widżetu (Krok 3) chcesz użyć.

<div 
class="bb-widget" 
id="{unikalne_id_elementu}" 
data-bb-type="overlay"
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ą}" 
>
  <!-- twój tag html uruchamiający plugin -->
</div>

☝️ Podaj odpowiednią wartość dla podanych parametrów dla każdego produktu.

Parametry wymagane:

  • twoj-buybox-ID - unikalny identyfikator Twojego widżetu do pobrania w panelu.
  • data-bb-number - kod EAN produktu
  • data-bb-name - nazwa produktu, tytuł książki
  • id - unikalny identyfikator elementu

☝️ Pamiętaj, że każda kategoria w ramach danej strony ma swój unikalny identyfikator widżetu.

Parametry opcjonalne:

  • data-bb-info - dodatkowe atrybuty opisujący produkt (opis poniżej)
  • data-bb-alt - identyfikator kontenera z Twoją alternatywną treścią, która wyświetli się w przypadku braku dostępności ofert w pluginie, np. <div id="{identyfikator}" style="display: none;">Twój komunikat tutaj</div>.
  • data-bb-abpar1, data-bb-abpar2, data-bb-abpar3 - dodatkowe parametry przekazywane razem z transakcją.

Dodatkowe atrybuty dla poszczególnych kategorii:

  • Książki - imię i nazwisko autora
  • Filmy - imię i nazwisko reżysera
  • Muzyka - wykonawca
  • Elektronika - nazwa producenta
  • Kosmetyki - nazwa producenta

Krok 3

Wybierz rodzaj widżetu, który chcesz wyświetlać na swojej stronie.

Zobacz cztery sposoby prezentacji widżetu, a następnie dodaj odpowiednie parametry do tagu HTML.

Parametry definiujące rodzaj widżetu:

  • data-bb-type="popover"- dodaj parametr do kodu dla widżetu popover
  • data-bb-popover-event - wybierz sposób pojawienia się widżetu popover:
  • hover - wyświetlanie po najechaniu kursorem
  • click - wyświetlanie po kliknięciu
  • data-bb-type="overlay" - dodaj parametr do kodu dla widżetu overlay
  • data-bb-type="logotypy"- dodaj parametr do kodu dla widżetu logotypy

Krok 4

Wstaw swój tag HTML uruchamiający plugin, np. <a>, <div>, <span>, <img>,<button>. Dopasuj element do swojej strony www (np. kolor, czcionka). Jeżeli na twojej stronie internetowej znajduje się już przycisk, możesz korzystać z tych samych klas css i skopiować css classy, np.

<button class="{twoja klasa css}">Sprawdź, gdzie kupić</button>

Przykłady

Przykład gotowego tagu z podanymi wartościami, wersja Overlay.

<span class="bb-widget bb-button" 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>


Przykład gotowego tagu z podanymi wartościami, wersja Popover.

<span class="bb-widget bb-button" id="where-to-buy-1" data-bb-type="popover" data-bb-popover-event="click" 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>


Przykład gotowego tagu z podanymi wartościami, wersja Popover (kategoria elektronika)

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