gbbSdk.override("gbbSideFooter", function (gbbSideFooter) { var C = gbbSideFooter.components; var f = C.footer.f; var cartUtil = gbbSideFooter.utility.cart; var isMobileBuild = false; // Custom empty-slot labels, only for these bundles (key = SDK offer ID, then categoryId -> [line 1, line 2]) // Use {ord} in a label to show 1st, 2nd, 3rd... based on the slot's position within its category var CUSTOM_SLOT_LABELS = { "SDK-818538": { "category55768": ["1 Body Wash"], "category86395": ["1 Body Lotion"], "category51484": ["1 EDP"] }, "SDK-871642": { "category55768": ["{ord} EDP"] }, "SDK-545878": { "category55768": ["1 Body Wash"], "category86395": ["1 Body Lotion"], "category51484": ["1 Parfum"], "category55626": ["1 Body Mist"], "category03564": ["1 Lip Balm"] } }; // Only bundles that have product slots enabled function hasSlots() { var s = gbbSideFooter.sdk.bundleData.bundleSettings; return !!(s && s.productsSlotsConfig && s.productsSlotsConfig.isEnabled); } // 1 -> 1st, 2 -> 2nd, 3 -> 3rd, 4 -> 4th, 11 -> 11th ... function ordinal(n) { var s = ["th", "st", "nd", "rd"], v = n % 100; return n + (s[(v - 20) % 10] || s[v] || s[0]); } // Slot count = step rule count + preselected (default) products var originalGetRuleBasedSlotCount = cartUtil.getRuleBasedSlotCount; cartUtil.getRuleBasedSlotCount = function () { var count = originalGetRuleBasedSlotCount.apply(this, arguments); var dp = gbbSideFooter.sdk.bundleData.defaultProductsData; if (!hasSlots() || !dp || !dp.isDefaultProductsEnabled || !dp.products) return count; var defaultQty = dp.products.reduce(function (sum, p) { return sum + (Number(p.requiredQuantity) || 1); }, 0); return count + defaultQty; }; // Labels for the empty slots: categories not yet picked (only for bundles in CUSTOM_SLOT_LABELS) function getEmptySlotLabels(filled, emptyCount) { var bd = gbbSideFooter.sdk.bundleData; var custom = CUSTOM_SLOT_LABELS[bd.offerId]; if (!custom) return []; var labels = []; Object.keys(bd).filter(function (k) { return /^productsData\d+$/.test(k); }).sort().forEach(function (stepKey) { var cats = bd[stepKey].categories || {}; Object.keys(cats).forEach(function (id) { var cat = cats[id]; if (!custom[cat.categoryId]) return; var rule = ((cat.conditions && cat.conditions.rules) || []).filter(function (r) { return r.type === "quantity" && r.condition === "equalTo"; })[0]; var needed = rule ? Number(rule.value) : 1; var used = filled.filter(function (s) { return (s.getAttribute("data-unique-key") || "").indexOf("categoryId:" + cat.categoryId + "_") > -1; }).length; for (var i = used; i < needed; i++) { labels.push(custom[cat.categoryId].map(function (line) { return line.replace("{ord}", ordinal(i + 1)); })); } }); }); // Fallback: the bundle has a single category but more slots than its rule count // (e.g. 1 category div for 3 EDP slots) -> keep numbering for the remaining empty slots var catIds = Object.keys(custom); if (labels.length < emptyCount && catIds.length === 1) { var onlyId = catIds[0]; var usedOnly = filled.filter(function (s) { return (s.getAttribute("data-unique-key") || "").indexOf("categoryId:" + onlyId + "_") > -1; }).length; for (var j = usedOnly + labels.length; labels.length < emptyCount; j++) { labels.push(custom[onlyId].map(function (line) { return line.replace("{ord}", ordinal(j + 1)); })); } } return labels; } // Preselected first, then added products in order (FIFO); empty slots get a custom label, else their position number function arrangeSlots(slotsEl) { var container = slotsEl.querySelector(".gbbProductSlotsContainer"); if (!container) return slotsEl; var items = Object.values(gbbSideFooter.sdk.state.cartData.items || {}); var order = items.map(function (item) { return String(item.variantId || item.id); }); var slots = Array.prototype.slice.call(container.querySelectorAll(":scope > .gbbProductSlotContainer")); var filled = slots.filter(function (s) { return s.hasAttribute("data-variant-id"); }); var empty = slots.filter(function (s) { return !s.hasAttribute("data-variant-id"); }); filled.sort(function (a, b) { return order.indexOf(a.getAttribute("data-variant-id")) - order.indexOf(b.getAttribute("data-variant-id")); }); var labels = getEmptySlotLabels(filled, empty.length); filled.concat(empty).forEach(function (slot, index) { container.appendChild(slot); if (slot.hasAttribute("data-variant-id")) return; var label = labels[index - filled.length]; slot.innerHTML = label ? '+' + label.join("
") + "" : '' + (index + 1) + ""; }); return slotsEl; } // Mobile footer: slots row above Add to Cart var originalBuildMobileFooter = f.buildMobileFooter; f.buildMobileFooter = function () { if (!hasSlots()) return originalBuildMobileFooter.apply(this, arguments); isMobileBuild = true; var footerEl; try { footerEl = originalBuildMobileFooter.apply(this, arguments); } finally { isMobileBuild = false; } var mobileWrap = footerEl && footerEl.querySelector(".gbbProductsFooterHTMLForMobile"); if (mobileWrap) { var inlineSlots = document.createElement("div"); inlineSlots.className = "gbbMobileInlineSlots"; inlineSlots.appendChild(arrangeSlots(C.cartProductSlots.render())); mobileWrap.insertBefore(inlineSlots, mobileWrap.querySelector(".gbbFooterActionContainer")); } return footerEl; }; // Mobile drawer: product list instead of slots // Desktop side footer: same slot order + labels/numbering var originalRenderCartItems = f.renderCartItems; f.renderCartItems = function () { if (isMobileBuild) return C.cartProductsList.render(); var el = originalRenderCartItems.apply(this, arguments); if (hasSlots() && el && el.classList.contains("gbbProductSlotsContainerWrapper")) { return arrangeSlots(el); } return el; }; return gbbSideFooter; });

Petals On The Rocks Collection

Boardroom In Bora Bora Collection

Smell Delish Vanilla Caramello Lotion & Perfume Duo

Best of Vanilla Vibes Bath & Body Bundle

Full-Size Eau de Parfums

CATEGORIES