Brand Guide

Cart Widget ​

The Cart Widget shows visitors where to buy a list of products, with quantities, for example the products they have selected on your website. It opens from a button whose data-* attributes describe the cart.

Technical requirements

Check the technical requirements first, especially if your website uses a Content Security Policy.

Display modes ​

The widget can open in 2 ways:

Modal

Clicking the button opens the widget in a window over your page.

Inline

Clicking the button opens the widget inside your page, in a block you choose.

The cart is described by the attributes of the button. Any clickable element works, such as a link or an image.

Step 1: load the script ​

Add our script to the pages that display the widget, or to the template used by all your pages:

html
<script type="module" src="https://widget.clic2buy.com/c2b-cart-widget.js"></script>

INFO

This is not the same script as the c2b.js script of the Standard and MultiProduct widgets. If a page displays both kinds of widgets, load both scripts.

Step 2: add the attributes to your button ​

html
<button
  data-cart-widget-id="CART_WIDGET_ID"
  data-cart-widget-locale="fr-FR"
  data-cart-widget-products='[{"reference":"ref-001","quantity":2},{"reference":"ref-002","quantity":1}]'
>
  See product availability
</button>

Inline ​

Step 1: load the script ​

Add our script to the pages that display the widget, or to the template used by all your pages:

html
<script type="module" src="https://widget.clic2buy.com/c2b-cart-widget.js"></script>

INFO

This is not the same script as the c2b.js script of the Standard and MultiProduct widgets. If a page displays both kinds of widgets, load both scripts.

Step 2: add the attributes to your button ​

Set data-cart-widget-display-mode to inline, and data-cart-widget-inline-container to the CSS selector of the block where the widget should open:

html
<button
  data-cart-widget-id="CART_WIDGET_ID"
  data-cart-widget-locale="fr-FR"
  data-cart-widget-products='[{"reference":"ref-001","quantity":2},{"reference":"ref-002","quantity":1}]'
  data-cart-widget-display-mode="inline"
  data-cart-widget-inline-container="#c2b-cart-widget"
>
  See product availability
</button>

Step 3: add the container ​

Add the block where the widget should open. It must be on the page when the visitor clicks the button:

html
<div id="c2b-cart-widget"></div>

Attributes ​

AttributeRequiredDescription
data-cart-widget-idYesCart Widget key, provided by your Customer Success Manager
data-cart-widget-localeYesLanguage and country of the widget, for example fr-FR or en-GB
data-cart-widget-productsYesProducts and quantities, as a JSON array: see Products format
data-cart-widget-display-modeNomodal (default) or inline
data-cart-widget-inline-containerIn inline modeCSS selector of the block where the widget opens, for example #c2b-cart-widget

Products format ​

data-cart-widget-products must be a non-empty JSON array, where each product has:

  • exactly one identifier: reference, ean or upc
  • a quantity, as a number (2, not "2")

All products must use the same type of identifier, and no other keys are allowed.

json
[{"reference":"ref-001","quantity":2},{"reference":"ref-002","quantity":1}]
json
[{"ean":"3017620425035","quantity":1},{"ean":"3017620425042","quantity":3}]
json
[{"upc":"012345678905","quantity":1},{"upc":"012345678912","quantity":2}]

TIP

Put the attribute value between single quotes ('…'): the JSON contains double quotes, which would otherwise end the attribute.

Update the cart ​

The widget reads the attributes each time the visitor clicks the button. When the visitor's selection changes, just update data-cart-widget-products: the next click opens the widget with the new products.

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

button.setAttribute('data-cart-widget-products', JSON.stringify([
  { reference: 'ref-001', quantity: 3 }
]))

Buttons added after the page has loaded (for example by a JavaScript framework such as React or Vue) are detected automatically: you don't need to initialize anything.

Widget design ​

The widget is hosted by Click2Buy, and we configure its design (shapes, colors, fonts, etc.). To match it to your brand guidelines, contact your Customer Success Manager.

Tracking ​

Click2Buy tracks widget usage automatically: statistics are available in our back office (ask your Customer Success Manager for more details).

Troubleshooting ​

If the widget doesn't open when you click the button, open the browser console and look for an error starting with [c2b-cart-widget]:

ErrorFix
Invalid products attributeCheck data-cart-widget-products against the Products format: valid JSON, one type of identifier, numeric quantities, no other keys.
Invalid locale attributeAdd a data-cart-widget-locale attribute to the button.
Inline container selector not foundAdd a data-cart-widget-inline-container attribute to the button.
Inline container not found for selector "…"Check that an element matching the selector is on the page when the visitor clicks the button.

Still stuck? Contact us or your Customer Success Manager.