8SELECT - Integration Documentation
8SELECTService Status
  • 8.HX PLATFORM
  • Shop Integration
    • 8.SDK Web (JavaScript SDK)
    • Widgets
      • βž•Add more elements, like custom headline
      • πŸ‘»Hide recommendation area in case there is no content
      • πŸ”ŽAdding widgets after 8.SDK was loaded
      • πŸ—ΊοΈInternationalization
    • Shopping Cart
    • Checkout Tracking
    • Product Export
    • A/B Testing
    • Single Page Application
    • Tag Manager
    • Data Privacy / Cookies / GDPR
  • Widgets
    • 8.SIMILAR
    • 8.SET
    • 8.SET Custom
    • Touchpoints
      • Product Page
      • Cart Layer
      • Cart
      • Content Page
  • Product Export
    • Data Transfer
    • File Format
    • Base Data
      • Details and examples
    • Fashion Content Pool
      • Details and examples
    • Image Bot
  • Sandbox
    • Demo-Integration
    • Demo-Mode
  • API
    • Changelog
      • 2.0.0
      • 1.0.1
    • General
      • Introduction
      • Authentication
      • Pagination
      • Exceptions
      • GraphQL Schema
    • Examples
      • 8.SIMILAR
      • 8.SET
      • 8.SET Custom
      • Product Page - All Content
  • API Tracking
    • Changelog
    • General
      • Introduction
      • Authentication
      • Context
      • User Identification
      • Event Validation
    • Events
      • view
        • How to evaluate if view event can be sent
        • User views 8.SET content
      • interact
        • User clicks on a product within 8.SET content
        • User adds a product to their card from within 8.SET content
        • Example what is not a product interaction
      • order
Powered by GitBook
On this page
  • Widget-Element
  • Show alternative products for a given SKU or Main-SKU
  • Update SKU in case of non-size variant change

Was this helpful?

  1. Widgets

8.SIMILAR

Show similar products for currently viewed product.

PreviousData Privacy / Cookies / GDPRNext8.SET

Last updated 1 year ago

Was this helpful?

Widget-Element

Show alternative products for a given SKU or Main-SKU

<div data-8select-widget-id="8.SIMILAR" data-touchpoint="product" data-sku="insert-sku-of-currently-viewed-product"></div>
  • data-sku is a dynamic attribute

    • in case the viewed variant is changed, for example via a color drop-down the value has to be updated via _8select.updateWidgetSku()

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

window._8select.updateWidgetSku('8.SIMILAR', 'your-new-sku-here')

data-touchpoint is a static attribute - find more about it under

its value is the or of the product variant the customer is viewing in the shop

the or has to be the same value that is used in the

touchpoints
product export
SKU
Main-SKU
SKU
Main-SKU
similar shoes