// Characteristics configuration for boolean metafields const CHARACTERISTIC_CONFIG = { iconSize: 40, iconBgColor: '#D61658', iconStrokeColor: 'white', iconPadding: 8, characteristics: { dairy_free: { icon: 'dairy_free', label: 'Dairy-Free' }, gluten_free: { icon: 'gluten_free', label: 'Gluten-Free' }, halal: { icon: 'halal', label: 'Halal' }, no_artificial_colours: { icon: 'no_artificial_colors', label: 'No Artificial Colours', }, no_artificial_flavours: { icon: 'no_additives', label: 'No Artificial Flavours', }, vegan: { icon: 'vegan', label: 'Vegan' }, vegetarian: { icon: 'leaf', label: 'Vegetarian' }, }, }; const SVG_ICONS = { dairy_free: '', gluten_free: '', halal: '', no_artificial_colors: '', no_additives: '', vegan: '', leaf: '', }; // Helper function to check if a metafield key is a characteristic function isCharacteristic(key) { return CHARACTERISTIC_CONFIG.characteristics.hasOwnProperty(key); } // Helper function to create SVG icon HTML function createCharacteristicIcon(iconName) { const svgPath = SVG_ICONS[iconName]; if (!svgPath) return ''; return ` `; } // Helper function to render a single characteristic item (li element) function renderCharacteristicItem(key) { const char = CHARACTERISTIC_CONFIG.characteristics[key]; if (!char) return ''; return `

${createCharacteristicIcon(char.icon)}

${char.label}

`; } // Helper function to wrap all characteristics in a horizontal container function renderCharacteristicsContainer(characteristicItems) { if (!characteristicItems.length) return ''; return `

${characteristicItems.join('')}

`; } dynamicScriptForProductMetafields(productData, origin, selectedVariant) function dynamicScriptForProductMetafields( 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', 'boolean', ]; //only allow the type whose value we can get root level -- for eg : metafield.value // Array to collect boolean characteristics let characteristicItems = []; 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)) { // Handle boolean metafields for characteristics separately if ( productMetafieldData?.type === 'boolean' && isCharacteristic(metafieldData?.key) ) { if ( productMetafieldData?.value === true || productMetafieldData?.value === 'true' ) { characteristicItems.push( renderCharacteristicItem(metafieldData?.key) ); } } else { // Handle regular text metafields 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(productMetafieldData?.value); metafieldContainer.append(metafieldLabel); metafieldContainer.append(metafieldValue); metafieldWrapper.append(metafieldContainer); } } } // Add all characteristics in a single horizontal container at the end if (characteristicItems.length > 0) { const characteristicsHTML = renderCharacteristicsContainer(characteristicItems); metafieldWrapper.append(gbb.$(characteristicsHTML)); } return metafieldWrapper; } catch (error) { gbb.utility.debugError('error in prepareHTMLforProductMetafields', error); } }

Main menu

you're on the nice list.