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.

☝️Zwróć uwagę, że pierwszy krok do kod, który należy wstawić w szablonie strony. Kolejne kroki pozwalają Tobie zdecydować o sposobie wyświetlania widgetu.

Krok 1

Poniższy kod wstaw w sekcji na wszystkich podstronach, na których będziesz używać widgetu 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ć widget, 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 widgetu 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 identyfikator BUY.BOXa (twoj-buybox-ID).

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 abpar 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).

Przykład:

<button>Sprawdź, gdzie kupić</button>

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



Inne sposoby implementacji widżetu:

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