// Sort by color: remember each card's color document.addEventListener('sezerium:variant:initialize', (event) => { const { el, variant } = event.detail; if (el && el.dataset && variant) el.dataset.kxColor = String(variant.option1 || '').toLowerCase(); }); // Sort by color (premium-styles): group cards by color (all black, then all olive, then all brown, ...) document.addEventListener('sezerium:js:unload', (event) => { const { collectionEl } = event.detail; if (!collectionEl || typeof SezeriumCollection === 'undefined') return; if (SezeriumCollection.handle !== 'premium-styles') return; // Respect a shopper's own sort choice if (new URLSearchParams(location.search).get('sort_by')) return; // Color groups in the order they should appear; edit this list to change the order const COLOR_ORDER = ['black', 'olive', 'green', 'brown', 'caramel', 'toffee', 'taupe', 'beige', 'sand', 'cream', 'white', 'grey', 'gray']; const rankOf = (color) => { const i = COLOR_ORDER.findIndex((k) => color.includes(k)); return i === -1 ? COLOR_ORDER.length : i; }; const colorByVariant = {}; (SezeriumCollection.products || []).forEach((p) => { (p.variants || []).forEach((v) => { colorByVariant[v.id] = String(v.option1 || '').toLowerCase(); }); }); const cards = Array.from(collectionEl.querySelectorAll('.sezerium-product')); if (!cards.length) return; // Find the level where every card sits in its own grid item let container = cards[0].parentElement; let items = null; while (container) { const list = cards.map((c) => { let n = c; while (n && n.parentElement !== container) n = n.parentElement; return n; }); if (list.every(Boolean) && new Set(list).size === list.length) { items = list; break; } container = container.parentElement; } if (!items) return; const entries = items.map((item, idx) => { const link = cards[idx].querySelector('a[href*="variant="]'); let id = null; if (link) { try { id = new URL(link.getAttribute('href'), location.origin).searchParams.get('variant'); } catch (e) { id = null; } } const color = cards[idx].dataset.kxColor || colorByVariant[id] || ''; return { item, idx, color, rank: rankOf(color) }; }); entries.sort((a, b) => a.rank - b.rank || a.color.localeCompare(b.color) || a.idx - b.idx); const marker = document.createComment(''); container.insertBefore(marker, items[0]); entries.forEach((e) => container.insertBefore(e.item, marker)); container.removeChild(marker); }); // Sort by color 2: rows of 4 in one color, every row a different color, best sellers first, families together, // a short row is filled with the same bag in another color. Per collection: 'lead' = number of best-selling cards at the very top (page 1, discounted cards included), // 'top' = tags whose products come next (in this order), 'distinct' = bag families whose rows hold 4 different colors, 'together' = bag families that stay together in their own rows, // 'mixTypes' = bags, wallets and charms share a row (same color), 'rowPrice' = inside each row the price goes from low to high. // Sales snapshot: Shopify net sales 26 Aug - 4 Nov 2026; VIEWS (GA4 product views 5 Oct - 4 Nov) rank new styles that have no sales yet. // Rows are ranked by the sales of their 4 best cards. Page 1: discounted cards go to the end of the page (except the lead cards). document.addEventListener('sezerium:js:unload', (event) => { const { collectionEl } = event.detail; if (!collectionEl || typeof SezeriumCollection === 'undefined') return; const TAGS = ['2701', '2605']; const CONFIG = { 'herbst-winter-kollektion': { top: '', distinct: [], together: [] }, 'alle-taschen': { lead: 8, top: TAGS, distinct: ['roros'], together: ['vaala', 'nibe'] }, 'new-in': { top: '2701', distinct: [], together: [] }, 'bestsellers': { top: '', distinct: [], together: [] }, 'crossbody-bag': { lead: 8, top: TAGS, distinct: [], together: [] }, 'beuteltaschen-hobo': { lead: 8, top: TAGS, distinct: [], together: [] }, 'cozy-and-stylish': { lead: 8, top: TAGS, distinct: [], together: [] }, 'shopper': { lead: 4, top: TAGS, distinct: [], together: [] }, 'handtaschen': { lead: 4, top: TAGS, distinct: [], together: [] }, 'schultertaschen': { lead: 4, top: TAGS, distinct: [], together: [] }, 'holiday-looks': { top: TAGS, distinct: [], together: [] }, 'geschenkideen': { top: TAGS, distinct: [], together: [], mixTypes: true, rowPrice: true }, 'winter-office-bags': { lead: 8, top: TAGS, distinct: [], together: [] } }; // Bag pages with the same rules: 2701 first, then 2605, rows by color ['aw26', 'autumn-mood', 'baguette-taschen', 'bags', 'bf2026-selection', 'browns', 'greys', 'uni-bags', 'city-stroll', 'clutches', 'denim-bags', 'everyday-essentials', 'festive-bags', 'glossy-shiny', 'halloween-ready', 'items-under-49', 'night-out-essentials', 'office-essentials', 'office-bags', 'olgas-pick', 'party-bags', 'reptile-collection', 'taschen-in-suede-optik', 'wiesn-taschen', 'work-bags', 'sport-bags', 'september-edit-occassion-bags', 'bags-under-69', 'bags-under-89', 'pre-spring-27', 'accessories', 'travel-essentials'].forEach((h) => { CONFIG[h] = { top: TAGS, distinct: [], together: [] }; }); const cfg = CONFIG[SezeriumCollection.handle]; if (!cfg) return; // Respect a shopper's own sort choice if (new URLSearchParams(location.search).get('sort_by')) return; const ROW = 4; // cards per row const tops = [].concat(cfg.top || []).filter(Boolean); // tags whose products come first, in this order // 'bag|color': [net sales, items sold]; refresh this list to update the ranking const SALES = {"rena midi hobo|dark brown":[2407.75,37],"rena midi hobo|grey":[1701.35,26],"nelma tulip shopper|dark brown":[1144.63,16],"nelma mini tote|dark brown":[857.61,15],"hamina handbag|cream":[577.41,9],"nelma hobo|dark brown":[491.06,8],"joensuu handbag|chestnut":[444.55,7],"huuvari hobo|black":[389.41,6],"vaala bowling bag|bottle green":[355.49,7],"rena midi hobo|fudgy caramel":[328.99,5],"rena handbag|dark brown":[298.99,5],"loimaa handbag|dark brown":[281.96,5],"vaala bowling bag|black":[266.79,5],"nelma east-west shoulderbag|dark brown":[241.02,3],"nelma tulip shopper|black":[241.0,3],"nibe shoulderbag|sweet caramel":[234.99,4],"loimaa shoulderbag|dark brown":[226.65,3],"evenes halfmoon bag|silver":[199.71,4],"joensuu handbag|black":[187.99,3],"vaala shopper|happy dots":[178.93,3],"nelma handbag|dark brown":[174.57,3],"vaala bowling bag|dotty dalmatian":[158.6,3],"nibe hobo|sweet caramel":[157.89,2],"lilla edet top handle bag|black":[152.72,3],"nelma hobo|black":[151.1,3],"nelma handbag|black":[134.28,2],"nelma midi hobo|dark brown":[134.28,2],"hamina handbag|light pink":[134.28,2],"liljendal shoulderbag|black":[127.57,2],"huuvari hobo|butter-lemon":[127.57,2],"nibe shoulderbag|black":[120.85,2],"sande case|black":[120.85,2],"loimaa handbag|light grey":[117.48,2],"nelma mini tote|light grey":[117.48,3],"sande clutch|beige":[111.61,2],"ylva wallet|silver":[100.32,6],"nibe crossbag|olive":[99.86,2],"grenaa mini tote|grey":[95.64,2],"rena shoulderbag|fudgy caramel":[89.9,1],"lainio hobo|khaki":[89.9,1],"hallila pouch|silver":[83.95,1],"lilleby hobo|reptile black":[79.9,1],"seljord crossbag|black":[79.9,1],"lilla ro big crossbody|light sand":[75.55,1],"lainio shoulderbag|black":[75.55,1],"loimaa shopper|dark brown":[75.55,1],"meloy hobo|soft cream":[75.55,1],"rena shopper|dark brown":[75.55,2],"rena shopper|grey":[75.55,2],"sundby shopper|black":[75.55,1],"joensuu bucket|chestnut":[75.55,1],"sande hobo|denim":[75.55,2],"lainio hobo|black":[75.55,1],"smilla long wallet|olive":[72.87,3],"joensuu office bag|black":[71.36,1],"smilla long wallet|soft cream":[70.36,3],"sundby saddle|jelly mint":[69.9,1],"herlev shoulderbag|silver":[67.99,1],"roros east-west|denim in blue":[67.99,1],"sundby shopper|cloud":[67.99,1],"sandve midi hobo|black":[67.99,1],"sundby hobo|tulle pink":[67.14,1],"deje shoulderbag|black":[67.14,1],"roros|dotty dalmatian":[60.43,1],"meloy shoulderbag|olive":[60.42,1],"sandve saddle|cream":[58.74,1],"floro crossbag|black&white":[58.74,1],"vaala tote|black":[58.74,1],"huuvari crossbag|denim in blue":[58.74,1],"loviisa east-west-shoulderbag|cool taupe":[58.74,1],"sande clutch|black":[58.74,1],"alunda shoulderbag|cream":[57.06,1],"fyn pouch|light blue":[53.71,1],"nibe crossbag|black":[52.87,1],"vaala mini tote|happy dots":[50.34,1],"ylva wallet|glossy black":[50.16,3],"ylva wallet|tulle pink":[48.49,3],"rena handbag|grey":[46.99,1],"lainio crossbag|grey":[44.45,1],"grenaa mini tote|black":[32.21,1],"vaala mini tote|lilac":[28.45,1],"smilla long wallet|sea salt blue":[25.13,1],"smilla long wallet|khaki":[25.13,1],"ebba|denim in blue":[19.59,1],"heart to heart charm|cloudy beige":[18.22,2],"nibe hobo|black":[15.11,0],"vaala mini tote|black":[11.82,0],"loviisa small crossbody|cool taupe":[11.16,0],"roros top handle|chestnut":[3.39,1],"my teddy|dark chocolate":[0.64,1],"joensuu bucket|light grey":[0.0,2],"nelma midi hobo|light grey":[0.0,1],"joensuu office bag|chestnut":[0.0,1],"roros|mystic purple":[0.0,1],"loimaa shoulderbag|light grey":[0.0,3],"nelma handbag|light grey":[0.0,2],"lainio shoulderbag|khaki":[0.0,1],"roros east-west|dotty dalmatian":[0.0,1]}; // 'bag': product views (GA4) of styles without sales yet; used only to rank them const VIEWS = {"liminka hobo":7,"karjaa handbag":3,"liminka shoulderbag with pockets":3,"karjaa shoulderbag":2,"letje hobo":2,"letje small handbag":2,"sunne mini handbag":2,"sunne shopper":2,"roros mirror":1}; // Colors that share a row (the first match wins); any other color is its own group const GROUPS = [['black', /black/], ['brown', /brown/], ['caramel', /caramel|toffee/], ['grey', /gr[ae]y/], ['green', /green|olive/], ['cream', /cream|white|ivory/], ['beige', /beige|sand|taupe/], ['pink', /pink/], ['purple', /purple|lilac/]]; const groupOf = (color) => { const g = GROUPS.find((x) => x[1].test(color)); return g ? g[0] : color; }; const famOf = (title) => String(title || '').trim().split(/\s+/)[0].toLowerCase(); const famScore = {}; Object.keys(SALES).forEach((k) => { const f = famOf(k.split('|')[0]); famScore[f] = (famScore[f] || 0) + SALES[k][0]; }); Object.keys(VIEWS).forEach((t) => { const f = famOf(t); famScore[f] = (famScore[f] || 0) + VIEWS[t] * 0.001; }); const byHandle = {}; const colorByVariant = {}; const saleByVariant = {}; const priceByVariant = {}; (SezeriumCollection.products || []).forEach((p) => { byHandle[p.handle] = p; (p.variants || []).forEach((v) => { colorByVariant[v.id] = String(v.option1 || '').toLowerCase(); saleByVariant[v.id] = parseFloat(v.compareAtPrice) > parseFloat(v.price); priceByVariant[v.id] = parseFloat(v.price) || 0; }); }); const cards = Array.from(collectionEl.querySelectorAll('.sezerium-product')); if (!cards.length) return; // Find the level where every card sits in its own grid item let container = cards[0].parentElement; let gridItems = null; while (container) { const list = cards.map((c) => { let n = c; while (n && n.parentElement !== container) n = n.parentElement; return n; }); if (list.every(Boolean) && new Set(list).size === list.length) { gridItems = list; break; } container = container.parentElement; } if (!gridItems) return; const items = cards.map((card, idx) => { const productLink = card.querySelector('a[href*="/products/"]'); const m = productLink && productLink.getAttribute('href').match(/\/products\/([^\/?#]+)/); const p = m && byHandle[m[1]]; const variantLink = card.querySelector('a[href*="variant="]'); let id = null; if (variantLink) { try { id = new URL(variantLink.getAttribute('href'), location.origin).searchParams.get('variant'); } catch (e) { id = null; } } const color = card.dataset.kxColor || colorByVariant[id] || ''; const title = p ? String(p.title || '') : ''; const s = SALES[title.toLowerCase() + '|' + color]; const ptags = p ? (p.tags || []).map((t) => String(t).trim()) : []; let tier = tops.findIndex((t) => ptags.indexOf(t) > -1); if (tier < 0) tier = tops.length; return { idx, title, color, fam: famOf(title), group: groupOf(color), score: s ? s[0] + s[1] * 0.01 : (VIEWS[title.toLowerCase()] || 0) * 0.001, tier, sale: !!saleByVariant[id], kind: p ? String(p.type || '') : '', price: priceByVariant[id] || 0 }; }); const rowScore = (r) => r.reduce((sum, it) => sum + it.score, 0); const take = (pool, pred) => { const i = pool.findIndex(pred); return i > -1 ? pool.splice(i, 1)[0] : null; }; // One section: rows of 4, full rows first and a short row last. plain = only color rows ranked by card sales (no family rules); startPrev = color of the row above const arrangeSection = (list, plain, startPrev) => { const rows = []; let rest = list.slice(); // Bag families whose rows hold 4 different colors (plain ? [] : cfg.distinct).forEach((fam) => { const cand = rest.filter((it) => it.fam === fam).sort((a, b) => b.score - a.score || a.idx - b.idx); const used = new Set(); for (;;) { const left = cand.filter((it) => !used.has(it)); if (new Set(left.map((it) => it.color)).size < ROW) break; // Start with the bag that still has the most different colors, fill with the other bags const byTitle = {}; left.forEach((it) => { (byTitle[it.title] = byTitle[it.title] || []).push(it); }); const titles = Object.keys(byTitle).sort((a, b) => new Set(byTitle[b].map((x) => x.color)).size - new Set(byTitle[a].map((x) => x.color)).size || byTitle[b].length - byTitle[a].length); const row = []; const seen = new Set(); titles.forEach((t) => byTitle[t].forEach((it) => { if (row.length < ROW && !seen.has(it.color)) { row.push(it); seen.add(it.color); } })); if (row.length < ROW) break; row.forEach((it) => used.add(it)); row.block = 'distinct-' + fam; rows.push(row); } rest = rest.filter((it) => !used.has(it)); }); // Bag families that stay together: rows of 4 from one family; what is left of a family becomes one short row const tails = []; (plain ? [] : cfg.together).forEach((fam) => { const cand = rest.filter((it) => it.fam === fam); if (!cand.length) return; const bagScore = {}; cand.forEach((it) => { bagScore[it.title] = (bagScore[it.title] || 0) + it.score; }); cand.sort((a, b) => bagScore[b.title] - bagScore[a.title] || (a.title < b.title ? -1 : a.title > b.title ? 1 : 0) || b.score - a.score || a.idx - b.idx); const n = cand.length - (cand.length % ROW); for (let i = 0; i < n; i += ROW) { const r = cand.slice(i, i + ROW); r.block = 'together-' + fam; rows.push(r); } if (cand.length > n) tails.push({ fam, cards: cand.slice(n) }); rest = rest.filter((it) => it.fam !== fam); }); // Color groups ranked by the sales of their 4 best cards; families together (best-selling family and bag first), or in plain mode the best-selling cards first const groups = {}; rest.forEach((it) => { (groups[it.group] = groups[it.group] || { name: it.group, items: [], score: 0, first: it.idx }).items.push(it); }); const ranked = Object.values(groups); ranked.forEach((g) => { if (plain) g.items.sort((a, b) => b.score - a.score || a.idx - b.idx); else if (cfg.mixTypes) { // bags, wallets and charms take turns, so a row of one color holds different kinds const kinds = {}; g.items.slice().sort((a, b) => b.score - a.score || a.idx - b.idx).forEach((it) => { (kinds[it.kind] = kinds[it.kind] || []).push(it); }); const buckets = Object.keys(kinds).map((k) => kinds[k]).sort((a, b) => b.length - a.length); const mixed = []; while (buckets.some((b) => b.length)) buckets.forEach((b) => { if (b.length) mixed.push(b.shift()); }); g.items = mixed; } else g.items.sort((a, b) => (famScore[b.fam] || 0) - (famScore[a.fam] || 0) || (a.fam < b.fam ? -1 : a.fam > b.fam ? 1 : 0) || b.score - a.score || a.idx - b.idx); g.score = g.items.slice(0, ROW).reduce((sum, it) => sum + it.score, 0); }); ranked.sort((a, b) => b.score - a.score || a.first - b.first); // A short row of a together-family is filled with cards of the same color as its first card tails.forEach((t) => { const g = ranked.find((x) => x.name === t.cards[0].group); while (g && t.cards.length < ROW && g.items.length) t.cards.push(g.items.pop()); }); // Full rows of one color; what is left over of each color goes to a pool const pool = []; ranked.forEach((g) => { const n = g.items.length - (g.items.length % ROW); for (let i = 0; i < n; i += ROW) { const r = g.items.slice(i, i + ROW); r.block = g.name; rows.push(r); } g.items.slice(n).forEach((it) => pool.push(it)); }); // Short rows: lead with the best-selling leftover; fill with the same bag, then the same family, then the same color, then the next best pool.sort((a, b) => b.score - a.score || a.idx - b.idx); tails.forEach((t) => { const row = t.cards.slice(); while (row.length < ROW && pool.length) row.push(take(pool, (p) => row.some((c) => c.group === p.group)) || pool.shift()); row.block = 'together-' + t.fam; rows.push(row); }); while (pool.length) { const row = [pool.shift()]; while (row.length < ROW && pool.length) { const last = row[row.length - 1]; row.push(take(pool, (p) => p.title === last.title) || take(pool, (p) => p.fam === last.fam) || take(pool, (p) => p.group === last.group) || pool.shift()); } rows.push(row); } // Every row changes color: take the best-selling row whose color differs from the row above; a short last row stays last const full = rows.filter((r) => r.length === ROW); const short = rows.filter((r) => r.length < ROW); const queues = {}; full.forEach((r) => { const key = r.block || 'mixed'; (queues[key] = queues[key] || []).push(r); }); const lists = Object.keys(queues).map((k) => queues[k]); const out = []; let prev = startPrev || null; let forced = null; while (lists.some((l) => l.length)) { const heads = lists.filter((l) => l.length); const diff = heads.filter((l) => (l[0].block || 'mixed') !== prev); const from = forced || (diff.length ? diff : heads).slice().sort((a, b) => rowScore(b[0]) - rowScore(a[0]))[0]; const r = from.shift(); out.push(r); prev = r.block || 'mixed'; // rows of a family that stays together follow each other forced = prev.indexOf('together-') === 0 && from.length ? from : null; } short.forEach((r) => out.push(r)); return out; }; // Page 1: the lead rows (best sellers, discounted ones too) come first; discounted cards go to the end of the page; the rest: one section per top tag in order, then the others const page = parseInt(new URLSearchParams(location.search).get('page') || '1', 10) || 1; let leadRows = []; if (page === 1 && cfg.lead) leadRows = arrangeSection(items, true).filter((r) => r.length === ROW).slice(0, Math.floor(cfg.lead / ROW)); const leadSet = new Set(); leadRows.forEach((r) => r.forEach((it) => leadSet.add(it))); const others = items.filter((it) => !leadSet.has(it)); const regular = others.filter((it) => page > 1 || !it.sale); const onSale = others.filter((it) => page === 1 && it.sale); const sections = []; for (let t = 0; t <= tops.length; t++) sections.push(regular.filter((it) => it.tier === t)); const fillFrom = (row, pool) => { while (row.length < ROW && pool.length) { const last = row[row.length - 1]; row.push(take(pool, (p) => p.title === last.title) || take(pool, (p) => p.fam === last.fam) || take(pool, (p) => p.group === last.group) || pool.shift()); } }; let main = leadRows.slice(); let startPrev = leadRows.length ? leadRows[leadRows.length - 1].block : null; sections.forEach((sec, i) => { const rows = arrangeSection(sec, false, startPrev); if (rows.length) startPrev = null; const last = rows[rows.length - 1]; // a short last row is filled from the best of the sections that follow if (last && last.length < ROW && i < sections.length - 1) { const next = [].concat.apply([], sections.slice(i + 1)); next.sort((a, b) => b.score - a.score || a.idx - b.idx); fillFrom(last, next); for (let j = i + 1; j < sections.length; j++) sections[j] = sections[j].filter((it) => next.indexOf(it) > -1); } main = main.concat(rows); }); const lastMain = main[main.length - 1]; if (lastMain && lastMain.length < ROW) { onSale.sort((a, b) => b.score - a.score || a.idx - b.idx); fillFrom(lastMain, onSale); } const out = main.concat(arrangeSection(onSale, false, null)); // Inside each row the price goes from low to high if (cfg.rowPrice) out.forEach((r) => r.sort((a, b) => a.price - b.price || a.idx - b.idx)); const marker = document.createComment(''); container.insertBefore(marker, gridItems[0]); out.forEach((r) => r.forEach((it) => container.insertBefore(gridItems[it.idx], marker))); container.removeChild(marker); });

Suchen