renderDynamicInfo(productData, origin, selectedVariant) function renderDynamicInfo(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"]; // Define specific metafields for accordion treatment on modal const accordionMetafields = ['ingredient', 'allergy_information']; const accordionTitles = { 'ingredient': 'Ingredient', 'allergy_information': 'Allergy Information' }; 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 productMetafield = {}; // Variant level metafield if (metafieldData.origin == "variant" && selectedVariant) { productMetafield = selectedVariant?.[productMetafieldAccessKey] || {} } else { // product level metafield productMetafield = productData?.[productMetafieldAccessKey] || {} } if (validMetafieldTypes.includes(productMetafield?.type)) { const isAccordionMetafield = origin === 'PRODUCT_VARIANTS_MODAL' && metafieldData?.namespace === 'custom' && accordionMetafields.includes(metafieldData?.key); if (isAccordionMetafield) { let accordionContainer = gbb.$('

').addClass(`metafield-accordion accordion-${metafieldData?.key}`); let accordionHeader = gbb.$('

') .addClass('metafield-accordion-header') .attr('data-accordion-key', metafieldData?.key) .text(accordionTitles[metafieldData?.key]); let accordionContent = gbb.$('

') .addClass('metafield-accordion-content') .attr('data-accordion-key', metafieldData?.key); if (productMetafield?.type === 'rich_text_field') { try { let richTextData = typeof productMetafield.value === 'string' ? JSON.parse(productMetafield.value) : productMetafield.value; let htmlContent = ''; if (richTextData?.children) { richTextData.children.forEach(child => { htmlContent += richJSONDataToHtml(child); }); } accordionContent.html(htmlContent); } catch (e) { console.log("Failed to parse rich text:", e); accordionContent.text(productMetafield?.value); } } else { accordionContent.text(productMetafield?.value); } accordionContainer.append(accordionHeader); accordionContainer.append(accordionContent); metafieldWrapper.append(accordionContainer); } else { 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}`); } metafieldValue.text(productMetafield?.value); metafieldContainer.append(metafieldLabel); metafieldContainer.append(metafieldValue); metafieldWrapper.append(metafieldContainer); } } } const addAccordionFunctionality = () => { setTimeout(() => { const accordionHeaders = document.querySelectorAll('.metafield-accordion-header'); accordionHeaders.forEach(header => { header.replaceWith(header.cloneNode(true)); }); const newAccordionHeaders = document.querySelectorAll('.metafield-accordion-header'); newAccordionHeaders.forEach(header => { header.addEventListener('click', function () { const accordionKey = this.getAttribute('data-accordion-key'); const content = document.querySelector(`.metafield-accordion-content[data-accordion-key="${accordionKey}"]`); if (content) { const isOpen = this.getAttribute('aria-expanded') === 'true'; this.setAttribute('aria-expanded', !isOpen); content.classList.toggle('open', !isOpen); } }); if (!header.getAttribute('aria-expanded')) { header.setAttribute('aria-expanded', 'false'); } }); }, 100); }; addAccordionFunctionality(); return metafieldWrapper; } catch (error) { gbb.utility.debugError("error in renderDynamicInfo", error); } }

Collection: The Devil Wears Prada