Integrate Purple Dot with Salesforce

Install the Purple Dot LINK cartridge

The Purple Dot LINK cartridge allows you to quickly integrate a Purple Dot instance into a Salesforce Commerce Cloud website. Download the Purple Dot cartridge and unzip its contents:

283KB

pd-cartridge-2024-08-29.zip

archive

v22.1.0 Cartridge (SHA256 14825fc5698ecc1442f463ebf1cb5e666b085e038c43f30929050489d2bcfd9b)

The Purple Dot cartridge enables customers to make pre-orders for out-of-stock products on the merchant’s site. The Purple Dot cartridge provides next features on the SFCC platform:

• Custom pre order button and cart elements on the storefront

• Dedicated configuration page in Business Manager

• Jobs which export and upload shipping methods, inventory lists and product catalogs to Purple Dot service

• Refunds (full or partial)

The cartridge is designed for Salesforce Commerce Cloud API version 22.6 (Compatibility Mode: 21.7) with StoreFront Reference Architecture (SFRA) version 6.0.0. It also supports older SiteGenesis (SG) sites. The cartridge is designed for the US and GB locales, but can work with other locales.

Glossary

Term	Description
SFCC	Salesforce Commerce Cloud
Business Manager (BM)	The primary tool used to configure the SFCC platform and customer storefront SFRA
SFRA	StoreFront Reference Architecture
SG	SiteGenesis

Set Up Business Manager

Import Purple Dot cartridges

1. Download the cartridge source code.

2. Establish a new digital server connection with your SFCC Instance.

3. Import cartridges to a workspace in Salesforce UX Studio.

   
4. Add cartridges to Project Reference of Server Connection.

   1. For SFRA, add the int_purpledot and int_purpledot_sfra cartridges.

      
   2. For SG, add the int_purpledot, int_purpledot_controllers, and purpledot_sg_changes cartridges.

   
5. Wait until Studio completes workspace build and uploads source codes to the sandbox.

Assign cartridges to the site

Go to Administration > Sites > Manage Sites and select your site from the list of “Storefront Sites”.

Go to the Settings tab for your site.

For SFRA sites, in the beginning of the cartridge path add the following:

int_purpledot:int_purpledot_sfra:

Note: cartridge storefront_base is the core SFRA cartridge, which must be present as default SFRA cartridge to run SFRA sites.

For SG sites, in the beginning of the cartridge path add the following:

purpledot_sg_changes:int_purpledot_controllers:int_purpledot:

Note: cartridges storefront_controllers and storefront_core are the core Controllers cartridges, which must be present as default Controller cartridges to run SG sites.

Import metadata

Go to Administration > Site Development > Site Import & Export. Create a zip archive of the metadata folder and upload metadata.zip.

Select metadata.zip and finish the import process.

Configure Site

After import is successfully done, you should see the Purple Dot Custom Site Preference Group in the Business Manager by going toAdministration > Merchant Tools > Site Preferences > Custom Site Preferences.

Set custom site preferences

From Administration > Merchant Tools > Site Preferences > Custom Site Preferences, select Purple Dot.

The following preference values need to be set:

Preference name	Description
Enable PurpleDot	Enable/disable all Purple Dot instances across the site
API key	Value for Purple Dot SDK. Your API key can be retrieved from Purple Dot by going to Settings > Integration > API Keys.
Secret Key	Value for JSON Web Token generator. Your Shared Secret Key can be retrieved from Purple Dot by going to Settings > Integration > API Keys.
Button style	Custom CSS styles for the Purple Dot pre-order button element.
Cart style	Custom CSS styles for the Purple Dot cart button element.

Set Up Jobs

There are three jobs that need to be set up:

• PurpleDotCatalogExport

• PurpleDotInventoryExport

• PurpleDotShippingMethodsExport

Note: Catalog export job supports only one catalog at a time by default. If there is a need to upload more than one catalog, duplicate existing catalog export job and change its job ID to match the following pattern - PurpleDot_CatalogExportJob_<YOUR CUSTOM SUFFIX>.

