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:

pnpm install @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. | | addressType | string | false | Destination type. Use BUSINESS for B2B customers; all other values default to RESIDENTIAL. | | shopifyProductId | string | false | Shopify product ID used to match the PDP quote with checkout. | | shopifyVariantId | string | false | Shopify variant ID used to match the PDP quote with checkout. | | weight | number | false | Product weight in kilograms | | price | number | false | Product price in the smallest currency unit (for Shopify, cents) | | 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:

<partbot-shipping-calculator
  data-api-key="YOUR_API_KEY"
  data-sku="YOUR_SKU"
  data-brand="YOUR_BRAND"
  data-quantity="1"
  data-address-type="RESIDENTIAL"
  data-price="59900"
  data-shopify-product-id="123"
  data-shopify-variant-id="456"
  data-theme-color="#4f46e5"
/>

Learn more at shipping-calculator.partbot.io