💫Variant Integration

It's as easy as walking!

Integration Example

Step 1: Add Mazing script to the <head> element of your website

<!-- MAZING -->
<script src="https://cdn.mazing.link/mzg-in.js" defer="defer"></script>

Step 2: Add your own script at the end of the <body> element

Create a new File and name it 'mazing-integration.js'. Place the script of this File at the end of your body element:

    ...
    
    <!-- MAZING -->
    <script src="{{ 'mazing-integration.js' | asset_url }}" defer="defer"></script>

  </body>

Step 3: Fill your mazing-integration.js File Logic

Copy and paste this blueprint into your empty mazing-integration.js File:

// Wait for the mazingProjectAvailable function to become available
// so till header script is loaded
const waitForMazingFunction = new Promise((resolve) => {
  const interval = 50; // Check every 50ms
  const checkInterval = setInterval(() => {
    if (typeof mazingProjectAvailable === 'function') {
      clearInterval(checkInterval);
      resolve();
    }
  }, interval);
});


// Main script logic
const initializeScript = async () => {
  await waitForMazingFunction;

  console.log('mazing configuration is active :)');
  
  // todo call script logic
  
}
  
// Start the initialization
initializeScript();

You should now see the "mazing configuration is active :)" log when opening the console on your website. This means the script is working!

Step 4: Get SKU and create iFrame

Call await mazingProjectAailable() to get the iFrameSrc. This could look similar to this example:

const initializeScript = async () => {
  await waitForMazingFunction;

  const iframeSrc = await mazingProjectAvailable({
        customerName: 'YourMazingCustomer',
        getSKU: () => {
    
            const url = window.location.href;
            const match = url.match(/\/products\/([^?]+)/);
            const currentProduct = match ? match[1] : null;

            return currentProduct;
        }
  });
  
}
  
initializeScript();

To learn more about getSKU, take a look at -> Script Integration

Step 5: Use postMessage to switch between Variants

Remember the ID/Trigger that we applied to each Variant? Because this becomes important now. Let's say you are using your own User Interface for example where you can choose between different Variations of your Product:

In this case we need to add an event listener on each variation inside the dropdown menu and call the postMessage whenever an option is clicked.

    // This is the select element from our example
    const operations = document.querySelectorAll('.variant-input');

    // We iterate through all options and add an event listener on each option
    for(let i=0; i < operations.length; i++) {

        const operation = operations[i];
        // This is the value of the option. This will become important later on!
        const newDataValue = dataValueFormatter(operation.getAttribute('data-value'));

        operation.addEventListener('click', () => {

            console.log('clicked variant', newDataValue);
            
            // Send the postMessage to change the Variant.
            iframeElement.contentWindow.postMessage({
                type: 'SWITCH_VARIANT',
                value: {
                    trigger: newDataValue
                }
            }, '*');
        });
    }

As you can see, when calling the postMessage we send the newDataValue as Trigger. By clicking on the "All-Black" Option, the newDataValue would have an value of "all-black". And by sending that value as trigger, we can activate the Variant that has the same ID/Trigger as the value we send.

Here we create the Variant:

Here we send the postMessage with the Trigger Value 'all-black' from the shop website:

Congrats! You integrated the configurator to your website!

PreviousWP Shortcode IntegrationNextFor Designers

Last updated