gbb.utility.formatPrice = function (price) { if (window && window.Shopify && window.Shopify.currency && window.Shopify.currency.active) { let currencySymbol = gbb.utility.getCurrencySymbol(); let value = (price / 100).toFixed(2).replace(".", ","); return value + " " + currencySymbol; } else { return (price / 100).toFixed(2).replace(".", ",") + " " + gbb.state.storeCurrencySymbol; } }; function translateRibbon(el) { if (!el) return; const txt = el.textContent.trim(); // Free → Gratis if (/^free$/i.test(txt)) { el.textContent = "Gratis"; return; } // 50% Off → 50% Rabatt const match = txt.match(/^(\d+)\s*%\s*off$/i); if (match) { el.textContent = match[1] + "% Rabatt"; } } // Initialer Durchlauf – alles übersetzen, was schon im DOM ist function translateAll() { document.querySelectorAll(".gbbDiscountRibbonContent") .forEach(translateRibbon); } translateAll(); // MutationObserver – übersetzt alles, was später dynamisch nachgeladen wird const ribbonObserver = new MutationObserver((mutations) => { mutations.forEach(m => { m.addedNodes.forEach(node => { if (!(node instanceof HTMLElement)) return; // Direktes Ribbon? if (node.classList?.contains("gbbDiscountRibbonContent")) { translateRibbon(node); } // Oder Ribbon innerhalb von neuem HTML? node.querySelectorAll?.(".gbbDiscountRibbonContent") .forEach(translateRibbon); }); }); }); ribbonObserver.observe(document.body, { childList: true, subtree: true }); // --- Custom Variant Picker & PLP-Look --- function closeAllVariantMenus(except) { document.querySelectorAll('.gbbVariantOptionsContainer.visible').forEach(el => { if (el !== except) el.classList.remove('visible'); }); } // Position/Höhe des Slots live neu berechnen (unabhängig vom offsetParent), // wird beim ÖFFNEN aufgerufen statt einmalig beim Erstellen function positionPickerSlot(productItem) { const slot = productItem.querySelector('.kruut-variant-picker-slot'); const imageContainer = productItem.querySelector('.gbbProductImageContainer'); if (!slot || !imageContainer) return; const productRect = productItem.getBoundingClientRect(); const imgRect = imageContainer.getBoundingClientRect(); slot.style.top = (imgRect.top - productRect.top) + 'px'; slot.style.height = imgRect.height + 'px'; } // Eigener permanenter "+"-Button (ersetzt GBB-Button & Mengen-Stepper komplett). // Enthält Plus- UND Häkchen-Icon übereinander für das Erfolgs-Feedback. function createKruutAtcButton(productItem) { if (productItem.querySelector('.kruut-atc-button')) return; const btn = document.createElement('div'); btn.className = 'kruut-atc-button'; btn.innerHTML = `

Add to Cart

`; productItem.appendChild(btn); } // Bleibt für andere Set-Builder erhalten (hier nicht mehr aufgerufen) function liftAtcButton(productItem) { const wrapper = productItem.querySelector('.gbbProductActionContainer .gbbProductButtonWrapper'); if (!wrapper) return; productItem.appendChild(wrapper); } // Bleibt für andere Set-Builder erhalten (hier nicht mehr aufgerufen) function addAtcLabel(productItem) { const btn = productItem.querySelector('.gbbProductAddButton'); if (!btn || btn.querySelector('.kruut-atc-label')) return; const label = document.createElement('div'); label.className = 'kruut-atc-label'; label.textContent = 'Add to Cart'; btn.appendChild(label); } // Aktuellen Warenkorb-Zähler lesen: primär aus GBBs internem State // (layout-unabhängig, funktioniert auch auf Mobile, wo das Zähler-Element // .gbbFooterTotalItemsInCart nicht im DOM existiert), DOM nur als Fallback function kruutGetCartCount() { try { const d = window.gbb?.state?.giftBoxCartData; if (d && typeof d.item_count === 'number') return d.item_count; } catch (e) {} const el = document.querySelector('.gbbFooterTotalItemsInCart'); if (el) { const m = el.textContent.match(/\d+/); if (m) return parseInt(m[0], 10); } return null; } // Erfolgs-Feedback am "+"-Button: invertiert kurz zu Schwarz mit weißem Häkchen, // wechselt nach ~1.2s weich zurück zum Plus function kruutShowAddedFeedback(productId) { const btn = document.querySelector('.gbbProductItem[productid="' + productId + '"] .kruut-atc-button'); if (!btn) return; btn.classList.add('kruut-atc-success'); setTimeout(() => { const freshBtn = document.querySelector('.gbbProductItem[productid="' + productId + '"] .kruut-atc-button'); if (freshBtn) freshBtn.classList.remove('kruut-atc-success'); }, 1200); } // Überwacht den Warenkorb-Zähler nach einer Add-Aktion: // steigt er, gab es einen echten Add -> Erfolgs-Feedback anzeigen. // Läuft der Timeout ab, wird (falls vorhanden) onTimeout aufgerufen. function kruutWatchCartAndConfirm(productId, countBefore, onTimeout) { let tries = 0; const iv = setInterval(() => { tries++; const countNow = kruutGetCartCount(); if (countBefore !== null && countNow !== null && countNow > countBefore) { clearInterval(iv); kruutShowAddedFeedback(productId); return; } if (tries >= 30) { // ~3s clearInterval(iv); if (onTimeout) onTimeout(); } }, 100); } // Sicherheitsnetz: hängengebliebenen Drawer schließen und Scroll-Sperre lösen function kruutCleanupDrawer() { document.querySelectorAll('.gbbDrawer.gbbVariantSelector').forEach(d => { d.classList.remove('kruut-suppressed'); if (d.getAttribute('data-drawer-status') === 'opened') { d.setAttribute('data-drawer-status', 'closed'); } }); if (getComputedStyle(document.body).overflowY === 'hidden') { document.body.style.overflowY = 'visible'; } } // Mobile-Add (<600px): GBBs Selektions-Handler arbeitet hier mit den Optionen im // DRAWER (nicht im Dropdown-Wrapper). Deshalb: Drawer für das Produkt befüllen // (setupVariantDrawer), per Klasse unsichtbar halten, Status auf "opened" vorsetzen // (damit GBBs Schließ-Toggle danach korrekt auf "closed" landet statt den Drawer zu // öffnen), Auto-Add-Attribut setzen und den Handler mit der Drawer-Option aufrufen. function kruutAddVariantMobile(productId, variantId, countBefore) { let productData; try { productData = gbb.utility.getProductDetailsFromState(productId); gbb.gbbAddProductsPage.f.setupVariantDrawer(productData); } catch (e) { return; } // warten bis die Drawer-Option für die Ziel-Variante gerendert ist let tries = 0; const wait = setInterval(() => { tries++; const drawer = document.querySelector('.gbbDrawer.gbbVariantSelector'); const opt = drawer ? drawer.querySelector('.gbbVariantOptionDrawer[data-variant-id="' + variantId + '"]') : null; if (opt) { clearInterval(wait); drawer.classList.add('kruut-suppressed'); drawer.setAttribute('data-drawer-status', 'opened'); drawer.setAttribute('auto-add-selected-variant', 'true'); try { gbb.gbbAddProductsPage.f.handleVariantSelectionForDrawerAndDropdown.call(opt); } catch (e) { kruutCleanupDrawer(); return; } // Erfolg verifizieren + Feedback; danach Drawer-Sichtbarkeit wieder freigeben kruutWatchCartAndConfirm(productId, countBefore, () => { // Timeout-Fallback: Variante evtl. schon im Korb -> Stepper-Plus klicken const currentItem = document.querySelector('.gbbProductItem[productid="' + productId + '"]'); const marker = currentItem?.querySelector('.gbbSelectedVariant')?.getAttribute('data-variant-id') || ''; const plus = currentItem?.querySelector('.gbbProductQuantityAddButton'); if (marker === variantId && plus) { const countBeforeRetry = kruutGetCartCount(); plus.click(); kruutWatchCartAndConfirm(productId, countBeforeRetry, null); } }); setTimeout(kruutCleanupDrawer, 4000); } else if (tries >= 20) { // ~2s clearInterval(wait); kruutCleanupDrawer(); } }, 100); } // Desktop-Add (>=600px): GBBs Auto-Add über das Attribut am Dropdown-Wrapper. // GBB selektiert, baut die Karte neu und klickt danach selbst den frischen Add-Button. function kruutAddVariantDesktop(productId, variantId, countBefore) { const getItem = () => document.querySelector('.gbbProductItem[productid="' + productId + '"]'); const item = getItem(); if (!item) return; const opt = item.querySelector('.gbbVariantOption[data-variant-id="' + variantId + '"]'); if (!opt) return; const wrapper = item.querySelector('.gbbVariantDropdownWrapper'); if (wrapper) wrapper.setAttribute('auto-add-selected-variant', 'true'); try { gbb.gbbAddProductsPage.f.handleVariantSelectionForDrawerAndDropdown.call(opt); } catch (e) { return; } // Verifizieren + Erfolgs-Feedback; bei Timeout Stepper-Fallback versuchen kruutWatchCartAndConfirm(productId, countBefore, () => { const currentItem = getItem(); const marker = currentItem?.querySelector('.gbbSelectedVariant')?.getAttribute('data-variant-id') || ''; const plus = currentItem?.querySelector('.gbbProductQuantityAddButton'); if (marker === variantId && plus) { const countBeforeRetry = kruutGetCartCount(); plus.click(); kruutWatchCartAndConfirm(productId, countBeforeRetry, null); } }); } // Einstiegspunkt: Sonderfall "schon selektiert + im Korb" (Stepper direkt klicken), // sonst je nach Viewport Desktop- oder Mobile-Flow function kruutAddVariant(productId, variantId) { const item = document.querySelector('.gbbProductItem[productid="' + productId + '"]'); if (!item) return; const currentMarker = item.querySelector('.gbbSelectedVariant')?.getAttribute('data-variant-id') || ''; const stepperPlus = item.querySelector('.gbbProductQuantityAddButton'); if (currentMarker === variantId && stepperPlus) { const countBefore = kruutGetCartCount(); stepperPlus.click(); kruutWatchCartAndConfirm(productId, countBefore, null); return; } const countBefore = kruutGetCartCount(); if (window.innerWidth < 600) { kruutAddVariantMobile(productId, variantId, countBefore); } else { kruutAddVariantDesktop(productId, variantId, countBefore); } } function buildCustomVariantPicker(productItem) { createKruutAtcButton(productItem); const wrapper = productItem.querySelector('.gbbVariantDropdownWrapper'); if (!wrapper) return; // Produkte ohne Varianten: kein Picker, Klick wird durchgereicht const imageContainer = productItem.querySelector('.gbbProductImageContainer'); if (!imageContainer) return; const nativeOptions = wrapper.querySelectorAll('.gbbVariantOption'); if (!nativeOptions.length || productItem.querySelector('.kruut-variant-picker-slot')) return; const productId = productItem.getAttribute('productid'); const slot = document.createElement('div'); slot.className = 'kruut-variant-picker-slot'; const picker = document.createElement('ul'); picker.className = 'kruut-variant-picker'; nativeOptions.forEach(nativeOpt => { const label = nativeOpt.querySelector('.gbbVariantLabel')?.textContent.trim() || ''; const variantId = nativeOpt.getAttribute('data-variant-id'); const variantData = variantId ? window.gbb?.state?.currentProductsDataSetForVariants?.[variantId] : null; const priceText = variantData ? gbb.utility.formatPrice(variantData.price) : ''; const subtitle = variantData?.metafield_custom_subtitle || ''; const li = document.createElement('li'); li.className = 'kruut-variant-option'; li.innerHTML = ` ${label} ${subtitle ? `${subtitle}` : ''} ${priceText} `; li.addEventListener('click', () => { kruutAddVariant(productId, variantId); closePicker(productItem); }); picker.appendChild(li); }); slot.appendChild(picker); productItem.appendChild(slot); } function openPicker(productItem) { const picker = productItem.querySelector('.kruut-variant-picker'); if (!picker) return; positionPickerSlot(productItem); // Position live neu berechnen, erst jetzt picker.classList.add('visible'); } function closePicker(productItem) { const picker = productItem.querySelector('.kruut-variant-picker'); if (picker) picker.classList.remove('visible'); } function closeAllCustomPickers(exceptProductItem) { document.querySelectorAll('.kruut-variant-picker.visible').forEach(p => { const item = p.closest('.gbbProductItem'); if (item !== exceptProductItem) closePicker(item); }); } // Klick an GBBs versteckte native Controls durchreichen // (für Produkte ohne Varianten-Picker; berücksichtigt auch den Quantity-Stepper) function forwardToNativeAdd(productItem) { const control = productItem.querySelector('.gbbProductAddButton') || productItem.querySelector('.gbbProductQuantityAddButton'); if (control) { const productId = productItem.getAttribute('productid'); const countBefore = kruutGetCartCount(); control.click(); kruutWatchCartAndConfirm(productId, countBefore, null); return true; } return false; } // Initialer Durchlauf – alle aktuell im DOM vorhandenen Produktkarten document.querySelectorAll('.gbbProductItem').forEach(buildCustomVariantPicker); // MutationObserver – baut Picker & Button auch für später nachgeladene Produktkarten // (z. B. bei Tab-Wechsel Oxymel/Shots, Pagination oder GBB-Karten-Rebuilds) const variantPickerObserver = new MutationObserver((mutations) => { mutations.forEach(m => { m.addedNodes.forEach(node => { if (!(node instanceof HTMLElement)) return; if (node.classList?.contains('gbbProductItem')) { buildCustomVariantPicker(node); } node.querySelectorAll?.('.gbbProductItem').forEach(buildCustomVariantPicker); }); }); }); variantPickerObserver.observe(document.body, { childList: true, subtree: true }); // Klick-Handler: unser "+"-Button öffnet den Picker (bzw. reicht bei Produkten // ohne Varianten direkt an GBB durch); Klick außerhalb schließt alle Picker document.addEventListener('click', function (e) { const trigger = e.target.closest('.kruut-atc-button'); if (trigger) { const productItem = trigger.closest('.gbbProductItem'); const picker = productItem?.querySelector('.kruut-variant-picker'); if (picker) { const willOpen = !picker.classList.contains('visible'); closeAllCustomPickers(willOpen ? productItem : null); if (willOpen) { openPicker(productItem); } else { closePicker(productItem); } } else if (productItem) { forwardToNativeAdd(productItem); } e.stopPropagation(); return; } closeAllCustomPickers(null); }); // --- Quick-View-Modal: Subtitle nach dem ersten Punkt abschneiden --- // (bleibt auch nach einem Varianten-Wechsel innerhalb des offenen Modals kurz) function kruutTruncateFirstSentence(text) { const idx = text.indexOf('.'); return idx !== -1 ? text.slice(0, idx + 1) : text; } function kruutTruncateModalSubtitle(sub) { if (!sub || !sub.closest('.gbbProductVariantModalMainContainer.gbbProductQuickView')) return; const current = sub.textContent.trim(); const truncated = kruutTruncateFirstSentence(current); if (truncated !== current) { sub.textContent = truncated; // No-op-Check verhindert unnötige Selbst-Trigger des Observers } } // Beobachtet nicht nur das Öffnen des Modals, sondern auch jedes spätere // Neu-Rendern des Subtitle-Elements selbst (z.B. bei einem Varianten-Wechsel // innerhalb des schon offenen Modals) - sowohl falls GBB den Knoten komplett // ersetzt (childList) als auch falls nur der Text direkt geändert wird (characterData). const quickViewModalObserver = new MutationObserver((mutations) => { mutations.forEach((m) => { if (m.type === 'characterData') { const parent = m.target.parentElement; if (parent && parent.classList.contains('product_metafield_subtitle')) { kruutTruncateModalSubtitle(parent); } return; } m.addedNodes.forEach((node) => { if (!(node instanceof HTMLElement)) return; if (node.classList?.contains('product_metafield_subtitle')) { kruutTruncateModalSubtitle(node); } node.querySelectorAll?.('.product_metafield_subtitle').forEach(kruutTruncateModalSubtitle); }); }); }); quickViewModalObserver.observe(document.body, { childList: true, subtree: true, characterData: true }); // Falls das Modal beim Laden schon im DOM steht document.querySelectorAll('.gbbProductVariantModalMainContainer.gbbProductQuickView .product_metafield_subtitle').forEach(kruutTruncateModalSubtitle); // --- Quick-View-Modal: Beschreibung an der richtigen Stelle halten --- // GBB verschiebt .gbbProductDescriptionContainer unterhalb von ca. 600px Breite // aktiv aus dem Grid heraus (wird zum direkten Geschwister-Element nach dem // ganzen Bild+Details-Block) - dadurch landet der Beschreibungstext hinter den // Buttons statt zwischen Subtitle und Buttons. Per CSS nicht lösbar, da es sich // um eine echte DOM-Verschiebung handelt, keine reine Darstellungsfrage. function kruutFixDescriptionPlacement(modal) { const desc = modal.querySelector('.gbbProductDescriptionContainer'); const details = modal.querySelector('.gbbProductVariantModalDetailsContainer'); if (desc && details && !details.contains(desc)) { details.appendChild(desc); } } const descriptionPlacementObserver = new MutationObserver((mutations) => { mutations.forEach((m) => { m.addedNodes.forEach((node) => { if (!(node instanceof HTMLElement)) return; const modal = node.classList?.contains('gbbProductQuickView') ? node : node.querySelector?.('.gbbProductVariantModalMainContainer.gbbProductQuickView'); if (modal) kruutFixDescriptionPlacement(modal); // Auch greifen, wenn nur die Beschreibung selbst neu eingefügt/verschoben wird // (z.B. bei einem Varianten-Wechsel innerhalb des offenen Modals) if (node.classList?.contains('gbbProductDescriptionContainer')) { const parentModal = node.closest('.gbbProductVariantModalMainContainer.gbbProductQuickView'); if (parentModal) kruutFixDescriptionPlacement(parentModal); } }); }); }); descriptionPlacementObserver.observe(document.body, { childList: true, subtree: true }); // Falls das Modal beim Laden schon im DOM steht document.querySelectorAll('.gbbProductVariantModalMainContainer.gbbProductQuickView').forEach(kruutFixDescriptionPlacement);

Inspiration

Mission

Magazin