@cartbot/shipping-calculator

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