shipped-suite-shopify-headless-client-sdk

1. Install shipped-suite-shopify-headless-client-sdk

npm i shipped-suite-shopify-headless-client-sdk

2. Add the div snippet where you would like the widget to appear in the cart or checkout flow.

<div class="shipped-widget"></div>

3. Import the Shipped Controller

import { Controller } from 'shipped-suite-shopify-headless-client-sdk'

4. Instantiate the JS SDK

const shippedController = new Controller({
  widgetSelector: '.shipped-widget',
})

5. Listen and react to onInit and onChange. onInit is triggered only once when the widget is initialized. When a user opts in or opts out of Shipped Widget, or when the offer changes, onChange callback is triggered. Your code should provide a handler for this callback, and ensure any necessary processing required by your backend server. For example:

shippedController.onChange(details => {
  // Example 'details':
  // {
  //   "isSelected": true,
  //   "totalFee": "2.23",
  //   "shippedProducts": []
  // }
})

6. When the cart changes, for example products are added or removed, product quantity is changed, you need to trigger update method. The widget will update its state and price offer based on the new cart total.

shippedController.update()