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 <head>  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="click" data-bb-type="popover" data-bb-id="{buybox-id}" {par}="{wartość}" >Sprawdź, gdzie kupić</span>


Krok 3

Uzupełnij w powyższym kodzie (Krok 2) odpowiednie zmienne,

gdzie:

  • za {buybox-id}  – wstaw unikalny identyfikator widgetu do pobrania z panelu wydawcy. Widok (3)
  • za {par}– wstaw parametr/y opisujący produkt lub konfiguracyjny. Zobacz poniżej zalecane parametry oraz możliwości wyświetlenia listy sklepów.
  • za {wartość}  – podaj wartość parametru opisującego produkt lub konfiguracyjnego, np. kod EAN

Parametry 

  • data-bb-number  - kod GTIN produktu (np. ISBN lub EAN)
  • data-bb-name - nazwa produktu
  • data-bb-info - dodatkowy atrybut opiują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)

Wymagane atrybuty {wartość} dla poszczególnych kategorii:

  • Elektronika - Kod EAN
  • Książki - ISBN 
  • Gry wideo i planszowe - Kod EAN
  • Artykuły dziecięce - Kod EAN
  • Filmy  -tytuł + imię i nazwisko reżysera
  • Muzyka - Kod EAN

Wymagane atrybuty {wartość}  dla sposobu wyświetlania listy sklepów:

  • Lista sklepów po najechaniu na link tekstowy lub button - "Hover"
  • Lista sklepów po kliknięciu na link tekstowy lub button  - "click" (został użyty w skrypcie Krok 2)

Zobacz przykładowy wygląd kodu z uzupełnionymi parametrami:

Przykład nr 1 <div>

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

Przykład nr 2 <span>

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


gdzie:

  • za {par} został podstawiony data-bb-number 
  • za {wartość}  podany został kod EAN wybranego produktu z kategorii elektronika.

Dodatkowe atrybuty dla poszczególnych kategorii:

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

Zobacz przykładowy wygląd skryptu z uzupełnionymi dodatkowymi atrybutami:

Kategoria: książki :  Tytuł + Autor (data-bb-name + data-bb-info)

gdzie:

  • za {par}  został podstawiony data-bb-name  
  • za {wartość}  podano  Tytuł książki
  • za {par}   został podstawiony data-bb-info 
  • za {wartość} podano Autora 
<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?