' + (node.children || []).map(renderShopifyRichText).join('') + '

'; } if (node.type === 'list') { var tag = node.listType === 'ordered' ? 'ol' : 'ul'; return ( '<' + tag + '>' + (node.children || []).map(renderShopifyRichText).join('') + '' ); } if (node.type === 'list-item') { return '

' + (node.children || []).map(renderShopifyRichText).join('') + '

'; } if (node.type === 'link') { var url = node.url || '#'; return ( '' + (node.children || []).map(renderShopifyRichText).join('') + '' ); } return node.children ? node.children.map(renderShopifyRichText).join('') : ''; } // ================= NEWER BUNDLE ================= function injectStyles() { if (document.getElementById('gbbMixCompatStyles')) return; var style = document.createElement('style'); style.id = 'gbbMixCompatStyles'; style.textContent = [ '.gbbMixCompatibilityTrigger{background:none;border:0;padding:0;margin:2px 0 0;', 'font:inherit;font-size:13px;line-height:1.3;color:inherit;text-decoration:underline;', 'text-underline-offset:2px;cursor:pointer;}', '.gbbMixCompatibilityTrigger:hover{opacity:.7;}', '.gbbMixCompatibilityPopup{position:fixed;inset:0;z-index:2147483000;display:none;', 'align-items:center;justify-content:center;background:rgba(0,0,0,.5);padding:16px;}', '.gbbMixCompatibilityPopup.isOpen{display:flex;}', '.gbbMixCompatibilityBox{position:relative;background:#fff;color:#1e1e1e;border-radius:10px;', 'max-width:420px;width:100%;max-height:80vh;overflow:auto;padding:24px 20px 20px;', 'box-shadow:0 10px 40px rgba(0,0,0,.25);text-align:left;}', '.gbbMixCompatibilityBox h1,.gbbMixCompatibilityBox h2,.gbbMixCompatibilityBox h3,', '.gbbMixCompatibilityBox h4{margin:0 0 10px;font-size:16px;line-height:1.3;}', '.gbbMixCompatibilityBox ul,.gbbMixCompatibilityBox ol{margin:0;padding-left:20px;}', '.gbbMixCompatibilityBox li{margin:0 0 6px;font-size:14px;line-height:1.45;}', '.gbbMixCompatibilityBox p{margin:0 0 10px;font-size:14px;line-height:1.45;}', '.gbbMixCompatibilityClose{position:absolute;top:8px;right:10px;background:none;border:0;', 'font-size:26px;line-height:1;cursor:pointer;color:#1e1e1e;padding:0 4px;}' ].join(''); document.head.appendChild(style); } function bindEvents() { if (window.__gbbMixCompatBound) return; window.__gbbMixCompatBound = true; document.addEventListener('click', function (e) { var trigger = e.target.closest && e.target.closest('.gbbMixCompatibilityTrigger'); if (trigger) { e.preventDefault(); e.stopPropagation(); var id = trigger.getAttribute('data-popup-id'); var popup = document.querySelector( '.gbbMixCompatibilityPopup[data-popup-id="' + id + '"]' ); if (!popup) { var parent = trigger.parentElement; popup = parent && parent.querySelector('.gbbMixCompatibilityPopup'); } if (!popup) return; if (popup.parentElement !== document.body) document.body.appendChild(popup); popup.classList.add('isOpen'); return; } var closer = e.target.closest && e.target.closest('.gbbMixCompatibilityClose'); var overlay = e.target.classList ? e.target.classList.contains('gbbMixCompatibilityPopup') : false; if (closer || overlay) { e.preventDefault(); e.stopPropagation(); var p = closer ? closer.closest('.gbbMixCompatibilityPopup') : e.target; if (p) p.classList.remove('isOpen'); } }, true); document.addEventListener('keydown', function (e) { if (e.key !== 'Escape') return; var open = document.querySelectorAll('.gbbMixCompatibilityPopup.isOpen'); for (var i = 0; i < open.length; i++) open[i].classList.remove('isOpen'); }); } function runNewBundle(prod, variant, ctxRaw) { try { var ctx = null; if (ctxRaw === 'PRODUCT_CARD' || ctxRaw === 'PRODUCT_VARIANTS_MODAL') ctx = ctxRaw; var sdkSettings = (typeof gbbSdk !== 'undefined' && gbbSdk && gbbSdk.settings) || (typeof gbb !== 'undefined' && gbb && gbb.sdk && gbb.sdk.settings) || (typeof gbb !== 'undefined' && gbb && gbb.settings) || {}; var metafieldConfigs = (sdkSettings.app && sdkSettings.app.metafieldNameSpaceAndKeys) || []; if (!metafieldConfigs.length) { metafieldConfigs = [{ namespace: 'custom', key: 'compatibility_rich', origin: 'variant', type: 'rich_text_field' }]; } injectStyles(); bindEvents(); var validTypes = [ 'single_line_text_field', 'multi_line_text_field', 'rich_text_field' ]; var wrapper = document.createElement('div'); wrapper.className = 'metafieldWrapper'; var hasContent = false; for (var i = 0; i < metafieldConfigs.length; i++) { var metafield = metafieldConfigs[i]; var isFilteredByOrigin = metafield.hasOwnProperty('showOnProductCard') || metafield.hasOwnProperty('showOnModal'); if (isFilteredByOrigin && ctx) { if (ctx === 'PRODUCT_CARD' && !metafield.showOnProductCard) continue; if (ctx === 'PRODUCT_VARIANTS_MODAL' && !metafield.showOnModal) continue; } var accessKey = 'metafield_' + (metafield.namespace || '') + '_' + (metafield.key || ''); var raw = (variant && variant[accessKey]) || (prod && prod[accessKey]) || null; if (!raw) continue; var data = typeof raw === 'string' ? { type: metafield.type || 'single_line_text_field', value: raw } : raw; var resolvedType = data.type || metafield.type; if (validTypes.indexOf(resolvedType) === -1) continue; if (!data.value) continue; var prefix = metafield.origin === 'variant' ? 'variant_metafield_' : 'product_metafield_'; var itemContainer = document.createElement('div'); itemContainer.className = 'metafieldContainer ' + prefix + (metafield.key || ''); if (metafield.label) { var labelEl = document.createElement('div'); labelEl.className = 'metafieldLabel'; labelEl.textContent = metafield.label; itemContainer.appendChild(labelEl); } var valueEl = document.createElement('div'); valueEl.className = 'productMetafieldValue'; valueEl.setAttribute('metafield-key', metafield.key || ''); if (metafield.key === 'compatibility_rich') { var popupId = (variant && (variant.id || variant.variantId)) || (prod && prod.id) || Math.random().toString(36).slice(2); var html = ''; try { html = renderShopifyRichText(JSON.parse(data.value)); } catch (e) { html = data.value; } var triggerBtn = document.createElement('button'); triggerBtn.type = 'button'; triggerBtn.className = 'gbbMixCompatibilityTrigger'; triggerBtn.setAttribute('data-popup-id', String(popupId)); triggerBtn.textContent = 'Kompatibilität'; var popup = document.createElement('div'); popup.className = 'gbbMixCompatibilityPopup'; popup.setAttribute('data-popup-id', String(popupId)); popup.innerHTML = '

