Custom Integration: How to Handle "Add to Cart" Actions

This guide will help you integrate Sign Customiser with the “Add to Cart” functionality on e-commerce platforms like Webflow, and Squarespace.

Step 1: Insert JavaScript Code

To process the “Add to Cart” action, insert the following JavaScript code below your <iframe> on the same HTML page:

<script> <br>window.addEventListener('message', event => {   <br>  if (event.data.type === "onProductCreated") {     <br>    // Custom logic to handle event.data.product   <br>  } <br>});<br></script>

Step 2: Implement Custom Logic

Replace // Custom logic to handle event.data.product with your own implementation to process the product data.

Step 3: Understand the Product Data

When a customer adds a custom sign to their cart, the event.data.product object includes detailed product information, such as:

Text: “Hello World”
Font: Gruppo
Colour: PINK

Example Product Object:

{<br>  "text": "Hello World",<br>  "textAlign": "left",<br>  "font": "Gruppo",<br>  "colour": "PINK",<br>  "size": "50cm",<br>  "support": "Cut to shape",<br>  "supportColour": "Clear Acrylic Transparent - Free",<br>  "extra": [<br>    {<br>      "name": "Mounting Options",<br>      "value": "Complimentary Silver Installation Kit"<br>    },<br>    {<br>      "name": "Dimmers & Remotes",<br>      "value": "Standard Dimmer (+3 USD)"<br>    }<br>  ],<br>  "price": "86.34",<br>  "sizeCm": "50cm X 5.59cm",<br>  "sizeIn": "19.69in X 2.2in",<br>  "description": "Text: Hello World\nFont: Gruppo\nColour: PINK\nSize: 50cm\nDimmers & Remotes: Standard Dimmer (+3 USD)",<br>  "taxable": true,<br>  "productImage": "base64 encoded image",<br>  "productImageWhite": "base64 encoded image"<br>}

This product object provides a comprehensive dataset that can be used to create the product in your eCommerce backend and add it directly to the shopping cart. Integrating this logic ensures a smooth user experience from product customisation to purchase.