${window.unisexTranslations?.kids?.en?.womens || "Womens"}
${window.unisexTranslations?.kids?.en?.womens || "Womens"}
`;
title.after(toggle);
if (!content.hasAttribute("genderSize")) {
content.setAttribute("genderSize", "bigKids");
}
const input = toggle.querySelector("#toggle-unisex-kids");
input.checked = content.getAttribute("genderSize") === "womens";
input.addEventListener("change", () => {
const mode = input.checked ? "womens" : "mens";
content.setAttribute("genderSize", mode);
labelChangerBigKidsQuickAdd(mode, root, group);
});
const initialMode = input.checked ? "womens" : "mens";
labelChangerBigKidsQuickAdd(initialMode, root, group);
annotateSizes(root, group);
observeAndSetVariationLabel(root);
new MutationObserver(() => {
const exists = !!root.querySelector("#unisexSizeSelector");
const stillValid = !!root.querySelector(".product-variations");
if (!exists && stillValid) {
injectManualToggle(root);
} else {
const currentMode =
content.getAttribute("genderSize") === "womens"
? "womens"
: "mens";
labelChangerBigKidsQuickAdd(currentMode, root, group);
}
}).observe(content, { childList: true, subtree: true });
const swatches = root.querySelector(".swatches.bigkidshoesize");
if (swatches) {
let debounceTimer;
new MutationObserver(() => {
clearTimeout(debounceTimer);
debounceTimer = window.setTimeout(() => {
const currentMode =
content.getAttribute("genderSize") === "womens"
? "womens"
: "mens";
labelChangerBigKidsQuickAdd(currentMode, root, group);
}, 50);
}).observe(swatches, {
childList: true,
subtree: true,
characterData: true,
});
}
}
function monitorDomReady(root, tries = 0) {
if (tries > 30) return;
const content = root.querySelector("#product-content");
const title = root.querySelector(".variation-title");
const existingToggle = root.querySelector("#unisexSizeSelector");
if (content && title && !existingToggle) {
injectManualToggle(root);
} else {
setTimeout(() => monitorDomReady(root, tries + 1), 100);
}
}
new MutationObserver((muts) => {
muts.forEach((m) => {
m.addedNodes.forEach((node) => {
if (!(node instanceof HTMLElement)) return;
const pdp = node.querySelector?.("#pdpMain");
const isBigKids = node.querySelector?.(
".swatches.bigkidshoesize",
);
if (pdp && isBigKids) {
monitorDomReady(node);
}
});
});
}).observe(document.body, { childList: true, subtree: true });
})();
(function initMini() {
try {
const wr = document.querySelector(SELECTORS.miniCartWrapper);
if (!wr) return;
const update = () => {
document
.querySelectorAll(SELECTORS.miniCartProduct)
.forEach((prod) => {
const pid = prod._component?.props?.productID;
const group = findGroup(pid);
if (!group) return;
const labels = translationsAll[group.labelKey][lang];
const attrs = prod._component?.props?.variationAttributes;
if (!attrs) return;
const size =
attrs.find((a) =>
group.labelKey === "kids"
? a?.id === "bigKidShoeSize"
: a?.id === "size",
)?.displayValue || "";
let width =
attrs.find((a) => a?.id === "width")?.displayValue ||
"Regular";
if (width === "M") width = "Regular";
else if (width === "W") width = "Wide";
const sizeFloat = parseFloat(size.replace(",", "."));
const womRaw = isNaN(sizeFloat)
? "\u2014"
: (sizeFloat + offset).toFixed(1);
const wom = womRaw.endsWith(".0")
? womRaw.slice(0, -2)
: womRaw;
const womDisplay = useComma ? wom.replace(".", ",") : wom;
const text = `${sizeTranslation} ${labels.mens} ${size} ${width} / ${labels.womens} ${womDisplay} ${width}`;
const el = prod.querySelector(window.miniCartSizeSelector);
if (el && el.textContent !== text) {
el.textContent = text;
}
});
};
update();
new MutationObserver(update).observe(wr, {
childList: true,
subtree: true,
});
} catch (error) {
console.warn("Error updating label in the mini cart", error);
}
})();
(function initFull() {
const wr = document.querySelector(SELECTORS.fullCartWrapper);
if (!wr) return;
const update = () => {
document
.querySelectorAll(SELECTORS.fullCartProduct)
.forEach((item) => {
const pid =
item.getAttribute("data-itemid") ||
item
.querySelector("td.item-name")
?.getAttribute("data-itemid") ||
"";
const group = findGroup(pid);
if (!group) return;
const labels = translationsAll[group.labelKey][lang];
const sizeRaw =
item
.querySelector(".bfx-product-size")
?.getAttribute("data-size") ||
item
.querySelector("[data-value]")
?.getAttribute("data-value") ||
"";
const widthTextRaw =
item
.querySelector(".bfx-product-attributes-value")
?.textContent?.trim() || "Regular";
const sizeFloat = parseFloat(sizeRaw.replace(",", "."));
const womRaw = isNaN(sizeFloat)
? "\u2014"
: (sizeFloat + offset).toFixed(1);
const wom = womRaw.endsWith(".0") ? womRaw.slice(0, -2) : womRaw;
const womDisplay = useComma ? wom.replace(".", ",") : wom;
const mensDisplay = sizeRaw.endsWith(".0")
? sizeRaw.slice(0, -2)
: sizeRaw;
const txt = `${sizeTranslation} ${labels.mens} ${mensDisplay} ${widthTextRaw} / ${labels.womens} ${womDisplay} ${widthTextRaw}`;
const sizeLine = item.querySelector(
'[data-attribute="color"]',
)?.nextElementSibling;
if (sizeLine && sizeLine.textContent !== txt) {
sizeLine.textContent = txt;
}
item
.querySelectorAll(
".bfx-product-size, .bfx-product-attributes-label",
)
.forEach((el) => {
el.closest("span.value")?.setAttribute(
"style",
"display: none",
);
});
});
};
update();
new MutationObserver(update).observe(wr, {
childList: true,
subtree: true,
});
})();
(function initCheckout() {
const wr = document.querySelector(SELECTORS.checkoutWrapper);
if (!wr) return;
const update = () => {
wr.querySelectorAll(SELECTORS.checkoutItem).forEach((prod) => {
const pid =
prod
.querySelector("h3.spc-product-name")
?.getAttribute("data-product-itemid") || "";
const group = findGroup(pid);
if (!group) return;
const labels = translationsAll[group.labelKey][lang];
const pElems = prod.querySelectorAll("p");
const sizeLine = pElems[1];
if (!sizeLine) return;
const rawText =
sizeLine.textContent?.replace(sizeTranslation, "").trim() || "";
const [baseSize, widthRaw] = rawText.split(" ");
const width = widthRaw === "W" ? "Wide" : "Regular";
const womRaw = (
parseFloat(baseSize.replace(",", ".")) + offset
).toFixed(1);
const wom = womRaw.endsWith(".0") ? womRaw.slice(0, -2) : womRaw;
const womDisplay = useComma ? wom.replace(".", ",") : wom;
const newText = `${sizeTranslation} ${labels.mens} ${baseSize} ${width} / ${labels.womens} ${womDisplay} ${width}`;
if (sizeLine.textContent !== newText) {
sizeLine.textContent = newText;
}
});
};
update();
new MutationObserver(update).observe(wr, {
childList: true,
subtree: true,
});
})();
new MutationObserver(() => {
const pid =
document.querySelector(SELECTORS.pdpMain)?.getAttribute("data-pid") ||
"";
const group = findGroup(pid);
if (!group || group.labelKey === "kids") return;
if (document.querySelector(SELECTORS.pdpMain) && unisexCheck()) {
injectToggle();
annotateSizes(document, group);
}
}).observe(document.body, { childList: true, subtree: true });
});
})();
