// THE EPIZODE — catalog page (Каталог). // (rev: ВАРИАНТ 02 — фото 4/5, кампейн справа 2 ряда. ЗАФИКСИРОВАНО, не менять.) // Grid of all ARTICLES (7 SKUs), grouped/filterable by episode. function EpzCatalogPage() { const F = EPZ_FONTS; useEpzLang(); const articles = epzHomeShowcase(); const [theme, setTheme, T] = useEpzTheme(); const store = useEpzStore(); const [addToast, setAddToast] = React.useState(null); function handleWishToast(id) { if (store.wish.includes(id)) { store.toggleWish(id); epzWishSizeSet(id, null); return; } const a = epzHomeShowcase().find((x) => (x.wishId || x.id) === id) || epzArticle(id); epzWishAdd(a || { id }); } // Quick-add from catalog: ONE SIZE / no-choice items drop straight into cart; // anything needing a size or variant opens its product page to choose. function quickAdd(a, size) { const cs = size || (a.sizes && a.sizes.length === 1 ? a.sizes[0] : null); if (!cs) return; // Bundle of two garments — add each part (picked size applies to the part without its own). if (a.isBundle && a.bundleParts) { a.bundleParts.forEach((p) => { store.addToCart(p.id, { variant: p.variant || null, size: p.size || cs, qty: 1 }); }); setAddToast(`${a.short || a.title} · ${cs} — в корзине`); setTimeout(() => setAddToast(null), 2600); return; } // Pyjama "set"/variant — add with its variant. if (a.cartVariant) { store.addToCart(a.cartId || a.id, { variant: a.cartVariant, size: cs, qty: 1 }); setAddToast(`${a.short || a.title} · ${cs} — в корзине`); setTimeout(() => setAddToast(null), 2600); return; } store.addToCart(a.cartId || a.id, { variant: null, size: cs, qty: 1 }); setAddToast(`${a.short || a.title} · ${cs} — в корзине`); setTimeout(() => setAddToast(null), 2600); } // Filters const [episodeFilter, setEpisodeFilter] = React.useState('all'); const [fabricFilter, setFabricFilter] = React.useState('all'); const [catFilter, setCatFilter] = React.useState('all'); const [sort, setSort] = React.useState('price-desc'); const [view, setView] = React.useState('grid'); // grid | list const gridRef = React.useRef(null); const filterBarRef = React.useRef(null); // Фильтр-бар статичный — не преследует при скролле (по просьбе). let filtered = articles.slice(); if (episodeFilter !== 'all') filtered = filtered.filter((a) => a.episode === episodeFilter); if (fabricFilter !== 'all') filtered = filtered.filter((a) => a.fabric.toLowerCase().includes(fabricFilter)); if (catFilter !== 'all') filtered = filtered.filter((a) => catCategory(a) === catFilter); filtered.sort((a, b) => { const pa = epzArticleFrom(a), pb = epzArticleFrom(b); if (sort === 'price-asc') return pa - pb; if (sort === 'price-desc') return pb - pa; return 0; }); const episodeChips = [['all', 'все эпизоды'], ...EPZ_EPISODES.map((e) => [e.id, epzT(e.title)])]; const fabricChips = [ ['all', 'все ткани'], ['шёлк', 'шёлк'], ['шерсть', 'шерсть'], ['вискоза', 'вискоза'], ]; const catChips = [ ['all', 'всё'], ['комплекты', 'комплекты'], ['платья', 'платья'], ['верх', 'топы'], ['низ', 'брюки'], ['тренч', 'тренч'], ['аксессуары', 'аксессуары'], ]; // Per-row title equalization: titles in each row of 3 get the same height so // descriptions below them line up. Robust replacement for CSS subgrid. React.useLayoutEffect(() => { const grid = gridRef.current; if (!grid) return; const equalize = () => { const cols = getComputedStyle(grid).gridTemplateColumns.split(' ').length || 3; // Equalize both titles and descriptions per row so the divider line above // «ткань» sits at the same level across each row, with no extra air. ['.cat-meta'].forEach((sel) => { const els = [...grid.querySelectorAll(sel)]; els.forEach((t) => { t.style.minHeight = ''; }); for (let i = 0; i < els.length; i += cols) { const row = els.slice(i, i + cols); const max = Math.max(...row.map((t) => t.offsetHeight)); row.forEach((t) => { t.style.minHeight = max + 'px'; }); } }); }; equalize(); const t = setTimeout(equalize, 250); if (document.fonts && document.fonts.ready) document.fonts.ready.then(equalize); window.addEventListener('resize', equalize); return () => { clearTimeout(t); window.removeEventListener('resize', equalize); }; }, [filtered.length, view, episodeFilter, fabricFilter, catFilter, theme]); return (
{/* breadcrumb */} {/* ═════════════ FILTER BAR ═════════════ */}
{[['grid', 'сетка'], ['list', 'список']].map(([v, lbl]) => ( ))}
{/* ═════════════ RESULTS COUNT ═════════════ */}
{epzT('результат')} · {filtered.length} {epzIsEN() ? (filtered.length === 1 ? 'item' : 'items') : plural(filtered.length, 'изделие', 'изделия', 'изделий')} {(episodeFilter !== 'all' || fabricFilter !== 'all' || catFilter !== 'all') && ( )}
{/* ═════════════ GRID / LIST ═════════════ */} {filtered.length === 0 ? (
{epzT('Упс, по этим фильтрам ничего нет')}
{(() => { // Ближайшие к выбранным фильтрам: считаем совпадения по каждому активному фильтру const score = (a) => { let s = 0; if (episodeFilter !== 'all' && a.episode === episodeFilter) s += 1; if (fabricFilter !== 'all' && a.fabric.toLowerCase().includes(fabricFilter)) s += 1; if (catFilter !== 'all' && catCategory(a) === catFilter) s += 1; return s; }; const near = articles.slice().map((a) => [a, score(a)]).filter(([, s]) => s > 0) .sort((x, y) => y[1] - x[1]).map(([a]) => a); if (!near.length) return null; return (
{epzT('Вам может понравиться')}
{near.map((a) => ( ))}
); })()}
) : view === 'grid' ? (
{(() => { const isFull = filtered.length === articles.length; // big photos only on the unfiltered view const bigPhoto = (key, href, ep, label, colRow) => (
[ {epzT('кампейн-фото')} ]
{epzT(ep)}
{epzT(label)}
{epzT('смотреть эпизод →')}
 ); const els = []; if (isFull) { // BIG 1 — right, rows 1–2. BIG 2 — left, rows 4–5. els.push(bigPhoto('big-1', '/product/?id=002-1', epzT('Эпизод') + ' 002', epzT('Эльвира'), { col: '3 / span 2', row: '1 / span 2' })); els.push(bigPhoto('big-2', '/product/?id=001-set', epzT('Эпизод') + ' 001', epzT('Катрин'), { col: '1 / span 2', row: '4 / span 2' })); } filtered.forEach((a, i) => { els.push( ); }); return els; })()}
) : (
{filtered.map((a) => )}
)}
); } function plural(n, one, few, many) { const m10 = n % 10, m100 = n % 100; if (m10 === 1 && m100 !== 11) return one; if (m10 >= 2 && m10 <= 4 && (m100 < 10 || m100 >= 20)) return few; return many; } // ─── Category of a showcase card (комплекты first, then платья, ...) ───────── function catCategory(a) { if (a.bundleSave || a.isBundle) return 'комплекты'; if (a.type === 'Тренч') return 'тренч'; if (a.type === 'Платок') return 'аксессуары'; if (/^Топ/.test(a.title)) return 'верх'; if (/^Брюки/.test(a.title)) return 'низ'; if ((a.type || '').toLowerCase().includes('платье')) return 'платья'; return 'другое'; } // ─── Filter chip group ─────────────────────────────────────────────────────── function ChipGroup({ label, value, setValue, options, T }) { const F = EPZ_FONTS; return (
{epzT(label)}
{options.map(([key, lbl]) => { const active = value === key; return ( ); })}
); } // ─── Catalog card (article) ────────────────────────────────────────────────── function CatalogCard({ a, T, variant, position = {}, wished = false, onWish, onAdd, hideEpisode = false }) { const F = EPZ_FONTS; const ep = epzEpisode(a.episode); const img = epzArticleImage(a); const href = a.href || `/product/?id=${a.id}`; const priceLabel = a.priceLabel || epzArticlePriceLabel(a); const [infoOpen, setInfoOpen] = React.useState(false); const [sizeOpen, setSizeOpen] = React.useState(false); const sizes = a.sizes || ['ONE SIZE']; const oneSize = sizes.length === 1; // Пижамные комплекты: размер топа и брюк выбирается отдельно const setParts = React.useMemo(() => { if (!a.bundleParts) return null; const parts = a.bundleParts.map((p) => { const pa = (typeof EPZ_ARTICLES !== 'undefined' && EPZ_ARTICLES.find((x) => x.id === p.id)) || {}; const label = p.variant === 'top' ? 'топ' : p.variant === 'bottom' ? 'брюки' : (pa.type || 'вещь').toLowerCase(); const psizes = p.size ? [p.size] : pa.sizes || ['ONE SIZE']; return { ...p, label, psizes, fixed: psizes.length === 1 }; }); return parts.filter((p) => !p.fixed).length > 1 ? parts : null; }, [a]); const [selParts, setSelParts] = React.useState({}); function pickPartSize(e, i, s) { e.preventDefault(); e.stopPropagation(); const next = { ...selParts, [i]: s }; setSelParts(next); if (setParts.every((p, k) => p.fixed || next[k])) { setParts.forEach((p, k) => epzAddToCart(p.id, { variant: p.variant || null, size: p.fixed ? p.psizes[0] : next[k], qty: 1 })); try { epzToast(`${epzT(a.short || a.title)} — ${epzT('в корзине')}`); } catch (err) {} setTimeout(() => setSelParts({}), 1600); setSizeOpen(false); } } const partSizeRows = (align) => (
{setParts.filter((p) => !p.fixed).map((p) => { const i = setParts.indexOf(p); return (
{epzT(p.label)} {p.psizes.map((s) => ( ))}
); })}
); function handleCart(e) { e.preventDefault(); e.stopPropagation(); // bundle / variant → product page; one-size → add now; else open size popover if (a.isBundle || a.cartVariant) { window.location.href = a.href || `/product/?id=${a.id}`; return; } if (oneSize) { onAdd && onAdd(a, sizes[0]); return; } setSizeOpen((v) => !v); } function pickSize(e, s) { e.preventDefault(); e.stopPropagation(); onAdd && onAdd(a, s); setSizeOpen(false); } const cartBtn = (compact) => ( {sizeOpen && !oneSize && ( { e.preventDefault(); e.stopPropagation(); }} style={{ position: 'absolute', bottom: '120%', right: 0, zIndex: 25, background: T.bg, color: T.text, border: `1px solid ${T.accent}`, boxShadow: '0 16px 44px rgba(0,0,0,0.22)', padding: 10, display: 'flex', gap: 6, whiteSpace: 'nowrap', }}> {sizes.map((s) => ( ))} )} ); function toggleInfo(e) { e.preventDefault(); e.stopPropagation(); setInfoOpen((v) => !v); } // Popover explaining the bundle saving. const bundleInfo = a.bundleSave ? ( {infoOpen && ( { e.preventDefault(); e.stopPropagation(); }} style={{ position: 'absolute', bottom: '140%', right: -8, zIndex: 20, width: 244, background: T.bg, color: T.text, border: `1px solid ${T.accent}`, boxShadow: '0 18px 50px rgba(0,0,0,0.25)', padding: '14px 16px', textAlign: 'left', }}> {epzT('чек комплекта')} {(a.bundleItems || []).map(([lbl, p]) => ( {lbl}{p.toLocaleString('ru-RU')} ))} итого порознь{a.bundleFull.toLocaleString('ru-RU')} комплектом{a.price.toLocaleString('ru-RU')} )} ) : null; function handleWish(e) { e.preventDefault(); e.stopPropagation(); if (onWish) onWish(a.id); } const heart = ( ); if (variant === 'list') { return (
{img ? (
) : ( )} {heart}
{epzT(a.title)}
{a.bundleSave ? `${epzT('Полный образ')} · ${epzT(a.fabric)}` : epzT(a.fabric)}
{epzT('размер · в корзину')}
{setParts ? partSizeRows('flex-end') : (
{(a.sizes || ['ONE SIZE']).map((s) => ( ))}
)}
{a.bundleSave ? ( <>
{priceLabel}
) : ( <>
{priceLabel}
)}
{epzT('Подробнее')} →
); } // Hover sizes layer — replaces the name/price block on hover (sits over content area). // Always just size buttons (ONE SIZE shows as a single pill). const hoverSizes = (
{epzT('выберите размер')}
{setParts ? partSizeRows() : (
{sizes.map((s) => ( ))}
)}
); // Grid return ( {/* image — если задан a.catalogCover (кампейн-фото), обложка = кампейн (cover), обтравка показывается при наведении */} {img ? ( a.catalogCover ? (