The following steps are similar for all Purple Dot jobs. The specific steps for job marked with the name of this particular job:

1. Go to Administration > Administration > Operations > Job Schedules > [PurpleDot_CatalogExport/PurpleDot_InventoryExport/PurpleDot_ShippingMethodsExport].

2. Go to the Schedule and History tab in order to define job intervals. Your catalogs/inventory lists/shipping methods will be synced in the Purple Dot system each time jobs have been scheduled.

3. Go to the Job Step tab and click on the “Organization” button

4. Select needed site for every job step (Note: For the CreateCatalogFeed step in PurpleDot_CatalogExport job the only applicable scope is “Organization”)

5. [PurpleDot_ExportCatalog job] Open CreateCatalogFeed step, enter catalog ID to export in the “CatalogID” field and click the “Assign” button. (Note: Only “owned” products from catalog will be exported, “assigned” products will be ignored)

Provide Service Credentials

Go to Administration > Operations > Services > Credentials. Choose purpledot.s3.aws.cred.

Enter service credentials provided by Purple Dot, setting the provided AWS access key as user and access secret as password.

Test that the jobs work by clicking Run Now.

Warning: If the jobs fails immediately or if the storefront isn't being updated, you might need to reactivate your current code version.

OCAPI settings

Warning: OCAPI permissions need to be appended in addition to any pre-existing permissions.

Enter OCAPI permissions within Business Manager: Administration > Site Development > Open Commerce API Settings. See this “purpledot ocapi shop.json” file for required permissions.

5KB

pd_ocapi_shop.json

977B

pd_ocapi_data.json

The cartridge registers one hook-point to facilitate further customization:

• The hook-point dw.ocapi.shop.order.afterPATCH is used to update payment status of the order placed with PurpleDot pre-order checkout

Add Salesforce Commerce Cloud credentials to Purple Dot

In your Purple Dot Merchant Portal, go to Settings > Integration > Connected SFCC Store and click Connect. Fill in the SFCC instance and site you are connecting to, the OCAPI Client ID and password, if using a sandbox instance the Sandbox username and password, and click save. Credentials will be validated upon saving.

Integrate Purple Dot with your SFRA site

Edit models

Note: all changes are already made in the int_catch_sfra cartridge. Files in the current cartridge use scripts and utilities from core cartridges. The file paths inside require() functions were changed to keep the relative paths to the core cartridges.

For each of the following files, add the required code:

1. app_storefront_base/cartridge/templates/default/purpleDot/cartbutton.isml If using the express checkout and a separate card, set enableCart to false: window.PurpleDot.init({ apiKey: '...', enableCart: false });

2. app_storefront_base/cartridge/models/product/decorators/index.js

   Add the following row to the exported object in line 31 to extend product model decorators:

   pdProduct: require('*/cartridge/models/product/decorators/pdProduct')

3. app_storefront_base/cartridge/templates/default/common/htmlHead.isml

   Add the following rows to line 32 to inject the Purple Dot SDK script and custom cartridge css styles to the page:

   <iscomment>Purple Dot code</iscomment>
   
   <link rel="stylesheet" href="${URLUtils.staticURL('/css/purpledot.css')}" />
   <isinclude template="purpleDot/sdkScript" />
   
   <iscomment>Purple Dot code</iscomment>

4. app_storefront_base/cartridge/templates/default/components/header/headermenu.isml

   Put the following rows to the line 33 to add link to Purple Dot self-service widget to the header menu:

   <iscomment>Purple Dot code</iscomment>
   
   <isif condition="${require('*/cartridge/scripts/purpleDot/helpers/pdHelper').getPreference('enable')}">
   
   	<li class="nav-item" role="presentation">
   		<a href="${URLUtils.https('PurpleDot-StatusPage')}" id="pd-history" class="nav-link" role="link" tabindex="0" target="_blank">${Resource.msg('link.name.preorderhistory', 'purpledot', null)}</a>
   	</li>
   
   </isif>
   
   <iscomment>Purple Dot code</iscomment>

   
