/* Oriental Rug Galaxy custom code — THEME-ROUTE (Vessel card template renders * the card; this script only patches it). Replaces the old v2 "sleek" * renderProductCard() light-DOM card so every v3 card-level feature (badge * campaigns, preorder, BIS, wishlist, review) keeps its native shadow-DOM * injection points. * * v2 behaviors kept 1:1 (verified live 2026-07-20): * - type line above the title ("Oriental Rug" — last product_type segment) * - "SKU : " right of the bold price * - sale badge copy "N% off" (Vessel renders "Sale") + grey "Out of Stock" * badge, both top-left (positioning/colors in orientalrug-custom-v3.css) * The grey rounded card, hover crossfade, quick-buy pill and all typography * are handled by the merchant CSS (adopted into the card's shadow root). * Catalog note: rugs are one-of-a-kind (single "Default Title" variant), so * the v2 swatch/select variant mechanics are dead paths — not replicated. */ (function () { 'use strict'; /* v2 default grid = 3 kolom desktop — seed ONLY when the shopper has no * stored preference (v2 did not force it on every load; manual selection * must survive reloads). */ try { var LS_COLS = 'sledge-product-grid-desktop-columns'; if (!localStorage.getItem(LS_COLS)) localStorage.setItem(LS_COLS, 'column-3'); } catch (e) {} /* v2's title underline paints under EVERY wrapped line: its anchor is an * INLINE element, and inline backgrounds render per line fragment. The v3 * title is a block (flex item), so a block-level gradient can only draw one * line at the very bottom — wrap the text in an inline span and let the CSS * put the gradient there. */ function wrapTitleInline(title) { if (!title || title.querySelector('.org-title-inline')) return; var span = document.createElement('span'); span.className = 'org-title-inline'; while (title.firstChild) span.appendChild(title.firstChild); title.appendChild(span); } function lastTypeSegment(t) { if (!t) return ''; var parts = String(t).split('>'); return parts[parts.length - 1].trim(); } /* list-variant card (one column): a DIFFERENT template renders here — * .product-card-link/.product-details, no .product-card-wrapper — so the * theme-card patch below never matches it. v2's list card carries the same * text stack as the grid (type line above the title, "SKU : X" beside the * price), so rebuild those two here; the template's own bare sku span is * hidden by the CSS. */ /* Badge kartu — SATU implementasi untuk grid dan list. Sebelumnya logika ini * hanya ada di jalur grid, sehingga kartu list menampilkan angka bawaan * template ("-25%") dengan merah bawaannya dan tidak pernah mendapat badge * Out of Stock — dua mode jadi tidak sinkron (QC 2026-08-07). * Warna badge diskon di kartu bawaan ditulis sebagai style INLINE, jadi * warnanya dibersihkan di sini; kelasnya yang menentukan warna v2. */ function applyBadges(shadow, p, imageBox) { var priceNum = Number(p.price); var cmpNum = Number(p.compareAtPrice); var onSale = isFinite(cmpNum) && isFinite(priceNum) && cmpNum > priceNum && priceNum > 0; var wrap = shadow.querySelector('.product-card__badge') || shadow.querySelector('.badges'); if (onSale && wrap) { var badges = wrap.querySelectorAll('.badge'); for (var i = 0; i < badges.length; i++) { var bt = (badges[i].textContent || '').trim(); if (bt.toLowerCase() === 'sale' || /^-?\s*\d+(\.\d+)?\s*%$/.test(bt)) { var pct = (1 - priceNum / cmpNum) * 100; if (pct > 0) badges[i].textContent = String(Number(pct.toFixed(2))) + '% off'; badges[i].style.backgroundColor = ''; badges[i].classList.add('badge--org-on-sale'); } } } if (p.available === false && !shadow.querySelector('.badge--org-sold-out')) { if (!wrap && imageBox) { wrap = document.createElement('div'); wrap.className = 'product-card__badge'; imageBox.appendChild(wrap); } if (wrap) { var so = document.createElement('span'); so.className = 'badge badge--org-sold-out'; so.textContent = 'Out of Stock'; /* diskon dulu, baru Out of Stock */ wrap.appendChild(so); } } } function patchListCard(card, shadow, p) { var group = shadow.querySelector('.product-title-group'); var title = group && group.querySelector('p.title'); if (!group || group.__orgListPatched) return; group.__orgListPatched = true; var type = lastTypeSegment(p.productType || p.product_type); if (title && type && !shadow.querySelector('.org-card-type')) { var t = document.createElement('p'); t.className = 'org-card-type'; t.textContent = type; group.insertBefore(t, title); } wrapTitleInline(title); applyBadges(shadow, p, shadow.querySelector('.product-image')); var priceRow = shadow.querySelector('.price-row'); var sku = p.sku || (p.variants && p.variants[0] && p.variants[0].sku) || ''; if (priceRow && sku && !priceRow.querySelector('.org-card-sku')) { var sp = document.createElement('span'); sp.className = 'org-card-sku'; sp.textContent = 'SKU : ' + sku; priceRow.appendChild(sp); } } function patch(card) { var shadow = card && card.shadowRoot; if (!shadow) return; if (card.getAttribute('variant') === 'list' || shadow.querySelector('.product-card-link')) { patchListCard(card, shadow, card._product || {}); return; } var wrapper = shadow.querySelector('.product-card-wrapper'); if (!wrapper || wrapper.__orgPatched) return; wrapper.__orgPatched = true; var p = card._product || {}; /* 1 — type line above the title */ var title = shadow.querySelector('.product-card__title'); var type = lastTypeSegment(p.productType || p.product_type); if (title && type && !shadow.querySelector('.org-card-type')) { var t = document.createElement('p'); t.className = 'org-card-type'; t.textContent = type; title.parentNode.insertBefore(t, title); } wrapTitleInline(title); /* 2 — price + SKU on one row */ var price = shadow.querySelector('.price'); var sku = p.sku || (p.variants && p.variants[0] && p.variants[0].sku) || ''; if (price && sku && !shadow.querySelector('.org-price-row')) { var row = document.createElement('div'); row.className = 'org-price-row'; price.parentNode.insertBefore(row, price); row.appendChild(price); var s = document.createElement('span'); s.className = 'org-card-sku'; s.textContent = 'SKU : ' + sku; row.appendChild(s); } /* 3 + 4 — badge diskon & Out of Stock lewat implementasi bersama, supaya * grid dan list tidak pernah berbeda lagi */ applyBadges(shadow, p, shadow.querySelector('.card-gallery')); } /* ── toolbar patch: v2 shows "Sort by:" / "Limit:" grey prefix labels, a * sort-arrows icon inside the sort pill, and orders SORT before LIMIT. * v3's SLEDGE-FILTER-SORT renders bare dropdowns — restructure its light * shadow DOM (styling rides orientalrug-custom-v3.css). Idempotent. */ var SORT_ICON = ''; function patchToolbar(sortHost) { var sh = sortHost && sortHost.shadowRoot; if (!sh) return; /* the ⇅ icon inside the sort pill applies on EVERY viewport (v2 mobile * pill carries it too) — identify sort vs limit by numeric label */ var all = [].slice.call(sh.querySelectorAll('.dropdown')); all.forEach(function (dd) { var label = (dd.querySelector('.dropdown-label') || {}).textContent || ''; if (!/^\s*\d+\s*$/.test(label) && !dd.querySelector('.org-sort-icon')) { dd.insertAdjacentHTML('afterbegin', SORT_ICON); } }); /* prefix labels + sort-before-limit order: desktop-only — the mobile * toolbar arranges dropdowns differently and the prefixes ended up * orphaned on their own row. v2 mobile DOES show one grey label: "Limit:" * before the limit pill (measured @390: span 38x18 rgb(103,116,135)) — * add just that one. */ if (window.innerWidth < 750) { /* cari di seluruh shadow root — layout mobile tidak membungkus dropdown * dalam .right-section seperti desktop */ var limitM = null; [].slice.call(sh.querySelectorAll('.dropdown')).forEach(function (dd) { var l = (dd.querySelector('.dropdown-label') || {}).textContent || ''; if (/^\s*\d+\s*$/.test(l)) limitM = dd; }); if (limitM && !(limitM.previousElementSibling && limitM.previousElementSibling.classList && limitM.previousElementSibling.classList.contains('org-dd-prefix'))) { var spM = document.createElement('span'); spM.className = 'org-dd-prefix org-dd-prefix--mob'; spM.textContent = 'Limit:'; limitM.parentNode.insertBefore(spM, limitM); } return; } var right = sh.querySelector('.right-section'); if (!right || right.__orgPatched) return; var dropdowns = [].slice.call(right.querySelectorAll('.dropdown')); if (!dropdowns.length) return; right.__orgPatched = true; var sortDd = null, limitDd = null; dropdowns.forEach(function (dd) { var label = (dd.querySelector('.dropdown-label') || {}).textContent || ''; if (/^\s*\d+\s*$/.test(label)) limitDd = dd; else if (!sortDd) sortDd = dd; }); function prefix(text, before) { var s = document.createElement('span'); s.className = 'org-dd-prefix'; s.textContent = text; right.insertBefore(s, before); return s; } /* order: [Sort by:][sort pill][Limit:][limit pill] */ if (sortDd) { right.appendChild(sortDd); prefix('Sort by:', sortDd); } if (limitDd) { right.appendChild(limitDd); prefix('Limit:', limitDd); } } function sweepToolbars() { var out = []; (function walk(root) { var hosts = root.querySelectorAll('sledge-filter-sort'); for (var i = 0; i < hosts.length; i++) out.push(hosts[i]); var all = root.querySelectorAll('*'); for (var j = 0; j < all.length; j++) if (all[j].shadowRoot) walk(all[j].shadowRoot); })(document); out.forEach(patchToolbar); } /* the toolbar re-renders on filter/search state changes — light poll keeps * the prefixes present (guarded by __orgPatched, so re-runs are free) */ setInterval(sweepToolbars, 1200); document.addEventListener('sledge:product-card:rendered', function (e) { var card = e.detail && e.detail.card; if (card) setTimeout(function () { patch(card); }, 0); sweepToolbars(); }); /* ── ukuran gambar kartu = v2 (payload, bukan tata letak) ──────────────── * Geometri gambar sudah 1:1 (grid 327x327 / list 169x183, object-fit cover, * berkas Shopify yang sama). Yang berbeda: v2 meminta varian `?width=500` * sementara v3 memuat master 1600x1200 — piksel identik di layar, tapi * unduhannya berkali lipat dan gambar besar itulah LCP halaman koleksi. * Samakan permintaannya dengan v2. srcset ikut dibuang: kalau tidak, browser * tetap memilih dari daftar lama dan src baru diabaikan. */ function sizeCardImages(root) { var imgs = root.querySelectorAll('img'); for (var i = 0; i < imgs.length; i++) { var im = imgs[i]; if (im.__orgSized) continue; var src = im.currentSrc || im.src || ''; if (src.indexOf('/cdn/shop/') === -1 && src.indexOf('cdn.shopify.com') === -1) continue; try { var u = new URL(src, location.href); if (u.searchParams.get('width') === '500') { im.__orgSized = true; continue; } u.searchParams.set('width', '500'); im.__orgSized = true; im.removeAttribute('srcset'); im.removeAttribute('sizes'); im.src = u.toString(); } catch (e) {} } } function sweepCardImages() { (function walk(node) { sizeCardImages(node); var all = node.querySelectorAll('*'); for (var i = 0; i < all.length; i++) if (all[i].shadowRoot) walk(all[i].shadowRoot); })(document); } setInterval(sweepCardImages, 1000); /* ── drawer filter mobile: header tema jangan menimpa ──────────────────── * Drawer v3 dirender `position: fixed; z-index: 10000`, tapi TETAP kalah dari * header tema Vessel yang cuma `sticky; z-index: 8` — menaikkan z-index * drawer sampai 2147483000 pun tidak menolong, jadi ada stacking context di * jalur library yang mengurung drawer (akar masalahnya di library, dilaporkan * terpisah). Yang TERBUKTI menyelesaikan (diuji langsung di storefront): * menurunkan z-index header selama drawer terbuka. Ini juga yang v2 hasilkan * secara visual — drawer v2 menutupi header sepenuhnya. Nilai aslinya * disimpan dan dikembalikan saat drawer ditutup, jadi tidak ada sisa efek. */ var themeHeader = null, headerZBefore = null; function drawerOpen() { var found = false; (function rec(root) { if (found) return; var els = root.querySelectorAll('*'); for (var i = 0; i < els.length; i++) { var el = els[i]; if (el.classList && el.classList.contains('drawer-backdrop') && el.classList.contains('open')) { found = true; return; } if (el.shadowRoot) rec(el.shadowRoot); } })(document); return found; } function syncHeaderZ() { if (!themeHeader) themeHeader = document.querySelector('header.shopify-section') || document.querySelector('header'); if (!themeHeader) return; var open = drawerOpen(); if (open && headerZBefore === null) { headerZBefore = themeHeader.style.zIndex; themeHeader.style.zIndex = '0'; } else if (!open && headerZBefore !== null) { themeHeader.style.zIndex = headerZBefore; headerZBefore = null; } } setInterval(syncHeaderZ, 400); /* Prefix "Grup: " pada pill multi DICABUT (review 2026-08-06): label grupnya * kembali tampil sebagai caption di kartu grup, jadi prefix hanya menduplikasi * teks yang sama dua kali dalam satu blok. */ /* Pembungkus judul berjalan sebagai sweep MANDIRI, bukan hanya di dalam * patch(): patch() ber-guard __orgPatched per kartu, dan kartu yang sudah * dipatch versi lama skrip ini (mis. selama masa transisi settings) tidak * akan pernah masuk patch() lagi — judulnya tak terbungkus dan underline * multi-baris mati. wrapTitleInline sendiri idempotent. */ function sweepTitles() { (function walk(root) { var cards = root.querySelectorAll('sledge-product-card'); for (var i = 0; i < cards.length; i++) { var sr = cards[i].shadowRoot; if (!sr) continue; wrapTitleInline(sr.querySelector('.product-card__title')); wrapTitleInline(sr.querySelector('p.title')); } var all = root.querySelectorAll('*'); for (var j = 0; j < all.length; j++) if (all[j].shadowRoot) walk(all[j].shadowRoot); })(document); } setInterval(sweepTitles, 900); /* sweep for cards rendered before this script attached */ function walk(root, out) { var cards = root.querySelectorAll('sledge-product-card'); for (var i = 0; i < cards.length; i++) out.push(cards[i]); var all = root.querySelectorAll('*'); for (var j = 0; j < all.length; j++) { if (all[j].shadowRoot) walk(all[j].shadowRoot, out); } } function sweep() { var out = []; walk(document, out); for (var i = 0; i < out.length; i++) patch(out[i]); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', sweep); } else { sweep(); } })();

8 x 9'10 Hand Knotted Multi Color Geometric Fine Oushak Oriental Rug G9429

9 x 11'6 Hand Knotted Red Funky Oushak Oriental Rug Heriz G15286

9'9 x 14 Hand Knotted Gray William Morris Oushak Oriental Rug G12256

9'1 X 12'1 Hand Knotted Sky Blue Modern Abstract Oriental Rug With Silk G4303

9 x 12'2 Hand Knotted Ivory Modern Oushak Oriental Rug G17084

8'11 x 12'2 Hand Knotted Ivory Modern Oushak Oriental Rug G17083

12 x 15'1 Hand Knotted Gray Modern Oushak Oriental Rug G17082

1'1"x1'1" Ivory Hand Knotted Wool One Lot Pair of Modern Table Top Rugs R80495

1'10"x1'10" Ivory 100% Wool Hand Knotted Thick Chunky Texture Square Rug R87409

1'10"x1'10" Ivory Wool Hand Knotted Thick Chunky Texture, Square Rug R87410

1'10"x11' Red Vintage Zoroastrian Karjihooz Wool Hand Knotted Runner Rug 2608