function renderDynamicContentOnModal(productData, origin, selectedVariant) { const richJSONDataToHtml = (node) => { try { if (!node) { return ''; } let html = ''; if (node?.children?.length > 0) { if (node.type === 'paragraph') { html += `

`; (node.children ?? []).forEach(childNode => { html += richJSONDataToHtml(childNode); }); html += `

`; } else if (node.type === 'text') { (node.children ?? []).forEach(childNode => { html += richJSONDataToHtml(childNode); }); } else { html += `

`; (node.children ?? []).forEach(childNode => { html += richJSONDataToHtml(childNode); }); html += `

`; } } else if (node.value) { let nodeElement = node.value?.replaceAll(/\n/g, '
'); if (node.bold) { nodeElement = `${nodeElement}`; } if (node.type === 'paragraph') { nodeElement = `

${nodeElement}

`; } else if (node.type === 'text') { nodeElement = `${nodeElement}`; } else { nodeElement = `

${nodeElement}

`; } html += nodeElement; } return html; } catch (err) { console.log("richJSONDataToHtml failed", err); return ''; } } try { const metafieldNameSpaceAndKeys = gbb.settings.bundleSettings.metafieldNameSpaceAndKeys || []; if (!metafieldNameSpaceAndKeys.length) return ''; let metafieldWrapper = gbb.$("

").addClass('productsMetafieldWrapper'); const validMetafieldTypes = ["single_line_text_field", "multi_line_text_field", "rich_text_field"]; 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}`); } // Handle rich text fields with proper HTML rendering if (productMetafieldData?.type === 'rich_text_field') { try { let richTextData = typeof productMetafieldData.value === 'string' ? JSON.parse(productMetafieldData.value) : productMetafieldData.value; let htmlContent = ''; if (richTextData?.children) { richTextData.children.forEach(child => { htmlContent += richJSONDataToHtml(child); }); } metafieldValue.html(htmlContent); } catch (e) { console.log("Failed to parse rich text:", e); metafieldValue.text(productMetafieldData?.value); } } else { metafieldValue.text(productMetafieldData?.value); } metafieldContainer.append(metafieldLabel); metafieldContainer.append(metafieldValue); metafieldWrapper.append(metafieldContainer); } } return metafieldWrapper; } catch (error) { gbb.utility.debugError("error in prepareHTMLforProductMetafields", error); } } renderDynamicContentOnModal(productData, origin, selectedVariant)

Media Application Form

Next Steps

Explore Electimuss Collections

Eternal

Explorer

Nero

Consort

Lustrous

Emperor

join us and receive 10% off your first full bottle

sign up to our mailing list

Your Cart