shipped-suite-bigcommerce-headless-client-sdk v2.0.10

shipped-suite-bigcommerce-headless-client-sdk

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

npm i shipped-suite-bigcommerce-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-bigcommerce-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": [] // see shippedProducts details under `onShipped` method below
  // }
})

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()

7. Optionally, you can choose not to have Shipped product(s) added automatically to cart when the widget is loaded, so you can add them manually. For this, you need to implement a handler for onShipped method.

shippedController.onShipped(shippedProducts => {
  // shippedProducts example:
  // [
  //     {
  //         "variantId": 184,
  //         "productId": 142,
  //         "productTitle": "Shipped Shield Package Assurance",
  //         "productDescription": [
  //             "Shipped Shield offers premium package assurance for shipments that are lost, damaged or stolen.\nInstantly track and resolve shipment issues hassle-free with the app.\n"
  //         ],
  //         "productImageURL": "https://cdn11.bigcommerce.com/s-gp0jesx31h/products/142/images/405/shield-be9ba978feb179704666141db2d825d1f9d9cc55787fdcbf9885dff04b0dd644__51892.1666107765.386.513.png?c=1",
  //         "price": "3.94",
  //         "type": "shield",
  //         "mandatory": false
  //     }
  // ]
})