' + '' + '

' + html + '

' + '

'; itemContainer.appendChild(triggerBtn); itemContainer.appendChild(popup); valueEl.style.display = 'none'; itemContainer.appendChild(valueEl); } else { valueEl.innerHTML = data.value; itemContainer.appendChild(valueEl); } wrapper.appendChild(itemContainer); hasContent = true; } if (!hasContent) return null; var productId = prod && (prod.id || prod.product_id); if (productId) { setTimeout(function () { var cards = document.querySelectorAll( '.gbbMixProductCard[data-product-id="' + productId + '"]' ); for (var c = 0; c < cards.length; c++) { var slot = cards[c].querySelector('.gbbMixProductCardMetafields'); if (slot && !slot.querySelector('.metafieldWrapper')) { slot.appendChild(wrapper.cloneNode(true)); } } }, 400); } return wrapper; } catch (error) { return null; } } // ================= OLDER BUNDLE ================= function runOldBundle(productData, selectedVariant) { try { var metafieldNameSpaceAndKeys = gbbMix.settings.pageCustomizationSettings.mixAndMatchBundleSettings .metafieldNameSpaceAndKeys || []; if (!metafieldNameSpaceAndKeys.length) return ''; var metafieldWrapper = gbbMix.utility.createHTMLElement('div', { class: 'metafieldWrapper' }); var validMetafieldTypes = [ 'single_line_text_field', 'multi_line_text_field', 'rich_text_field' ]; for (var i = 0; i < metafieldNameSpaceAndKeys.length; i++) { var metafieldData = metafieldNameSpaceAndKeys[i]; var productMetafieldAccessKey = 'metafield_' + metafieldData.namespace + '_' + metafieldData.key; var productMetafieldData = {}; if (metafieldData.origin == 'variant' && selectedVariant) { productMetafieldData = selectedVariant[productMetafieldAccessKey] || {}; } else { productMetafieldData = (productData && productData[productMetafieldAccessKey]) || {}; } if (validMetafieldTypes.indexOf(productMetafieldData.type) === -1) continue; var metafieldContainer = gbbMix.utility.createHTMLElement('div', { class: 'metafieldContainer' }); if (metafieldData.origin == 'variant') { metafieldContainer.classList.add('variant_metafield_' + metafieldData.key); } else { metafieldContainer.classList.add('product_metafield_' + metafieldData.key); } var metafieldLabel = gbbMix.utility.createHTMLElement('div', { class: 'metafieldLabel' }); metafieldLabel.textContent = metafieldData.label; var metafieldValue = gbbMix.utility.createHTMLElement('div', { class: 'productMetafieldValue' }); metafieldValue.setAttribute('metafield-key', metafieldData.key); var usePopupTrigger = (metafieldData.key === 'compatibility_rich' || metafieldData.showAsPopupTrigger) && productMetafieldData.value; if (usePopupTrigger) { var triggerText = metafieldData.key === 'compatibility_rich' ? 'Kompatibilität' : metafieldData.popupTriggerText || metafieldData.label || 'Info'; var triggerBtn = gbbMix.utility.createHTMLElement('button', { type: 'button', class: 'gbbMixCompatibilityTrigger' }); triggerBtn.textContent = triggerText; var dialogEl = gbbMix.utility.createHTMLElement('dialog', { class: 'gbbMixCompatibilityDialog' }); var contentEl = gbbMix.utility.createHTMLElement('div', { class: 'gbbMixCompatibilityDialogContent' }); if (productMetafieldData.type === 'rich_text_field') { try { contentEl.innerHTML = renderShopifyRichText( JSON.parse(productMetafieldData.value) ); } catch (e) { contentEl.innerHTML = productMetafieldData.value; } } else { contentEl.innerHTML = productMetafieldData.value; } var closeBtn = gbbMix.utility.createHTMLElement('button', { type: 'button', class: 'gbbMixCompatibilityDialogClose' }); closeBtn.textContent = '×'; closeBtn.setAttribute('aria-label', 'Schließen'); dialogEl.appendChild(contentEl); dialogEl.appendChild(closeBtn); triggerBtn.addEventListener('click', function (dlg) { return function () { if (typeof dlg.showModal === 'function') dlg.showModal(); else dlg.setAttribute('open', ''); }; }(dialogEl)); closeBtn.addEventListener('click', function (dlg) { return function () { if (typeof dlg.close === 'function') dlg.close(); else dlg.removeAttribute('open'); }; }(dialogEl)); metafieldContainer.appendChild(metafieldLabel); metafieldContainer.appendChild(triggerBtn); metafieldContainer.appendChild(dialogEl); metafieldValue.style.display = 'none'; metafieldContainer.appendChild(metafieldValue); } else { metafieldValue.innerHTML = productMetafieldData.value; metafieldContainer.appendChild(metafieldLabel); metafieldContainer.appendChild(metafieldValue); } metafieldWrapper.appendChild(metafieldContainer); } return metafieldWrapper; } catch (error) { return null; } } // ---------- run only the matching one ---------- var prod = typeof productData !== 'undefined' && productData ? productData : null; var variant = typeof selectedVariant !== 'undefined' && selectedVariant ? selectedVariant : null; var ctxRaw = typeof origin !== 'undefined' ? origin : null; if (hasNew) return runNewBundle(prod, variant, ctxRaw); if (hasOld) return runOldBundle(prod, variant); return null; })();

Durchsuche unsere Seite

Filtern

Sortieren

Dein Einkaufswagen -