Opening products for editing
- Last updated on April 9, 2024
- •
- 5 minutes to read
When you organize your products in Customer's Canvas, you can use them in your app through the BackOffice API. Let's look at how you can open a product for editing and render the personalization result using Customer's Canvas tools.
To open products for editing, you need a product ID and the corresponding workflow ID. Then, depending on the workflow type, you will need to use the appropriate editor. After completing the personalization and checkout process, you can create a project using the order data.
To use the API, you first need to request an access token, which need to be added to every request.
Getting the product ID
To get product identifiers, you can search for products in your tenant by their names, SKUs, tags, or custom fields using the endpoint Products_GetAllProducts. For example, let's get a list of cards.
curl -X \
GET "https://api.customerscanvashub.com/api/storefront/v1/products?search=card&tenantId=12345" \
-H "accept: text/plain" \
-H "Authorization: Bearer <TOKEN>"
The response of this endpoint will contain an items
array with objects Products. Among the properties of this object, you can find the product id
, personalizationWorkflowId
, and processingPipelineId
.
Getting the workflow
Using the product ID, you can get such workflow details as the type and definition with the endpoint Products_GetPersonalizationWorkflow.
curl -X \
GET "https://api.customerscanvashub.com/api/storefront/v1/products/417/personalization-workflow" \
-H "accept: text/plain" \
-H "Authorization: Bearer <TOKEN>"
In the response of the endpoint, there is a workflowType
property with a string value: UIFramework
, SimpleEditor
, DesignEditor
, or HandyEditor
.
The workflow type allows you to run the appropriate editor. For example, let's learn how to open a product in the Simple Editor.
When you are using the editors deployed in a Customer's Canvas tenant, you can retrieve links to them through the API.
Getting the Simple Editor link
The endpoint TenantInfo_GetApplicationsInfo allows you to get links to the editors deployed in your tenant.
curl -X \
GET "https://api.customerscanvashub.com/api/storefront/v1/tenant-info/applications?tenantId=12345" \
-H "accept: text/plain" \
-H "Authorization: Bearer <TOKEN>"
In the response, find the simpleEditorUrl
.
{
"uiFrameworkUrl": "https://staticjs-aurigma.azureedge.net/ui-framework/stable",
"simpleEditorUrl": "https://staticjs-aurigma.azureedge.net/simple-editor/stable",
"workflowElementsUrl": "https://staticjs-aurigma.azureedge.net/libs/us/workflow-elements",
...
}
Opening the Simple Editor
Now that you know the URL that links to the editor, let's open it.
Add the script and styles to a page.
// Simple Editor styles const editorStylesUrl = simpleEditorUrl + '/styles.css'; const editorStylesElement = document.createElement('link'); editorStylesElement.href = editorStylesUrl; editorStylesElement.rel = 'stylesheet'; document.head.appendChild(editorStylesElement); // Simple Editor script const editorScriptUrl = simpleEditorUrl + '/editor.js'; const editorScriptElement = document.createElement('script'); editorScriptElement.src = editorScriptUrl; document.head.appendChild(editorScriptElement);
Add an editor container
<main class="main"> <au-simple-editor></au-simple-editor> </main>
Initialize the editor on page load.
editorScriptElement.onload = () => { const simpleEditor = document.getElementsByTagName('au-simple-editor').item(0); simpleEditor?.init({ integration: { tenantId: <yourTenantId>, user: { id: <userId>, token: <userToken> }, storefrontId: <yourStorefrontId>, cchubApiGatewayUrl: "https://api.customerscanvashub.com/" }, product: { productId: <productId> }, settings: {<workflowContent>}, }); };
Here, you must pass a token generated for a user. The endpoint StorefrontUsers_Create adds users to your application, and StorefrontUsers_GetToken generates tokens for them, as described in the Registering customers topic.
In the settings
, pass the workflow content
.
For more details, you can refer to the Workflow topic.
Data for creating projects
When the user finishes editing the product, the addtocart
event is triggered. To process the result, handle this event as follows:
simpleEditor.addEventListener("addtocart", event => {
const cartItem = event.detail;
console.log(cartItem);
});
As a result, the following object will be returned:
{
key: string; // the key of this lineItem, the same as `stateId`
quantity: number; // quantity of items in the order
originalProductId?: string; // product ID before editing
sku?: string; // a product SKU
properties: {
_stateId: string[]; // an array of state files
_userId: string; // a customer ID
_hidden: {
images: string[]; // an array of URL previews
};
};
}
Based on this data, you can create a project with the endpoint <xref:Storefront API/storefront-v1/Projects_Create>.
curl -X \
POST "https://api.customerscanvashub.com/api/storefront/v1/projects?storefrontId=12" \
-H "accept: text/plain" \
-H "Authorization: Bearer <TOKEN>" \
-d "{'productReference': $cartItem.originalProductId, 'ownerId': $cartItem.properties._userId, 'items': [{ 'designIds': $cartItem.properties._stateId, 'sku': $cartItem.sku, 'quantity': $cartItem.quantity}]}"