@purple-dot/browser

This package is a toolbox for connecting your headless e-commerce application to Purple Dot. It provides all the features necessary for your integration, including APIs, cart & checkout functionality, and interceptors.

While the examples often refer to Shopify it is designed to support a wide range of stores.

Please see related documentation to learn more.

You can find examples based on this code in purple-dot/browser-examples.

Setup

import { init } from '@purple-dot/browser';
import { ShopifyAJAXCart } from '@purple-dot/browser/shopify-ajax-cart';
import { shopifyInStockAvailability } from '@purple-dot/browser/shopify-in-stock-availability';

init({
  apiKey: 'Your API Key',
});

Availability

This allows you to tell the current availability state for an item so you can tell if the item is in stock, sold out or on preorder.

Pass an optional country (ISO country code) so the preorder state is evaluated for the shopper's country.

import { availability } from '@purple-dot/browser/availability';

async function inStockInMyStore(variantId) {
    const response = await fetch(`/your/api/product.json?variant=${variantId}`);
    const data = response.json();
    
    return data.quantity;
}

const preorderState = await availability(
  { variantId: variant.id, country: 'GB' },
  inStockInMyStore,
);

Checkout

These allow you to interact with the various styles of Purple Dot checkout.

import * as checkout from '@purple-dot/browser/checkout';

await checkout.open();

await checkout.openExpressCheckout(...);

await checkout.addItem(...);

Cart

These allow you to integrate between your normal native cart and Purple Dot when using combined checkouts.

import { cartHasPreorderItem } from '@purple-dot/browser/cart';

await cartHasPreorderItem();

Shopify AJAX Cart Interceptors

These are a specialised middleware that intercept fetch and XHR requests to the Shopify cart APIs and automatically add the required additional metadata to work with Purple Dot.

import * as interceptors from '@purple-dot/browser/shopify-ajax-interceptors';

interceptors.start();

Low level API

fetchVariantsPreorderState and fetchProductsPreorderState accept an optional country as a second argument, sent as ?country= on the request.

import * as api from '@purple-dot/browser/api';

const variantState = await api.fetchVariantsPreorderState(12345);
const variantStateForCountry = await api.fetchVariantsPreorderState(12345, 'GB');

const productState = await api.fetchProductsPreorderState('test-product');
const productStateForCountry = await api.fetchProductsPreorderState('test-product', 'US');