The multivariant plugin allows you to display offers for multiple variants of the same product within a single widget, such as different colors or sizes.
IMG
Plug-in code (widet)
<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>where:
Required parameters:
- 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}”
For the source, this is the name of the source the user came from, e.g., facebook, instagram.
Optional parameters:
- 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>.Lack of offers in the widget
In the data-bb-alt parameter in case of you lacking any offers in the widget, you can insert any content or other element, such as a banner by inserting HTML code. You can display, e.g. similar or complementary product.
Examples
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
On screens below 500px, we do not show call to action in the plugin(widget). If you want to display call to action, you should overwrite your own custom styles.
.buybox-widget .bb-go-to-store { display: block !important;
}
Other type of the widget
- Embedded
- Widok popover
- Overlay
- Multivariate
- JSON
