Integrate the Pre-order Cart

Purple Dot offers a dedicated pre-order cart that lets customers pre-order multiple items at once. The pre-order cart runs alongside your existing cart.

Using the cart is optional. Without it, customers can check out on pre-order items one at a time.

1. Pass the enableCart flag to the SDK

When initializing the SDK, pass in the enableCart flag to incidate the cart should be used.

window.PurpleDot.init({
apiKey: 'your_api_key',
enableCart: true,
});

2. Add the cart button to your store

The cart button is placed and configured the same way as the pre-order button. For the best customer experience, we recommend placing it next to your regular cart button, indicating they are related.

<nav>
<!-- ...Your nav bar content... -->
<!-- Your existing cart button -->
<div class="cart-btn"></div>
<!-- Add the Purple Dot cart button -->
<div data-purple-dot-placement-type="cart-button"></div>
</nav>
window.PurpleDot.load({
placementType: 'cart-button',
});

Multiple cart buttons

In case you need to add multiple cart buttons - for example, if you have different mobile and desktop navigation components that switch dynamically depending on screen size - you can use the instanceId attribute to differentiate between instances of the cart button.

<!-- Desktop navbar -->
<nav class="nav-desktop">
<div class="cart-btn cart-btn-desktop"></div>
<!-- Add the Purple Dot cart button -->
<div data-purple-dot-placement-type="cart-button" data-purple-dot-instance-id="desktop"></div>
</nav>
<!-- Mobile navbar -->
<nav class="nav-mobile">
<div class="cart-btn cart-btn-mobile"></div>
<!-- Add the Purple Dot cart button -->
<div data-purple-dot-placement-type="cart-button" data-purple-dot-instance-id="mobile"></div>
</nav>
window.PurpleDot.load({
placementType: 'cart-button',
instanceId: 'desktop',
});
window.PurpleDot.load({
placementType: 'cart-button',
instanceId: 'mobile',
});

While you can have multiple cart buttons on the same page, we strongly recommend only one is visible at the same time.

Cart visibility changes

The pre-order cart button is initially hidden, and only appears once a customer adds a pre-order item. If you need to react to the button showing or hiding itself - for example to toggle the visibility of an element containing it - you can subscribe the CartButtonVisibilityChanged event.

<nav>
<!-- Even when the button is hidden, the element takes up space due to padding -->
<div class="nav-item nav-item-cart-button" style="padding: 16px">
<div data-purple-dot-placement-type="cart-button"></div>
</div>
</nav>
window.PurpleDot.on('CartButtonVisibilityChanged', ({ showing }) => {
if (showing) {
// Show cart button's container element
document.querySelector('.nav-item-cart-button').style.display = 'inline-block';
} else {
// Hide cart button's container element
document.querySelector('.nav-item-cart-button').style.display = 'none';
}
});