• Prerequisites
• Installation
• Configuration
• Cart Template Modifications

Magento Customizer Implementation Guide

This guide will help you implement the Customizer library in your Magento store. For an overview of common concepts and workflows, please refer to the Ecommerce Integration Overview.

Platform-Specific Integrations

Prerequisites

• A Magento store with theme access
• Your unique Customizer details (provided separately), including:
  • iframeSrc URL
  • editorId
  • productsCategoryId
  • Other configuration parameters

Installation

To add the Customizer to your Magento theme, you'll need to edit your theme files. This can be done directly in the Magento admin or through your preferred theme development method.

Add the following script tag to include the Customizer library in your theme:

<script src="https://cdn.idealfactory.com/editors/customiser_xxx.min.js"></script>

Configuration

To set up the Customizer, add the necessary HTML and PHP to your product template or other relevant pages. Here's a basic configuration:

1. Add a container div for the Customizer:

   <div id="customizer-container"></div>

2. Initialize the Customizer with your configuration:

   <script>
    document.addEventListener('DOMContentLoaded', function() {
      var customizer = new Customizer({
        containerId: 'customizer-container',
        iframeSrc: '<?php echo $block->escapeUrl($iframeSrc); ?>',
        editorId: '<?php echo $block->escapeHtml($editorId); ?>',
        productsCategoryId: '<?php echo $block->escapeHtml($productsCategoryId); ?>',
        cartItemUid: 'cart-item-uid',
        platform: 'magento'
      });
    });
   </script>

   Replace the PHP variables with the actual values from your Customizer details.

Cart Template Modifications

To properly display and manage customized products in the cart, you'll need to modify your cart template. Here are the necessary changes:

1. Update the product title link to include the UUID:

   <a href="<?php echo $block->escapeUrl($block->getProductUrl($_item)) . '?uuid=' . $block->escapeUrl($_item->getCustomOption('_uuid')); ?>">
    <?php echo $block->escapeHtml($_item->getName()) ?>
   </a>

2. Add an "Edit Design" button for each customized item:

   <?php if ($_item->getCustomOption('_uuid')): ?>
   <div>
    <a href="<?php echo $block->escapeUrl($block->getProductUrl($_item)) . '?uuid=' . $block->escapeUrl($_item->getCustomOption('_uuid')); ?>">
      <button type="button" class="action primary">Edit Design</button>
    </a>
   </div>
   <?php endif; ?>

3. Update the product image display to show the customized thumbnail if available:

   <?php if ($_item->getCustomOption('_thumbnails')): ?>
    <img src="<?php echo $block->escapeUrl(json_decode($_item->getCustomOption('_thumbnails')->getValue())[0]); ?>" alt="<?php echo $block->escapeHtml($_item->getName()); ?>" class="product-image-photo">
   <?php else: ?>
    <?php echo $block->getImage($_item, 'cart_page_product_thumbnail')->toHtml(); ?>
   <?php endif; ?>

These modifications will ensure that customized products are properly displayed in the cart, with the ability to edit the design and view the customized thumbnail.