Brand Guide

Widgets added or changed after page load ​

This page applies to the Standard Widget and the MultiProduct Widget. The Cart Widget and the Store Locator detect new buttons automatically: you don't need to do anything for them. The Shop has its own function, c2bShop.init().

When our script loads, it sets up the Click2Buy elements on the page: the buttons of modal and inline widgets, and the containers of inline auto-open widgets.

It doesn't detect elements that are added or changed after that. This happens when your page updates without reloading, for example with:

  • a product selector, where choosing a color, size or weight changes the product of the button
  • a product list that loads more products as the visitor scrolls or filters
  • a website built with a JavaScript framework (React, Vue, Angular, etc.) that renders its content in the browser

In these cases, call the following function after adding or changing an element:

js
c2bWidget.init()

You can call it as often as needed: elements that are already set up and haven't changed are left as they are.

Change the product of a button ​

To switch an existing button to another product, update its product attribute, then call c2bWidget.init():

js
const button = document.querySelector('[data-widget-element]')

button.setAttribute('data-widget-ean', '3017620425042')
c2bWidget.init()

WARNING

Once an element is set up, c2bWidget.init() only detects changes to its product attribute: data-widget-id or data-widget-ean for the Standard Widget, data-multiproduct-widget-id for the MultiProduct Widget.

To change any other attribute (UPC, locale, postal code, etc.), replace the element with a new one, then call c2bWidget.init().