gbbSdk.override("gbbSideFooter", function (template) { var FLAG = "data-gbb-step-complete"; function applyStepState() { var sdk = template.sdk; if (!sdk || !sdk.step || !sdk.conditions) return; var activeStepId = sdk.step.f.getActiveId(); if (!activeStepId) return; var result = sdk.conditions.f.validateAll({ stepId: activeStepId, showToast: false }); document.body.setAttribute(FLAG, result && result.ok ? "true" : "false"); } var events = gbbSdk.events; [ events.BUNDLE_INITIALIZED, events.INITIAL_PRODUCTS_FETCH_SUCCESS, events.CART_ITEM_UPDATED, events.CART_UPDATED, events.STEP_CHANGED, events.CATEGORY_CHANGED, events.BOX_SELECTION_CHANGED, events.BUNDLE_STATE_RESET ].forEach(function (eventName) { gbbSdk.subscribe(eventName, function () { applyStepState(); }); }); applyStepState(); }); // Paste in: EasyBundle admin → bundle Custom JS (not the browser console) // Replace the old size chart script with this one, so the link is no longer added to product cards. gbbSdk.override("gbbSideFooter", function (template) { var FALLBACK_PAGE_HANDLE = "baggy-straight-fit-pants-size-chart"; var LINK_TEXT = "Size chart"; var DEFAULT_TITLE = "Size Chart"; var cache = {}; // url -> Promise<{ title, html } | null> function root() { return (window.Shopify && Shopify.routes && Shopify.routes.root) || "/"; } function hasSizeOption(product) { return ((product && product.options) || []).some(function (o) { return /^\s*size/i.test(o && o.name ? o.name : o); }); } // ---------- pull the size chart (table + notes + title) out of a page ---------- function extractChart(html) { var doc = new DOMParser().parseFromString(html, "text/html"); var tables = Array.prototype.slice.call(doc.querySelectorAll("table")); if (!tables.length) return null; var table = tables.find(function (t) { return !!t.closest("[id*='size' i], [class*='size' i]"); }) || tables[0]; var box = table.closest("[id*='size' i], [class*='size' i], .rte, [class*='rte'], .page__content, .page-content, article") || table.parentElement; if (box === table.parentElement && !box.querySelector("p") && box.parentElement) box = box.parentElement; var copy = box.cloneNode(true); copy.querySelectorAll("script, style, form, button, svg, img").forEach(function (el) { el.remove(); }); var title = DEFAULT_TITLE; var scope = table.closest("[id*='size' i], [class*='size' i], .modal, dialog") || doc; var heading = Array.prototype.find.call( scope.querySelectorAll("h1, h2, h3, h4, [class*='title']"), function (h) { return /size\s*chart/i.test(h.textContent); } ); if (heading) { title = heading.textContent.trim(); copy.querySelectorAll("h1, h2, h3, h4, [class*='title']").forEach(function (h) { if (h.textContent.trim() === title) h.remove(); }); } return { title: title, html: copy.innerHTML }; } function loadFrom(url) { if (cache[url]) return cache[url]; cache[url] = fetch(url) .then(function (r) { if (!r.ok) throw new Error("Page returned " + r.status); return r.text(); }) .then(function (html) { var chart = extractChart(html); if (!chart) throw new Error("No size chart found on " + url); return chart; }) .catch(function (err) { console.warn("[size chart]", err && err.message); delete cache[url]; return null; }); return cache[url]; } function chartFor(handle) { var fallbackUrl = root() + "pages/" + FALLBACK_PAGE_HANDLE; if (!handle) return loadFrom(fallbackUrl); return loadFrom(root() + "products/" + handle).then(function (chart) { return chart || loadFrom(fallbackUrl); }); } // ---------- size chart pop-up (opens on top of the product popup) ---------- function openPopup(handle) { var overlay = document.createElement("div"); overlay.className = "ebSizeChartOverlay"; overlay.innerHTML = '"; overlay.querySelector(".ebSizeChartTitle").textContent = DEFAULT_TITLE; document.body.appendChild(overlay); function close() { overlay.remove(); document.removeEventListener("keydown", onKey, true); } function onKey(e) { if (e.key !== "Escape") return; e.stopPropagation(); // close only the size chart, keep the product popup open close(); } overlay.addEventListener("click", function (e) { e.stopPropagation(); if (e.target === overlay || e.target.closest(".ebSizeChartClose")) close(); }); document.addEventListener("keydown", onKey, true); chartFor(handle).then(function (chart) { var body = overlay.querySelector(".ebSizeChartBody"); if (!body) return; if (!chart) { body.innerHTML = "

Sorry, the size chart couldn't be loaded. Please try again.

"; return; } overlay.querySelector(".ebSizeChartTitle").textContent = chart.title; body.innerHTML = chart.html; }); } // ---------- add the link inside the product popup (gbbModalDialog), under the title ---------- var variantModal = template.components.variantModal; var originalModalRender = variantModal.render; variantModal.render = function () { var modalEl = originalModalRender.apply(this, arguments); var product = variantModal.state && variantModal.state.product; var title = modalEl && modalEl.querySelector && modalEl.querySelector(".gbbModalDialog .gbbVariantModalTitle"); if (title && hasSizeOption(product) && !modalEl.querySelector(".ebSizeChartModalLinkWrap")) { var link = document.createElement("button"); link.type = "button"; link.className = "ebSizeChartLink"; link.textContent = LINK_TEXT; link.addEventListener("click", function (e) { e.preventDefault(); e.stopPropagation(); openPopup(product.handle); }); var wrap = document.createElement("div"); wrap.className = "ebSizeChartLinkWrap ebSizeChartModalLinkWrap"; wrap.appendChild(link); title.insertAdjacentElement("afterend", wrap); } return modalEl; }; });

Size	Waist	Length	Bottom Width	Thigh
XS	24-28	38	16	21
S	28-30	39	17	22
M	30-34	40	18	23
L	34-38	41	19	24
XL	38-44	42	20	25
XXL	42-46	43	21	25

SIZE	CHEST	LENGTH	SHOULDER	SLEEVE
SMALL	41	26	22	8
MEDIUM	43	27	23	8
LARGE	45	28	24	9
EXTRA LARGE	47	29	25	9

Your bag is empty

Pants + Tshirt