8.SET - on product page

Cross-selling through product sets - including alternative products (automatic or manual content)

8.SET Compose using bar layout and alternative products
Widget-Element
Show product set by SKU or Main-SKU
<div data-8select-widget-id="8.SET-Compose" data-sku="42"></div>
data-sku is a dynamic attribute
its value is the SKU or Main-SKU of the product variant the customer is viewing in the shop
the SKU or Main-SKU has to be the same value that is used in the product export​
The 8SELECT integration team will adjust the widget styling 🎨 to your shop design. ❤️ 
Update SKU in case of non-size variant change
The played out content is specific to visual variants such as colour or pattern. When the visual variant changes the widget has to be updated!
The played out content is specific to visual variants such as colour or pattern. 
To retrieve the content of the currently selected visual variant, the current SKU must be passed to the widget when the visual variant is changed. For example if a customer is currently viewing the red variant of a shirt and changes to the blue variant, the 8.SDK has to be informed about the changed SKU to load content for the changed visual variant.

This must not happen when changing the size, as the content is size-independent.
Update SKU via SDK API call
window._8select.updateWidgetSku('8.SET-Compose', 'your-new-sku-here')
Other option
remove the widget HTML from the DOM 
document.querySelector('[data-8select-widget-id="8.SET-Compose"]')
add the widget HTML to the DOM with the new SKU
call window._8select.initCSE()
If the widget HTML itself is removed from the DOM and then added again to the DOM with the new SKU inside data-sku the SDK has to scan the DOM again. So please call window._8select.initCSE()

Widgets - Previous

8.SIMILAR

Next - Widgets

8.SET - on cart layer

Last modified 1mo ago