Widok popover wyświetli listę sklepów po kliknięciu lub najechaniu w button lub link tekstowy. Poniższa instrukcja pozwoli dopasować widget (plugin) do Twoich potrzeb.

Krok 1

W miejscu w którym ma się wyświetlać plugin, wstaw poniższy tag HTML.

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

<div 

class="bb-widget" 
id="{unique_id_element}" 
data-bb-type="popover" 
data-bb-popover-event="{value}" 
data-bb-id="{your-plugin-id}"
data-bb-add-source-params="1"data-bb-number="{GTIN_number}"data-bb-sku="{product_manufacturer_unique_ID}" 
data-bb-name="{product_name}" 
data-bb-category="{product)category_path}" 
data-bb-price="{optional_product_suggested_retail_price}" 
data-bb-description="{optional_product_short_description}" 
data-bb-image="{optional_product_image_URL}" 
data-bb-alt="{identifier_container_with_your_alternative_content}" 

><!-- your html tag triggering the plugin --></div>

Parametry wymagane

  • {your-plugin-Id} –unikalny identyfikator pluginu (widgetu) do pobrania w panelu.
  • data-bb-number - kod GTIN/EAN produktu
  • data-bb-sku – unikalny ID produktu
  • data-bb-name – nazwa produktu
  • data-bb-category –ścieżka kategorii produktu
  • id – unikalny identyfikator elementu
  • data-bb-add-source-params=”1″ – source jest pobierane z parametru utm_source strony na której wyświetlany jest widget. Jest to nazwa źródła z którego trafił użytkownik, np, facebook, instagram.
  • data-bb-popover-event – choose how to display/trigger the widget:
    • hover – displayed by hovering the cursor
    • click – displayed by clicking

Parametry opcjonalne

  • data-bb-price – sugerowana cena produktu
  • data-bb-description – opis produktu
  • data-bb-image –obrazek produktu
  • data-bb-abpar1 – dodatkowy parametr zapisywany razem z transakcją

Brak ofert w widgecie - alternatywne opcje

data-bb-alt – identyfikator (ID) kontenera z Twoją alternatywną treścią, która wyświetli się w przypadku braku dostępności ofert w widgecie (pluginie). Może to być: dowolna treść lub inny element, np.baner wstawiając kod HTML.

<div id="{identifier}" style="display: none;">YOUR MESSAGE HERE</div>

Przykład tagu HTML

<span class="bb-widget bb-button" id="where-to-buy-1" data-bb-popover-event="click" data-bb-type="popover" data-bb-id="13524" data-bb-number="5906976217204" data-bb-sku="XWP1460000" data-bb-name="Bathtub COMFORT PLUS" data-bb-category="Bathtubes/Bathtube rectangle    <button class="btn">Kup online</button>
</span>

Krok 2

Wstaw element uruchamiający widget.

Wstaw swój tag HTML uruchamiający plugin, np. span, div, a, img, button. Dopasuj ten element do swojej strony www (np. kolor, czcionka).

Przykład

<button>Find out, where to buy</button>

CSS style

Jeżeli na twojej stronie internetowej znajduje się już przycisk (call-to-action), możesz korzystać z tych samych klas css i skopiować css classy, np.

<button class="{your css class}">Find out, where to buy </button>

Przykład z CSS:

<span class="bb-widget bb-button" id="where-to-buy-1" data-bb-popover-event="click" data-bb-type="popover" data-bb-id="13524" data-bb-number="5906976217204" data-bb-sku="XWP1460000" data-bb-name="Bathtub COMFORT PLUS" data-bb-category="Bathtubs/rectangular    <button class="btn">Buy online</button>
</span>

Ważne

  • Na ekranach poniżej 500px nie pokazujemy call to action w pluginie.
  • If you want to display call to action, you should override your own custom styles.
.buybox-widget .bb-go-to-store { display: block !important; 
}

Inne rodzaje widgetu

  • Widok Overlay
  • Widok embedded (osadzony na stronie)
  • Widget multiwariantowy
  • JSON