Partbot Shipping Calculator Plugin

Compatible with Partbot connected ecommerce stores and synced products.

License

Please see the LICENSE file for more information.

Installation

Add the React component to your project by running:

npm install @cartbot/shipping-calculator or yarn add @cartbot/shipping-calculator

Usage

Import the React component into your project and pass in the required props.

import ShippingCalculator from "@cartbot/shipping-calculator";

const App = () => {
  return (
    <ShippingCalculator
      apiKey="YOUR_API_KEY"
      sku="YOUR_SKU"
      brand="YOUR_BRAND"
    />
  );
};

Props

| Prop | Type | Required | Description | | ---------- | ------- | -------- | ------------------------------------------------------------------------------ | | apiKey | string | true | Your Partbot API key. | | sku | string | true | The SKU of the product you want to calculate shipping for. | | brand | string | true | The brand of the product you want to calculate shipping for. | | quantity | number | false | The quantity of the product you want to calculate shipping for. Defaults to 1. | | weight | number | false | Product weight in kilograms | | price | number | false | Product price in dollars (AUD) | | showLabel | boolean | false | Show the label "Calculate Shipping" above the input. Defaults to true. | | themeColor | string | false | The color of the input border and button. Defaults to #4f46e5. |

Web Component

The React component can also be used as a Web Component.

Add the following script tag to your project to load the Web Component JavaScript file: <script src="//unpkg.com/@cartbot/shipping-calculator@latest/dist/shipping-calculator.js" async></script>

Add the following HTML to your project to render the Web Component, passing in the required props as data-* attributes:

<shipping-calculator
  data-api-key="YOUR_API_KEY"
  data-sku="YOUR_SKU"
  data-brand="YOUR_BRAND"
  data-quantity="1"
  data-theme-color="#4f46e5"
/>

Learn more at shipping-calculator.partbot.io