(function () { function padNumber(n) { return n < 10 ? '0' + n : String(n); } function applyStepLabels() { document .querySelectorAll('.gbbCategoryContainer') .forEach(function (container, index) { var titleEl = container.querySelector('.gbbCategoryTitle'); if (!titleEl || titleEl.querySelector('.gbb-custom-step-label')) return; var stepNum = index + 1; var label = document.createElement('div'); label.className = 'gbb-custom-step-label'; var numSpan = document.createElement('span'); numSpan.className = 'gbb-custom-step-num'; numSpan.textContent = padNumber(stepNum); var divider = document.createElement('span'); divider.className = 'gbb-custom-step-divider'; var stepText = document.createElement('span'); stepText.className = 'gbb-custom-step-text'; stepText.textContent = 'STEP ' + stepNum; label.appendChild(numSpan); label.appendChild(divider); label.appendChild(stepText); titleEl.insertBefore(label, titleEl.firstChild); }); } // Run on first load document.addEventListener('gbb-bundle:initialized', applyStepLabels); // Re-run if the customer moves between steps or the bundle resets document.addEventListener('gbb-step:changed', applyStepLabels); document.addEventListener('gbb-bundle-state:reset', applyStepLabels); })(); /* For product type & product vendor */ document.addEventListener( 'gbb-modules:initialized', function () { if (!window.gbb) return; var originalBuildTextSection = window.gbb.components.productCard.f.buildTextSection; window.gbb.components.productCard.f.buildTextSection = function ( cardEl, product, variant ) { var textContainer = originalBuildTextSection.call( this, cardEl, product, variant ); if (!textContainer) return textContainer; var el = gbb.sdkHelpers.dom.utility.createElement; var titleEl = textContainer.querySelector('.gbbProductTitleOnly'); if (!titleEl || !titleEl.parentNode) return textContainer; // After the "if (validTypes.includes(data.type))" equivalent — // only inject when the value actually exists on the product if (product.vendor) { var vendorEl = el('div', { class: 'gbb-custom-vendor' }); vendorEl.textContent = product.vendor; titleEl.parentNode.insertBefore(vendorEl, titleEl); } if (product.productType || product.product_type) { var typeEl = el('div', { class: 'gbb-custom-product-type' }); typeEl.textContent = product.productType || product.product_type; titleEl.parentNode.insertBefore(typeEl, titleEl.nextSibling); } return textContainer; }; }, { once: true } ); (function () { // The exact text shown under each step, matched to the step's name. var DESCRIPTIONS = { Cleanser: 'Low-pH, sulfate-free. The foundation step — never strips the acid mantle.', Toner: 'Hydrating, lightly exfoliating. Balances pH without stripping.', Serum: "Barrier building. The slowest step — press in, don't rub.", Moisturizer: 'Gel-cream, never heavy. Seals the routine without clogging.', Sunscreen: 'Daily UV defense. Broad-spectrum, light enough to layer.', Mask: 'Weekly indulgence. Sheet masks and patches for targeted recovery.', }; function pad(n) { return (n < 10 ? '0' : '') + n; } function decorate() { var headers = document.querySelectorAll('.gbbCategoryHeaderContainer'); headers.forEach(function (header, index) { if (header.getAttribute('data-cs-decorated') === 'true') return; var titleEl = header.querySelector('.gbbCategoryTitle'); if (!titleEl) return; var name = Array.from(titleEl.childNodes) .filter(function (n) { return n.nodeType === 3; }) .map(function (n) { return n.textContent.trim(); }) .join('') .trim(); var step = index + 1; var num = document.createElement('span'); num.className = 'csNum'; num.textContent = pad(step); var line = document.createElement('span'); line.className = 'csDivider'; var label = document.createElement('span'); label.className = 'csStepLabel'; label.textContent = 'STEP ' + step; var desc = document.createElement('span'); desc.className = 'csDesc'; desc.textContent = DESCRIPTIONS[name] || ''; header.insertBefore(num, titleEl); header.insertBefore(line, titleEl); header.insertBefore(label, titleEl); header.appendChild(desc); header.setAttribute('data-cs-decorated', 'true'); }); } // Run once now, in case the steps are already on screen. decorate(); // The bundle announces when it has redrawn its steps. We let that redraw finish // (one moment later) and then re-apply the numbers and descriptions. function reapply() { requestAnimationFrame(decorate); } document.addEventListener('click', (event) => { const button = event.target.closest('#gbb-switcher-nav button'); if (!button) return; reapply(); }); [ 'gbb-category-products:fetched', 'gbb-step:changed', 'gbb-bundle-state:reset', ].forEach(function (eventName) { document.addEventListener(eventName, reapply); }); })(); /* For quantity in mobile footer */ (function () { function getMaxQuantity() { try { var activeRule = gbb.sdk.boxSelection.f.getActiveRule(); if (activeRule && activeRule.boxQuantity) { return activeRule.boxQuantity; } var steps = gbb.sdk.step.f.getAll(); var maxQty = 0; steps.forEach(function (step) { var rules = step.conditions?.rules || []; rules.forEach(function (rule) { if (rule.type === 'quantity' && parseInt(rule.value) > maxQty) { maxQty = parseInt(rule.value); } }); }); return maxQty || null; } catch (err) { console.error('[GBB] Error getting max quantity:', err); return null; } } try { var originalBuildBundleInfoContainer = gbb.components.footer.f.buildBundleInfoContainer; gbb.components.footer.f.buildBundleInfoContainer = function () { try { var container = originalBuildBundleInfoContainer.call(this); if (gbb.utility.isMobileView()) { var titleEl = container.querySelector('.gbbFooterBundleTitle'); var maxQuantity = getMaxQuantity(); if (titleEl) { var itemCount = gbb.sdk.f.getCartData({}).item_count || 0; titleEl.innerHTML = titleEl.textContent + ' ' + itemCount + '/' + maxQuantity + ''; } } return container; } catch (err) { console.error('[GBB] Error in patched buildBundleInfoContainer:', err); return originalBuildBundleInfoContainer.call(this); } }; document.addEventListener('gbb-cart:updated', function () { try { var titleEl = document.querySelector('.gbbFooterBundleTitle'); if (titleEl && gbb.utility.isMobileView()) { var itemCount = gbb.sdk.f.getCartData({}).item_count || 0; var maxQuantity = getMaxQuantity(); var baseText = gbb.sdk.bundleData?.bundleSettings?.bundleTextConfig?.bundleSummary ?.title || titleEl.textContent.replace(/\s*\(\d+\/\d+\)$/, '').trim(); titleEl.innerHTML = baseText + ' ' + itemCount + '/' + maxQuantity + ''; } } catch (err) { console.error('[GBB] Error updating bundle title on cart update:', err); } }); } catch (err) { console.error('[GBB] Error setting up bundle title patch:', err); } })(); /* for 6 footer slots */ (function () { var TARGET_SLOTS = 6; var pending = false; function buildEmptyCard() { var card = document.createElement('div'); card.className = 'gbbEmptyProductCard'; var imageContainer = document.createElement('div'); imageContainer.className = 'gbbEmptyProductCardImageContainer'; var infoContainer = document.createElement('div'); infoContainer.className = 'gbbEmptyProductCardInfoContainer'; var title = document.createElement('div'); title.className = 'gbbEmptyProductCardTitle'; var variantTitle = document.createElement('div'); variantTitle.className = 'gbbEmptyVariantTitle'; var price = document.createElement('div'); price.className = 'gbbEmptyProductCardPrice'; var actionContainer = document.createElement('div'); actionContainer.className = 'gbbEmptyProductCardActionContainer'; infoContainer.appendChild(title); infoContainer.appendChild(variantTitle); infoContainer.appendChild(price); card.appendChild(imageContainer); card.appendChild(infoContainer); card.appendChild(actionContainer); return card; } function adjust() { pending = false; var containers = document.querySelectorAll('.gbbFooterProductsContainer'); for (var c = 0; c < containers.length; c++) { var container = containers[c]; // Show products in the order they were added (newest ends up in the last slot). var reals = container.querySelectorAll('.gbbFooterProductWrapper'); for (var i = 0; i < reals.length; i++) { reals[i].style.order = -(i + 1); } // Keep empty slots after the products, and top up to the target number. var empties = container.querySelectorAll('.gbbEmptyProductCard'); for (var e = 0; e < empties.length; e++) { empties[e].style.order = 0; } var needed = Math.max(0, TARGET_SLOTS - reals.length); if (empties.length > needed) { for (var r = empties.length - 1; r >= needed; r--) { empties[r].remove(); } } else if (empties.length < needed) { var frag = document.createDocumentFragment(); for (var a = 0; a < needed - empties.length; a++) { frag.appendChild(buildEmptyCard()); } container.appendChild(frag); } } } function schedule() { if (pending) return; pending = true; requestAnimationFrame(adjust); } var EVENTS = [ 'gbb-cart:updated', 'gbb-cart-item:updated', 'gbb-box-selection:changed', 'gbb-step:changed', 'gbb-category:changed', 'gbb-discount-rule:changed', 'gbb-bundle-state:reset', 'gbb-add-bundle-to-cart:success' ]; EVENTS.forEach(function (name) { document.addEventListener(name, schedule); }); document.addEventListener('click', function (e) { if (e.target.closest && e.target.closest('#gbb-switcher-nav button')) { schedule(); } }); // Startup: catch the first time the bundle appears (stops once the slots are in place). var tries = 0; (function warmUp() { schedule(); if (++tries < 30 && !document.querySelector('.gbbFooterProductsContainer')) { requestAnimationFrame(warmUp); } })(); })();

ATOBARRIER 365 CREAM

DERMA UV365 BARRIER HYDRO MINERAL SUNSCREEN

ATOBARRIER 365 CREAM MIST

THERACNE 365 NIACINAMIDE 5% BLEMISH BODY MIST

ATOBARRIER 365 HYDRO SOOTHING CREAM

ATOBARRIER 365 BODY LOTION

A-CICA365 Soothing Relief Serum pH4.5

ATOBARRIER 365 HYDRO CERA-HA AMPOULE

THERACNE 365 CLEAR DEEP CLEANSING FOAM

REGEDERM 365 RETINOID EYE SERUM

ATOBARRIER 365 HYDRO ESSENCE

THERACNE 365 HYDRO ACTIVE TONER

A-CICA 365 COOLING RELIEF PADS pH4.5

DERMA UV 365 VITA-C RADIANCE SUNSCREEN SPF50+ PA++++

REGEDERM 365 Skin Tightening Capsule Serum

Theracne 365 Active Serum