5. app_storefront_base/cartridge/templates/default/components/header/pageHeader.isml

   Add the following rows at line 45 to add the Purple Dot “Cart button” element to the page header:

   <iscomment>Purple Dot code</iscomment>
   
   <iscomment>Purple Dot Cart Button</iscomment>
   <isinclude template="purpleDot/cartbutton" />
   
   <iscomment>PurpleDot code</iscomment>

   
6. app_storefront_base/cartridge/templates/default/product/components/addToCartGlobal.isml

   Wrap the button and input elements responsible for the native addAllToCart button on the PDPs with product sets and product bundles with following rows in line 3 to insert the Purple Dot Pre-order button on the page:

   <iscomment>Purple Dot code</iscomment>
   
   <isif condition="${product.pdProduct.isEnabled}">
   
   	<isset name="isInStock" value="${product.pdProduct.isInStock}" scope="page" />
   	<isset name="isAvailableForPreorder" value="${product.pdProduct.productToRender.availableForPreorder}" scope="page" />
   	<isset name="productIsSoldOut"
   		value="${!product.pdProduct.isInStock && !isAvailableForPreorder}"
   		scope="page" />
   	<isset name="productIsReadyToPreorder"
   		value="${!isInStock && isAvailableForPreorder}"
   		scope="page" />
   	<isset name="isMasterProductSelected" value="${product.pdProduct.masterProductID.trim() === product.id.trim()}" scope="page" />
   	<isset name="isSimpleProduct" value="${product.productType ==='standard'}" scope="page" />
   	
   	<input type="hidden" class="add-to-cart-url" value="${pdict.addToCartUrl}">
   	<button class="add-to-cart btn btn-primary ${(isMasterProductSelected && !isSimpleProduct) || productIsReadyToPreorder ? "d-none" : ""}"
   		data-toggle="modal" data-target="#chooseBonusProductModal"
   		data-pid="${product.id}"
   		${!product.readyToOrder || !product.available || productIsSoldOut ? "disabled" : ""}
   		aria-disabled="${productIsSoldOut}">
   		
   		<i class="fa fa-shopping-bag"></i>
   		<span>${productIsSoldOut ?  Resource.msg('button.title.soldout', 'purpledot', null) : Resource.msg('button.addtocart', 'common', null)}</span>
   	</button>
   
   	<iscomment>Purple Dot Preorder Button</iscomment>
   	<isinclude template="purpleDot/preorderbutton" />
   
   <iselse/>
   
   	... // template content goes here
   
   </isif>
   
   <iscomment>Purple Dot code</iscomment>

   
7. app_storefront_base/cartridge/templates/default/product/components/addToCartGlobal.isml

   Wrap the button and input elements responsible for the native addToCart button on the PDP with following rows in line 3 to insert the Purple Dot Pre-order button on the page:

   <iscomment>Purple Dot code</iscomment>
   
   <isif condition="${product.pdProduct.isEnabled}">
   
   	<isset name="isInStock" value="${product.pdProduct.isInStock}" scope="page" />
   	<isset name="isAvailableForPreorder" value="${product.pdProduct.productToRender.availableForPreorder}" scope="page" />
   	<isset name="productIsSoldOut"
   		value="${!product.pdProduct.isInStock && !isAvailableForPreorder}"
   		scope="page" />
   	<isset name="productIsReadyToPreorder"
   		value="${!isInStock && isAvailableForPreorder}"
   		scope="page" />
   	<isset name="isMasterProductSelected" value="${product.pdProduct.masterProductID.trim() === product.id.trim()}" scope="page" />
   
   	<input type="hidden" class="add-to-cart-url" value="${pdict.addToCartUrl}">
   
   	<button class="add-to-cart-global btn btn-primary ${isMasterProductSelected || productIsReadyToPreorder ? "d-none" : ""}"
   		data-pid="${product.id}"
   		${!product.readyToOrder || !product.available || productIsSoldOut  ? "disabled" : ""}
   		aria-disabled="${!productIsSoldOut}">
   
   		<i class="fa fa-shopping-bag"></i>
   		
   		<isif condition="${product.productType === 'set' || product.productType === 'bundle'}">
   		
   			<span>
   				${productIsSoldOut ? Resource.msg('button.addalltocart', 'common', null) : Resource.msg('button.title.soldout', 'purpledot', null)}
   			</span>
   			
   		<iselse>
   		
   			<span>
   				${productIsSoldOut ? Resource.msg('button.addtocart', 'common', null) : Resource.msg('button.title.soldout', 'purpledot', null)}
   			</span>
   
   		</isif>
   
   	</button>
   
   	<iscomment>Purple Dot Preorder Button</iscomment>
   	<isinclude template="purpleDot/preorderbutton" />
   
   <iselse/>
   
   	... // template content goes here
   
   </isif>
   
   <iscomment>Purple Dot code</iscomment>

   
