dynamicScriptForPageMetafield(productData, origin, selectedVariant); function dynamicScriptForPageMetafield(productData, origin, selectedVariant) { try { const metafieldNameSpaceAndKeys = gbb.settings.bundleSettings.metafieldNameSpaceAndKeys || []; if (!metafieldNameSpaceAndKeys.length) return ''; // filter origin let metafieldWrapper = gbb.$('

').addClass('productsMetafieldWrapper'); const validMetafieldTypes = [ 'single_line_text_field', 'multi_line_text_field', 'page_reference', ]; //only allow the type whose value we can get root level -- for eg : metafield.value for (let i = 0; i < metafieldNameSpaceAndKeys.length; i++) { let metafieldData = metafieldNameSpaceAndKeys[i]; if ( metafieldData.hasOwnProperty('showOnProductCard') || metafieldData.hasOwnProperty('showOnModal') ) { if (origin == 'PRODUCT_CARD' && !metafieldData.showOnProductCard) { continue; } else if ( origin == 'PRODUCT_VARIANTS_MODAL' && !metafieldData.showOnModal ) { continue; } } let productMetafieldAccessKey = `metafield_${metafieldData?.namespace}_${metafieldData?.key}`; let productMetafieldData = {}; // variant level metafield if (metafieldData.origin == 'variant' && selectedVariant) { productMetafieldData = selectedVariant?.[productMetafieldAccessKey] || {}; } else { // product level metafield productMetafieldData = productData?.[productMetafieldAccessKey] || {}; } if (validMetafieldTypes.includes(productMetafieldData?.type)) { let metafieldContainer = gbb.$('

').addClass('metafieldContainer'); let metafieldLabel = gbb.$('

').addClass('metafieldLabel'); metafieldLabel.text(metafieldData?.label); let metafieldValue = gbb .$('

') .attr('metafield-key', metafieldData?.key); if (metafieldData.origin == 'variant') { metafieldValue.addClass(`variant_metafield_${metafieldData?.key}`); } else { metafieldValue.addClass(`product_metafield_${metafieldData?.key}`); } if ( productMetafieldData?.type === 'page_reference' && productMetafieldData?.reference ) { let reference = productMetafieldData.reference; let metafieldContainer = document.createElement('div'); metafieldContainer.className = 'metafieldContainer'; // Button let sizeGuideBtn = document.createElement('button'); sizeGuideBtn.className = 'gbbSizeGuideBtn'; // Icon wrapper let iconWrapper = document.createElement('span'); iconWrapper.className = 'gbbSizeGuideIcon'; let svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ); svg.setAttribute('viewBox', '0 0 24 24'); svg.setAttribute('fill', 'none'); svg.innerHTML = ` `; iconWrapper.appendChild(svg); let text = document.createElement('span'); text.className = 'gbbSizeGuideText'; text.textContent = 'Size Guide'; sizeGuideBtn.appendChild(iconWrapper); sizeGuideBtn.appendChild(text); // CLICK → OPEN MODAL sizeGuideBtn.addEventListener('click', function () { // remove existing modal document .querySelectorAll('.gbbSizeGuideModal') .forEach((el) => el.remove()); let modalOverlay = document.createElement('div'); modalOverlay.className = 'gbbSizeGuideModal'; let modalContainer = document.createElement('div'); modalContainer.className = 'gbbSizeGuideModalContainer'; let modalHeader = document.createElement('div'); modalHeader.className = 'gbbSizeGuideModalHeader'; let title = document.createElement('h2'); title.className = 'gbbSizeGuideTitle'; title.textContent = reference.title; let closeBtn = document.createElement('button'); closeBtn.className = 'gbbSizeGuideClose'; closeBtn.textContent = '✕'; let modalContent = document.createElement('div'); modalContent.className = 'gbbSizeGuideContent'; modalContent.innerHTML = reference.body; modalHeader.appendChild(title); modalHeader.appendChild(closeBtn); modalContainer.appendChild(modalHeader); modalContainer.appendChild(modalContent); modalOverlay.appendChild(modalContainer); document.body.appendChild(modalOverlay); // close handlers closeBtn.addEventListener('click', function () { modalOverlay.remove(); }); modalOverlay.addEventListener('click', function (e) { if (e.target === modalOverlay) { modalOverlay.remove(); } }); }); metafieldContainer.appendChild(sizeGuideBtn); // IMPORTANT: existing wrapper is jQuery → use appendChild on DOM node if (metafieldWrapper?.[0]) { metafieldWrapper[0].appendChild(metafieldContainer); } } else { metafieldValue.text(productMetafieldData?.value); } metafieldContainer.append(metafieldLabel); metafieldContainer.append(metafieldValue); metafieldWrapper.append(metafieldContainer); } } if (origin === 'PRODUCT_VARIANTS_MODAL') { let sku = (selectedVariant && selectedVariant.sku) || (productData && productData.variants && productData.variants[0] && productData.variants[0].sku) || ''; if (sku) { let skuContainer = gbb.$('

').addClass('gbbProductSkuContainer'); let skuLabel = gbb.$('').addClass('gbbProductSkuLabel').text('SKU: '); let skuValue = gbb.$('').addClass('gbbProductSkuValue').text(sku); skuContainer.append(skuLabel).append(skuValue); metafieldWrapper.append(skuContainer); } } return metafieldWrapper; } catch (error) { gbb.utility.debugError('error in prepareHTMLforProductMetafields', error); } }

Oops! Your cart is empty!

Pick Your Free Gift – (0 of 1 Selected)

Select here

Select and add to cart any 0 item(s)