Widget ​

Once you have access to the dashboard, you will have to install our npm package @orderprotection/core.

After you have installed the package, you can import our createWidget function like so:

import { createWidget } from '@orderprotection/core';

This function has three required parameters:

• store_url
• cart
• locations

store_url is your Order Protection store URL. This can be found in the store settings section of the Order Protection dashboard.

cart is the cart object that you will be sending to Order Protection. This object should follow the cart structure.

locations is an array of sibling objects these objects are the locations that the widget will be rendered.

Example:

locations: [
    {
      sibling: {
        position: "after",
        id: "widget-location-1",
        selector: ".subtotal",
      },
    },
    {
      sibling: {
        position: "before",
        id: "widget-location-2",
        selector: "#mini-cart-subtotal",
      },
    },
  ],

The selector key identifies the element where you wish to place the widget, either before or after the designated element specified by the position key. The syntax aligns with document.querySelector, allowing you to use any valid selector.

End Widget Example:

const opWidget = createWidget({
  store_url: 'www.store.com',
  cart: yourCartObject,
  locations: [
    {
      sibling: {
        position: 'after',
        id: 'widget-location-1',
        selector: '.subtotal',
      },
    },
    {
      sibling: {
        position: 'before',
        id: 'widget-location-2',
        selector: '#mini-cart-subtotal',
      },
    },
  ],
});

opWidget.init();

opWidget.init() will initialize the widget and render it in the specified locations. This will need to be called after the cart has been updated to ensure the widget is always up to date.