8. app_storefront_base/cartridge/templates/default/product/productTile.isml

   Put the following rows to the line 21 to include pre-order label to the product tile:

   <iscomment>Purple Dot code</iscomment>
   
   <isinclude template="purpleDot/preorderlabel" />
   
   <iscomment>Purple Dot code</iscomment>

   
9. app_storefront_base/cartridge/templates/default/product/components/quantity.isml

   Wrap the template elements responsible for the quantity number selection on the PDP with following rows in line to hide the quantity selector when the Purple Dot cartridge is enabled and Pre-order button is shown on the page:

   <iscomment>Purple Dot code</iscomment>
   
   <isif condition="${product.pdProduct.isEnabled}">
   
   	<isset name="isInStock" value="${product.pdProduct.isInStock}" scope="page" />
   	<isset name="isAvailableForPreorder" value="${product.pdProduct.productToRender.availableForPreorder}" scope="page" />
   
   	<label for="quantity-${loopState && loopState.count ? loopState.count : '1' }" class="${!isInStock && isAvailableForPreorder ? "d-none" : ""}">
   		${Resource.msg('label.quantity', 'common', null)}
   	</label>
   
   	<select class="quantity-select custom-select form-control ${!isInStock && isAvailableForPreorder ? "d-none" : ""}" id="quantity-${loopState && loopState.count ? loopState.count : '1' }">
   
   	<isloop items="${product.quantities}" var="quantity">
   		<option value="${quantity.value}"
   			<isif condition="${product.productType !== 'bundle'}">data-url="${quantity.url}"</isif>
   			${quantity.selected ? 'selected' : ''}
   		>
   			${quantity.value}
   		</option>
   	</isloop>
   
   	</select>
   
   <iselse/>
   
   	... // template content goes here
   
   </isif>

   

Edit client-side scripts

1. app_storefront_base/cartridge/client/default/js/product/detail.js

   Put the following row to the line 3 to add import helper function to the client-side script:

   // Purple Dot code
   var pdHelper = require('../purpleDot/helpers/pdHelper');
   // Purple Dot code

   

   Wrap native code responsible for update of the addToCart button in the updateAddToCart() function in the line 76 to replace change handling behavior of the addToCart button when cartridge is enabled:

   // Purple Dot code
   if (response.product.pdProduct.isEnabled) {
   	pdHelper.handleAddToCartButton(response);
   } else {
   	... // client-side script content goes here
   }
   // Purple Dot code

   
2. app_storefront_base/cartridge/client/default/js/product/detail.js

   // Purple Dot code
   var pdHelper = require('../purpleDot/helpers/pdHelper');
   // Purple Dot code

   

   Add the following row to the line 80 in the fillModalElement() function to add custom function responsible for Purple Dot load script initialization on quickView modal window open:

   // Purple Dot code
   pdHelper.initializePurpleDotLoadScript(data);
   // Purple Dot code

   

   Add the following row to the line 153 in the updateAddToCart() function to handle addToCart button in the quickView modal window when cartridge is enabled:

   // Purple Dot code
   if (response.product.pdProduct.isEnabled) {
   	pdHelper.handleAddToCartButton(response);
   } else {
   	// ... client-script content goes here
   }
   // Purple Dot code

   

Integrate Purple Dot with your SG site

Edit controllers

