This guide will help you integrate Sign Customiser with the "Add to Cart" functionality on e-commerce platforms like Wix, 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>
window.addEventListener('message', event => {
if (event.data.type === "onProductCreated") {
// Custom logic to handle event.data.product
}
});
</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:
{
"text": "Hello World",
"textAlign": "left",
"font": "Gruppo",
"colour": "PINK",
"size": "50cm",
"support": "Cut to shape",
"supportColour": "Clear Acrylic Transparent - Free",
"extra": [
{
"name": "Mounting Options",
"value": "Complimentary Silver Installation Kit"
},
{
"name": "Dimmers & Remotes",
"value": "Standard Dimmer (+3 USD)"
}
],
"price": "86.34",
"sizeCm": "50cm X 5.59cm",
"sizeIn": "19.69in X 2.2in",
"description": "Text: Hello World\nFont: Gruppo\nColour: PINK\nSize: 50cm\nDimmers & Remotes: Standard Dimmer (+3 USD)",
"taxable": true,
"productImage": "base64 encoded image",
"productImageWhite": "base64 encoded image"
}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.