Sign Customiser

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

Copy page

Last updated:

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:

HTML
<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:

JSON
{
  "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.