Note: all changes are already made in the purpledot_sg_changes cartridge. Files in the current cartridge use scripts and utilities from core cartridges. The file paths inside require() and importScript() functions were changed to keep the relative paths to the core cartridges .

1. app_storefront _controllers/cartridge/models/controllers/Product.js

   Put the following rows to the show()function in line31 to check if product is configured and available for pre-order via PurpleDot service:

   // PurpleDot code start
   var productToRender = require('*/cartridge/scripts/purpleDot/helpers/pdHelper').getProductToRender(product);
   // PurpleDot code end

   Put the following row in line 39 to send value from the productToRender variable to the template’s pipeline dictionary:

   productToRender: productToRender, // PurpleDot code

   

   Put the following rows to the variation() function in line 220 to check if product’s variant is configured and available for preorder via PurpleDot service:

   // PurpleDot code start
   var productToRender = require('*/cartridge/scripts/purpleDot/helpers/pdHelper').getProductToRender(product);
   // PurpleDot code end

   Extend object in getView() function with the following row in lines 238, 245, 253 to send value from the productToRender variable to the template’s pipeline dictionary:

   productToRender: productToRender, // PurpleDot code

   

Edit templates

1. app_storefront _core/cartridge/templates/default/components/header/header.isml

   Add the following rows to line 51 at the bottom of file to add the Purple Dot “Cart button” element to the page header:

   <iscomment>Purple Dot Cart Button</iscomment>
   <isinclude template="purpleDot/cartbutton" />

   
2. app_storefront _core/cartridge/templates/default/components/header/header.isml

   Add the following rows to the line 45 at the bottom of file to add a link to Purple Dot’s self-service widget to the header menu:

   <iscomment>Purple Dot code</iscomment>
   
   <isif condition="${require('*/cartridge/scripts/purpleDot/helpers/pdHelper').getPreference('enable')}">
   
   	<iscomment>Purple Dot self-service widget</iscomment>
   	<li>
   		<a href="${URLUtils.https('PurpleDot-StatusPage')}" title="Preorder History" target="_blank">
   			<span>${Resource.msg('link.name.preorderhistory', 'purpledot', null)}</span>
   		</a>
   	</li>
   
   </isif>
   
   <iscomment>Purple Dot code</iscomment>

   
3. app_storefront _core/cartridge/templates/default/components/header/htmlhead.isml

   Add the following rows at the line 30 to include Purple Dot SDK script in the page header:

   <iscomment> Load the Purple Dot SDK </iscomment>
   <isinclude template="purpleDot/sdkScript"/>

   

   Add the following rows to the line 85 to add cartridge styles to the page header:

   <!-- Purple Dot Styles -->
   <link rel="stylesheet" href="${URLUtils.staticURL('/css/purpleDot.css')}" />

   
4. app_storefront _core/cartridge/templates/default/product/productcontent.isml

   Add the following row to line 3 to add import helper function to the client-side script:

   <iscomment>Purple Dot</iscomment>
   
   <isif condition="${pdict.Product.getAvailabilityModel().isInStock()}">
   
   	// ...template content goes here
   
   </isif>
   
   <iscomment>Purple Dot</iscomment>

   

   Wrap the block of the template responsible for “Add to cart” button with the following rows in line 226 to add the Purple Dot “Pre-order” button element on the PDP page:

   <iscomment>Purple Dot</iscomment>
   
   <isif condition="${pdict.Product.getAvailabilityModel().isInStock()}">
   
   	// ...contents of the template go here
   
   <iselseif condition="${pdict.productToRender.availableForPreorder}"/>
   
   	<iscomment>PurpleDot Preorder Button</iscomment>
   	<isinclude template="purpleDot/preorderbutton" />
   
   <iselse/>
   
   	<button id="add-to-cart" type="button" title="${Resource.msg('button.title.soldout', 'purpledot', null)}" value="${Resource.msg('button.title.soldout', 'purpledot', null)}" class="button-fancy-large add-to-cart-disabled" disabled="disabled">${Resource.msg('button.title.soldout', 'purpledot', null)}</button>
   
   </isif>
   
   <iscomment>Purple Dot</iscomment>

   
