Widget BUY.BOX możesz wyświetlić także w formie popover, który wyświetli listę sklepów po kliknięciu w button lub link tekstowy. Zobacz jak to zrobić. 

Krok 1

Poniższy kod wstaw w sekcji   na wszystkich podstronach, na których będzie używany widget BUY.BOX.  

<script src="https://buybox.click/js/bb-popover.min.js" defer></script>

Krok 2 

Poniższy kod wstaw w miejscu (sekcja body), w którym ma się wyświetlać widget BUY.BOX.

<span class="bb-widget" data-bb-popover-event="{wartość}" data-bb-type="popover" data-bb-id="{buybox-id}" {par}="{wartość}" >Sprawdź, gdzie kupić</span>

Gdzie:

  • {buybox-id} - unikalny identyfikator widgetu, który znajdziesz w panelu wydawcy w zakładce "BUY.BOX" (3)
  • {par} - parametr opisujący produkt lub konfiguracyjny (zobacz poniżej)
  • {wartość} - wartość parametru opisującego produkt lub konfiguracyjnego, np. numer EAN 

Parametry

  • data-bb-number - kod GTIN produktu (np. ISBN lub EAN)
  • data-bb-name - nazwa produktu
  • data-bb-info - dodatkowy atrybut opisujący produkt (opis poniżej)
  • data-bb-abpar1 , data-bb-abpar2 , data-bb-abpar3  - parametry Abpar
  • data-bb-alt - identyfikator kontenera z alternatywną treścią (opis poniżej)

Dodatkowe atrybuty opisujące produkt (data-bb-info) dla poszczególnych kategorii:

  • Książki - imię i nazwisko autora 
  • Gry wideo i planszowe - nazwa producenta 
  • Filmy - imię i nazwisko reżysera 
  • Muzyka - wykonawca 

Wymagane atrybuty dla sposobu wyświetlania data-bb-popover-event:

  • hover - wyświetlanie po najechaniu kursorem
  • click - wyświetlanie po kliknięciu  

Przykłady

<div class="bb-widget" id="buybox-1" data-bb-type="popover" data-bb-popover-event="click" data-bb-id="903" data-bb-number="4008496824212">Sprawdź, gdzie kupić</div>
<span class="bb-widget" id="buybox-1" data-bb-popover-event="click" data-bb-type="popover" data-bb-id="903" data-bb-number="4008496716890" >Sprawdź, gdzie kupić</span>
<div class="bb-widget" id="buybox-1" data-bb-id="903" data-bb-popover-event="click" data-bb-type="popover" data-bb-name="Nie to za mało" data-bb-info="Naomi Klein">>Sprawdź, gdzie kupić</div> 

Czy udało Ci się znaleźć odpowiedź na swoje pytanie?