Add to Cart

Carousels with enableAddToCart and the welcome screen "Buy it again" card show an Add to cart button. The widget runs on your storefront's domain, so it adds products with your store's own cart request and the shopper's session.

The widget uses the first of these that applies, and hides the button if none do:

callbacks.onAddToCart: a callback on your page that adds the product itself.
Shopify: detected automatically on Online Store themes. Nothing to configure.
A configured request: ecomPlatform and cart in the server-side widget config (Widget Builder → Advanced). No code changes on your site.

Your DigitalGenius Solutions Engineer can build the configured request from an add to cart request recorded on your store.

Salesforce Commerce Cloud (SFRA)

{
  "ecomPlatform": "sfcc",
  "cart": {
    "add": {
      "url": "/on/demandware.store/Sites-Example-Site/en_GB/Cart-AddProduct"
    }
  }
}

The URL contains your site ID and locale, so each regional site needs its own widget config. Carousel product ids must be variant product IDs.

Other platforms

Set ecomPlatform to custom and describe your store's add to cart request:

{
  "ecomPlatform": "custom",
  "cart": {
    "add": {
      "url": "/checkout/cart/add",
      "encoding": "form",
      "body": {
        "product": "{{productId}}",
        "qty": "{{quantity}}",
        "form_key": "{{token.formKey}}"
      },
      "tokens": { "formKey": { "cookie": "form_key" } },
      "failWhen": [{ "path": "/error" }]
    },
    "afterAdd": [{ "type": "event", "name": "cart:refresh" }]
  }
}

Property	Description
`add.url`	Required. Must be on the same origin as the page; a relative path is recommended.
`add.method`	`POST` (default), `PUT` or `PATCH`.
`add.encoding`	`json` (default) or `form`.
`add.headers`, `add.body`	The request headers and body. Values can use placeholders.
`add.tokens`	Values read from the page on click, e.g. CSRF tokens: `{ "cookie": "name" }`, `{ "meta": "name" }`, `{ "selector": "css", "attribute": "optional" }`, `{ "global": "path.on.window" }` or `{ "localStorage": "key" }`. If one can't be found, nothing is sent.
`add.failWhen`	Rules that mark a 2xx JSON response as failed: a JSON Pointer `path`, plus an optional `equals` (otherwise any truthy value matches).
`afterAdd`	Lets your theme refresh its mini cart: `{ "type": "event", "name": "...", "detail": "{{response}}" }` dispatches a DOM event; `{ "type": "jquery", "name": "...", "selector": "...", "data": "{{response}}" }` triggers a jQuery event.

Placeholders: {{id}} (the selected product, variant or size), {{productId}} (the parent product), {{quantity}}, {{token.<name>}}, {{item.<field>}} and, in afterAdd, {{response}}.

Any cartParams the flow sends on a carousel slide, variant or size are added to the request body. See the Carousel documentation.