5. app_storefront_core/cartridge/templates/default/product/producttile.isml

   Add the following rows to the line 129 to add the “preorder label” element to the product tile component:

   <iscomment>PurpleDot Pre-order label</iscomment>
   
   <isset name="pdProduct" value="${pdict.Product}" scope="page" />
   <isinclude template="purpleDot/preorderlabel" />

   
6. app_storefront_core/cartridge/templates/default/product/producttopcontentPS.isml

   Wrap the form with the following rows in line 153 in the end of the file to add the Purple Dot “Pre-order” button element on the “bundle” product page:

   <isif condition="${pdict.Product.getAvailabilityModel().isInStock()}">
   
   	// contents of the core cartridge go here
   
   <iselseif condition="${pdict.productToRender.availableForPreorder}"/>
   
   	<iscomment>Purple Dot Preorder Button</iscomment>
   	<isinclude template="purpleDot/preorderbutton" />
   
   <iselse/>
   
   	<button id="add-to-cart" type="button" title="${Resource.msg('button.title.soldout', 'purpledot', null)}" value="${Resource.msg('button.title.soldout', 'purpledot', null)}" class="button-fancy-large add-to-cart-disabled pd-sold-out" disabled="disabled">${Resource.msg('button.title.soldout', 'purpledot', null)}</button>
   
   </isif>

   
7. app_storefront_core/cartridge/templates/default/product/components/productsetproduct.isml

   Wrap the form with the following rows in line 73 in the end of the file to add the Purple Dot “Pre-order” button element on the “bundle” product page:

   <iscomment>Purple Dot code</iscomment>
   
   <isif condition="${pdict.Product.getAvailabilityModel().isInStock()}">
   
   	// ...form content
   
   <iselseif condition="${pdict.productToRender.availableForPreorder}"/>
   
   	<isinclude template="purpleDot/preorderbutton"/>
   
   <iselse />
   
   	<button id="add-to-cart" type="button" title="${Resource.msg('button.title.soldout', 'purpledot', null)}" value="${Resource.msg('button.title.soldout', 'purpledot', null)}" class="button-fancy-large add-to-cart-disabled" disabled="disabled">${Resource.msg('button.title.soldout', 'purpledot', null)}</button>
   
   </isif>
   
   <iscomment>Purple Dot code</iscomment>

   
8. app_storefront_core/cartridge/templates/default/product/components/recommendations.isml

   Add the following rows in line 47 to add the “pre-order label” element to the product tiles in the blocks with recommendations:

   <iscomment>PurpleDot Pre-order label</iscomment>
   <isset name="pdProduct" value="${pdict.Product}" scope="page" />
   <isinclude template="purpleDot/preorderlabel" />

   

Edit client-side scripts

1. app_storefront_core/cartridge/js/pages/products/productSet.js

   Put the following rows to the line 7 in the top of file to add the handleSoldoutButtonState() function responsible for keeping the “Sold out” button element disabled after page loads:

   // PurpleDot code
   function handleSoldoutButtonState() {
   	var pdSoldoutButton = $('button.pd-sold-out');
   	
   	if (pdSoldoutButton.length > 0) {
   		pdSoldoutButton.prop('disabled', true);
   	}
   }
   // PurpleDot code

   Put the following rows to the line 32 in the top of file to the updateAddToCartButtons() function to keep “Sold out” button element disabled after page loads for ‘bundle’ products:

   // PurpleDot Code
   handleSoldoutButtonState();
   // PurpleDot Code

   

Additional client-side APIs

Here are some additional client side APIs that can be used to customise the storefront experience

numberOfPreorderItemsInBag

You can use the following code in your storefront to determine the number of preorder items that a shopper has added to their cart.

window.PurpleDot.numberOfPreorderItemsInBag().then(
    (preorderItemsInBag) => {
        // ...
    }
);

openCheckout

You can open the Purple Dot checkout using the following code

window.PurpleDot.openCheckout()

Events

The Purple Dot client-side SDK emits the following events on the storefront.

