Widok prezentuje listę sklepów w osobnym oknie na przyciemnionym tle. Ten sposób jest drugim, najchętniej wybieranym widokiem przez producentów.

IMG

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="overlay" 
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.

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

☝️ Możesz wstawić dowolną treść lub inny element, np.baner wstawiając kod HTML.

Przykład tagu HTML

<span class="bb-widget bb-button" id="where-to-buy-1" data-bb-type="overlay" data-bb-id="13524" data-bb-number="5906976217204" data-bb-sku="XWP1460000" data-bb-name="Bathtub COMFORT PLUS" data-bb-category="Bathtubs/Rectangular bathtubs">
    <button class="btn">Buy 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-type="overlay" 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. 
  • Jeżeli chcesz wyświetlać call to action, który kieruje do sklepów, należy nadpisać własne customowe style.
.buybox-widget .bb-go-to-store { display: block !important; 
}

Inne rodzaje widgetu

  • Embedded
  • Widok popover
  • Widget multiwariantowy
  • JSON