Integrate with Shopify using React
React integrations are incompatible with apps that take shoppers through a 3rd party checkout such as TryNow or BlackCart. If your store uses any of these, please hide the alternative Add to Cart buttons if the cart contains a pre-order. This can be detected by the presence of a __releaseId property on a line item.
npm install @purple-dot/purple-dot-react
Include the
PurpleDot context in your app and pass it your Purple Dot store's public API key, which you can find at the bottom of the Integration settings page in the Merchant Portal. All other Purple Dot components must be children of the context.import { PurpleDot } from '@purple-dot/purple-dot-react';
const App = () => {
return (
<PurpleDot apiKey="87d9920c-c9d4-4a17-9b77-cfd71a2d4f1a">
// Your app code
</PurpleDot>
);
}
Use the individual Purple Dot elements anywhere in your app. Pass them the currently selected
sku.You can use the
usePurpleDot() hook to get access to the underlying SDK.import React, { useEffect } from 'react';
import { ButtonElement, usePurpleDot } from '@purple-dot/purple-dot-react';
const ProductPage = ({ product, selectedVariant, isPreorder }) => {
const purpleDot = usePurpleDot();
useEffect(() => {
if (purpleDot) {
purpleDot.on('OrderSubmitted', ({ sku }) => {
analytics.track('Purple Dot Order Submitted', { sku });
});
}
}, [purpleDot]);
return (
<div class="product-page">
<span>{product.name}</span>
<span>{product.price}</span>
{
isPreorder
? <button id="add-to-cart">Add to Cart</button>
: <ButtonElement productId={product.id} skuId={selectedVariant.id} />
}
</div>
);
}