Event name	Description
PurpleDot:Ready	Emitted when the Purple Dot SDK is initialised and ready for use
PurpleDot:AddToCart	Emitted when the shopper has added a preorder item to their cart

Building a custom preorder checkout button

The above APIs and events can be leveraged to build a custom preorder checkout button. The following is a simplified example:

<body>
    <button id="preorder-checkout-button">Checkout</button>
    
    <script>
        const preorderCheckoutButton = document.querySelector(
            '#preorder-checkout-button'
        );
        
        preorderCheckoutButton.style.visibility = 'hidden';
        
        async function changeCheckoutButtonVisibility() {
            const numberOfPreorderItemsInBag = await window
                .PurpleDot
                .numberOfPreorderItemsInBag();
                
            preorderCheckoutButton.style.visibility = numberOfPreorderItemsInBag > 0
                ? 'initial'
                : 'hidden';
        }
        
        const eventsToListen = ['PurpleDot:Ready', 'PurpleDot:AddToCart'];
        
        for (const event of eventsToListen) {
            window.addEventListener(event, () => {
                changeCheckoutButtonVisibility();
            });
        }
        
        preorderCheckoutButton.addEventListener('click', (event) => {
            event.preventDefault();
            window.PurpleDot.openCheckout();
        });
    </script>
</body>

Test the Integration

Follow the steps below to validate that you have successfully installed the Purple Dot cartridge.

Business Manager [Inventory Management]

All cartridge components are located in "Merchant Tools > Site Preferences > Custom Site Preference > PurpleDot".

PurpleDot service needs to be enabled. Specify your PurpleDot Public Key and PurpleDot API Key.

Configure product

1. Go to Merchant Tools > Products and Catalogs >Inventory.

2. Choose an inventory book assigned to the current site.

3. Go to the “Records” tab, find the product that should be configured and click the “Edit” button.

4. Configure the product’s availability settings by setting “Allocation” field value to 0.0 (zero).

5. Set the “None” checkbox in for the “Pre-Order/Backorder Handling” field.

Product Availability Status should change to Not Available.

Synchronize catalog and shipping methods with Purple Dot platform

1. Go to Administration > Operations > Jobs > [[PurpleDot_Job]]

2. Run each job by clicking the “Run now” button

Create waitlist in the Purple Dot dashboard

3. Create a waitlist in the PurpleDot dashboard [Putting a Product on Pre-order]

4. Add configured product to the waitlist [From your Catalogue]

5. Configure and save a waitlist.

Storefront [Visual Components – PDP, Checkout and Self Service]

PDP

On the PDP page with the configured product the custom “Pre-order” button should appear.

After adding the configured product to the pre-order list, the custom Purple Dot cart icon should appear near the default storefront cart icon.

In the BM inventory data should change:

• Pre-Order/Backorder Allocation: your data.

• Availability Status: Pre-order.

Proceed to checkout by clicking the “Checkout” button.

The modal window with Purple Dot pre-order checkout should appear.

Pre-order label

On the product tile of the configured product the “Pre-order” label should appear.

Self-service widget

Click the “Pre-order history” link.

A new page with PurpleDot self-service widget should open.

Other [Refund, Taxes and SSO]

Refunds

Place an order using Purple Dot pre-order checkout. Go to the Purple Dot dashboard and find your pre-order in the “Pre-orders” tab. Click on the pre-order.

Export your pre-order to the SFCC by clicking the “Export pre-order to SFCC button”.

Click the “Refund payment” button.

Enter the refund amount and click the “Confirm refund” button.

Go to the BM: Merchant Tools > Ordering > Orders and find order.

Check order notes. A note with the refund amount in the order’s “Notes” tab should appear in order notes.

Taxes

Configure manual tax rate in Purple Dot -> Settings -> Taxes or add your Vertex Key.

Login

Login to the Purple Dot dashboard is via an email magic link of SSO. See separate documentation for SSO configuration.

Gift Cards

If required, ask the Purple Dot team to enable the Clutch Gift Cards integration.

Download Documentation

Download the full Purple Dot cartridge documentation:

6MB

ppd-22.1.0_documentation.zip

archive

v22.1.0 Docs