What is StorefrontJS

• 1 minute to read

StorefrontJS is a JavaScript library compiled into storefront.main.js. This library is a part of the Storefront SDK and is designed to simplify the process of integrating e-commerce solutions with Customer's Canvas. StorefrontJS allows you to accept identifiers of the product and the customer of an online store, implement the configuration load, and manage all the necessary calls to the editor to control the personalization process.

Purpose

This library allows you to:

• Obtain information about the Product specification and PIM workflows.
• Load the editor to be displayed on the client's page.
• Process the editing completion event.
• Restore the editing process.

Application

The compiled StorefrontJS script is used for creating custom integrations, loading workflow files, and starting the personalization process. There are also developed standard integrations based on StorefrontJS, for example, with the following e-commerce systems:

• Shopify
• nopCommerce
• WooCommerce
• Magento
• BigCommerce

Placing of StorefrontJS in your system

This is how the StorefrontJs script can be integrated to your system.

graph TB subgraph Your application fr(Frontend scripts) --> stjs(StorefrontJS) end stjs--Get workflow-->bo(CCHub) bo--Workflow data-->stjs stjs--->ed(Editors)

1. The compiled storefront.main.js script is loaded into your application and connected from the desired page.
2. The client scripts in your application refer to the global Aurigma object and start working with StorefrontJS.
3. Then, this script accesses the CCHub cloud panel to obtain this integration information, workflow, and links to editors and scripts.
4. After that, the required applications are loaded according to the product specification.
5. The personalization results from the editors are processed in your application.

Where do I get the StorefrontJS script?

You can refer to storefront.main.js from our CDN.

<script src="https://staticjs.blob.core.windows.net/back-office/storefront/1.2.16/storefront.main.js"></script>

For more details, you can refer to the BackOffice Integration sample.