Shipped Suite Bigcommerce React Client SDK

Shipped Suite offers premium package assurance for shipments that are lost, damaged or stolen. Instantly track and resolve shipment issues hassle-free with the app.

Installation

NPM

npm install shipped-suite-bigcommerce-react-client-sdk

Yarn

yarn add shipped-suite-bigcommerce-react-client-sdk

Usage

1. Import ShippedWidget and ShippedController react components into your project:

import { ShippedWidget, ShippedController } from 'shipped-suite-bigcommerce-react-client-sdk';

2. Add <ShippedWidget /> component inside a <ShippedController /> component:

<ShippedController
  shippedConfig={{
    storeHash: 'your_store_hash',
  }}
  onInit={handleInit}
  onChange={handleChange}
  onProcessStart={handleProcessStart}
  onProcessEnd={handleProcessEnd}
  cartItems={cartItems}
  isCartEligible={isCartEligible}
/>
  <ShippedWidget />
</ShippedController>

If you need to add more than one <ShippedWidget /> element (for example, one for mobile cart and one for desktop cart), you need to ensure that all <ShippedWidget /> elements are wrapped within a single <ShippedController /> element instance.

3. Configure component props:

• shippedConfig is the object that allows widget configuration.

  • storeHash can be derived from your Bigcommerce store dashboard URL. For example, if your URL is https ://store-xxxxxxxxx.mybigcommerce.com/ then your_store_hash value is xxxxxxxxx.

• onInit & onChange - optional. Since adding & removing Shipped product from cart is handled automatically by the widget, onChange could be useful for any other UI related adjustments. When a user opts in or opts out of Shipped Widget, or when the offer changes, onChange callback is triggered. You can provide a handler for this callback:

  const handleChange = (details) => {
    console.log(details);
  
    // Example 'details':
    // {
    //   "isSelected": true,
    //   "totalFee": "2.23",
    //   "shippedProducts": []
    // }
  };

• onProcessStart & onProcessEnd - optional. The first one fires immediately before the Shipped widget starts any processes such as fetching cart information, retrieving Shipped offers, or mutating the cart. The second fires immediately afterward. These are useful for preventing the user from making any changes to the cart between these two events.

• When cartItems value changes

  • the widget will automatically update its price
  • Shipped products in cart will also be automatically updated

  cartItems can be any object from your code that you would want the widget to react to. It could also be just a total price variable.

  IMPORTANT! cartItems must exclude Shipped product(s). The widget needs to react only to non-Shipped items. For example, if a new regular product is added to cart, we want the widget to react and update the Shipped price on the widget and also add the Shipped product to cart. But when the Shipped product itself is added to cart, we no longer want to update the Shipped price.

• isCartEligible is a boolean that indicates whether or not the cart is eligible for Shipped widget. By default it's true, but if this is changed to false, the widget will no longer show and Shipped items will be removed from cart.