iJewel3D Docs

Appearance

Magento (Adobe Commerce) Integration: Complete Example ​

Embed the Wedding Band Builder on a Magento product page using a custom block and PHTML template.

Back to iframe Embedding guide

Custom Block Template ​

Create a PHTML template for the configurator:

php
<?php
// app/design/frontend/YourTheme/default/Vendor_WeddingBand/templates/configurator.phtml

/** @var \Magento\Framework\View\Element\Template $block */
$productId = $block->getProduct() ? $block->getProduct()->getId() : '';
$addToCartUrl = $block->getUrl('wedding-band/cart/add');
?>

<div class="wbb-configurator" data-product-id="<?= $productId ?>">
    <iframe
        id="wbb-iframe"
        src="https://your-cdn.com/wbb-viewer.html"
        style="width: 100%; height: 70vh; border: none; border-radius: 8px;"
        allow="camera; xr-spatial-tracking"
    ></iframe>

    <div class="wbb-actions" style="margin-top: 24px; display: flex; align-items: center; gap: 16px;">
        <span id="wbb-price" class="price" style="font-size: 28px; font-weight: 700;">
            Loading...
        </span>
        <button id="wbb-add-to-cart" class="action primary tocart">
            <span><?= __('Add to Cart') ?></span>
        </button>
    </div>
</div>

<script>
require(['jquery'], function($) {
    var iframe = document.getElementById('wbb-iframe');
    var reqId = 0;

    function query(method, args) {
        return new Promise(function(resolve) {
            var id = 'req-' + (++reqId);
            var handler = function(e) {
                if (e.data && e.data.id === id) {
                    window.removeEventListener('message', handler);
                    resolve(e.data.result);
                }
            };
            window.addEventListener('message', handler);
            iframe.contentWindow.postMessage({ id: id, method: method, args: args || [] }, '*');
        });
    }

    // Live price updates
    window.addEventListener('message', function(e) {
        if (e.data && e.data.event === 'price:updated' && e.data.data && e.data.data.pricing) {
            $('#wbb-price').text('$' + e.data.data.pricing.totalUsd.toFixed(2));
        }
    });

    // Add to cart
    $('#wbb-add-to-cart').on('click', async function() {
        var $btn = $(this);
        $btn.prop('disabled', true).text('Adding...');

        try {
            var config = await query('exportConfig');
            var productId = $('.wbb-configurator').data('product-id');

            $.ajax({
                url: '<?= $addToCartUrl ?>',
                method: 'POST',
                data: {
                    product_id: productId,
                    wbb_config: JSON.stringify(config),
                    form_key: $.mage.cookies.get('form_key'),
                },
                success: function(response) {
                    if (response.success) {
                        // Trigger Magento's mini-cart update
                        $('[data-block="minicart"]').trigger('contentLoading');
                        $.mage.cookies.set('mage-messages', '', { path: '/' });
                    }
                },
                complete: function() {
                    $btn.prop('disabled', false).text('Add to Cart');
                },
            });
        } catch (err) {
            console.error('WBB error:', err);
            $btn.prop('disabled', false).text('Add to Cart');
        }
    });
});
</script>

Layout XML ​

Add the block to your product page layout:

xml
<!-- app/design/frontend/YourTheme/default/Vendor_WeddingBand/layout/catalog_product_view.xml -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template"
                   name="wedding.band.configurator"
                   template="Vendor_WeddingBand::configurator.phtml"
                   before="-" />
        </referenceContainer>
    </body>
</page>

Controller for Add to Cart ​

php
<?php
// app/code/Vendor/WeddingBand/Controller/Cart/Add.php

namespace Vendor\WeddingBand\Controller\Cart;

use Magento\Framework\App\Action\HttpPostActionInterface;
use Magento\Framework\App\RequestInterface;
use Magento\Framework\Controller\Result\JsonFactory;
use Magento\Checkout\Model\Cart;
use Magento\Catalog\Api\ProductRepositoryInterface;

class Add implements HttpPostActionInterface
{
    public function __construct(
        private RequestInterface $request,
        private JsonFactory $jsonFactory,
        private Cart $cart,
        private ProductRepositoryInterface $productRepository,
    ) {}

    public function execute()
    {
        $result = $this->jsonFactory->create();
        $productId = (int) $this->request->getParam('product_id');
        $wbbConfig = $this->request->getParam('wbb_config');

        try {
            $product = $this->productRepository->getById($productId);

            $params = new \Magento\Framework\DataObject([
                'qty' => 1,
                'wbb_config' => $wbbConfig,
            ]);

            $this->cart->addProduct($product, $params);
            $this->cart->save();

            return $result->setData(['success' => true]);
        } catch (\Exception $e) {
            return $result->setData([
                'success' => false,
                'message' => $e->getMessage(),
            ]);
        }
    }
}