document.addEventListener('DOMContentLoaded', () => { const productJson = window?.product || window?.meta?.product || null; if (!productJson) return; // Selector used by Globo for the selected variant ID // (You may need to confirm the exact selector, but Globo always outputs one) const globoInput = document.querySelector('[name="globo_selected_variant"], [data-globo-variant-id]'); // Your theme's add-to-cart form const atcForm = document.querySelector('form[action="/cart/add"]'); if (!globoInput || !atcForm) return; // Create/override the variant input used by Shopify let variantInput = atcForm.querySelector('input[name="id"]'); if (!variantInput) { variantInput = document.createElement('input'); variantInput.type = 'hidden'; variantInput.name = 'id'; atcForm.appendChild(variantInput); } // Whenever Globo updates a swatch const updateVariant = () => { const globoVariantId = globoInput.value || globoInput.getAttribute('data-globo-variant-id'); if (!globoVariantId) return; // Force the variant ID into the form variantInput.value = globoVariantId; // (Optional but recommended) // Update your theme’s selected variant object if it exists if (window?.theme?.Product) { window.theme.Product.selectedVariantId = globoVariantId; } }; // Observe Globo changing its input dynamically const observer = new MutationObserver(updateVariant); observer.observe(globoInput, { attributes: true, attributeFilter: ['value'] }); // Also patch ATC submission in case theme JS overwrites it atcForm.addEventListener('submit', () => { updateVariant(); // last-second override }); // Initial sync updateVariant(); });