Plugin (widget) multiwariantowy pozwala w ramach jednego widgetu wyświetlić oferty dla wielu wariantów tego samego produktu, np. różne kolory czy rozmiary.
IMG
Kod pluginu (widgetu)
<div
class="bb-widget"
id="{unique_id_element}"
data-bb-id="{your-plugin-id}"
data-bb-var-default="1"
data-bb-var-name-opt1="{variant-name}"
data-bb-var1-value-opt1="{variant1-value}"
data-bb-var1-number="{variant1_product_GTIN_number}"
data-bb-var1-sku="{product_manufacturer_unique_ID}"data-bb-var1-name="{_product_name_}"data-bb-var1-category="{_product_category_path_}"data-bb-var1-price="{optional_product_suggested_retail_price}"
data-bb-var1-description="{_optional_product_short_description_}"data-bb-var1-image="{_optional_product_image_URL_}"
...
data-bb-varn-value-opt1="{variantN-wartość}"
data-bb-varn-number="{variantN_product_GTIN_number}"data-bb-alt="{identifier_container_with_your_alternative_content}"
><div>gdzie::
Parametry wymagane
- your-plugin-id =”{unique plugin_ID_to_download_in_the panel}”
- id=”{unique_identifier_of_the_element}”
- data-bb-var-default=”{the_number_of_the_variant_to_be_displayed_as_the_default}”
- data-bb-var-name-opt1=”{the_name_of_the_variant}” e.g. “Series”, “Color”, “Size”; several can be specified (…opt1, …opt2 etc.);
- data-bb-var1-value-opt1=”{the_value_of_the_next_variant}” such as “X series”, “Blue”, “XL”;
- data-bb-var1-number=”{GTIN_number_of_the_next_variant}”
- data-bb-var1-sku=”{your_unique_producer’s_product_ID}”
- data-bb-var1-category=”{the_category_path_of_your_product}”
- data-bb-add-source-params=”1=”{_the_source_extracted_from_the_utm_source_parameter_of _the_page_on_where_the_widget_is_displayed}”
Jest to nazwa źródła z którego trafił użytkownik, np, facebook, instagram.
Parametry opcjonalne
- data-bb-var1-price=”{_catalog_suggested_price_}”
- data-bb-var1-description=”{_product_description_}”
- data-bb-var1-image=”{_URL_of_the_variant_image}”
- data-bb-abpar1=”{_additional_abpar_parameter_passed_along_with_the_transactions}”
- data-bb-alt=”{_container_ID_with_your_alternative_content_about_lacking_any_offers}”
<div id="{identifier}" style="display: none;">YOUR MESSAGE HERE</div>.Brak ofert w widgecie
Dla parametru data-bb-alt parameter w przypadku braku ofert do wyświetlania, możesz wstawić dowolną treść lub inny element, np.baner wstawiając kod HTML. Możesz np. wyświetlić podobny lub komplementarny produkt.
Przykłady
div
class="bb-widget"
id="bb-widget-2"data-bb-id="34903"data-bb-add-source-params="1"data-bb-var-default="1"data-bb-var-name-opt1="Seria"data-bb-var-name-opt2="Color"data-bb-var1-value-opt1="Z-Wave 5"data-bb-var1-value-opt2="White"data-bb-var1-number="5902020528968"data-bb-var1-sku="AXT"data-bb-var1-category="Z-wave5>Safety>Sensors>Buttons"data-bb-var1-price="599"data-bb-var2-description="White saftey button"data-bb-var2-value-opt1="Z-Wave 5"data-bb-var2-value-opt2="Black"data-bb-var2-number="5902020528944"data-bb-var2-sku="BCT4"data-bb-var2-category="Z-wave5>Safety>Sensors>Buttons"data-bb-var2-price="799"data-bb-var2-description="Black saftey button"
></div>div
class="bb-widget"
id="bb-widget-2"
data-bb-id="34903"
data-bb-var-default="1"
data-bb-var-name-opt1="Seria"
data-bb-var-name-opt2="Color"
data-bb-var1-value-opt1="Z-Wave 5"
data-bb-var1-value-opt2="White"
data-bb-var1-number="5902020528968"
data-bb-var2-value-opt1="Z-Wave 5"
data-bb-var2-value-opt2="Black"
data-bb-var2-number="5902020528944"
data-bb-var3-value-opt1="Z-Wave 5"
data-bb-var3-value-opt2="Blue"
data-bb-var3-number="5905279987227"
data-bb-var4-value-opt1="Z-Wave 5"
data-bb-var4-value-opt2="Green"
data-bb-var4-number="5905279987210"
></div>
Ważne
Na ekranach poniżej 500px nie pokazujemy call to action w widgecie (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
- Overlay
- Widget multiwariantowy
- JSON
