const { resolveComponent: _resolveComponent, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, createTextVNode: _createTextVNode, createElementBlock: _createElementBlock, normalizeClass: _normalizeClass, renderList: _renderList, Fragment: _Fragment, resolveDynamicComponent: _resolveDynamicComponent, withCtx: _withCtx, createVNode: _createVNode, defineComponent: _defineComponent, computed, nextTick, onMounted, onUnmounted, ref, shallowRef, watch, watchEffect } = globalThis.Vue; const _hoisted_1 = { class: "ps-product-list min-w-0 text-neutral-900" } const _hoisted_2 = { key: 2, class: "mb-6 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:gap-4" } const _hoisted_3 = { key: 0, class: "text-sm text-neutral-600" } const _hoisted_4 = { class: "font-semibold text-neutral-900" } const _hoisted_5 = { class: "flex flex-wrap items-center gap-2" } const _hoisted_6 = { key: 0, class: "inline-flex rounded-lg border border-neutral-200 bg-neutral-50 p-0.5 text-xs font-medium", role: "group", "aria-label": "Liste görünümü" } const _hoisted_7 = { key: 3, class: "py-16 text-center text-sm text-neutral-500" } const _hoisted_8 = { key: 5, class: "py-16 text-center text-sm text-neutral-500" } const _hoisted_9 = { key: 6, class: "mt-10 flex flex-col items-center gap-4" } const _hoisted_10 = { class: "flex flex-wrap items-center justify-center gap-1.5" } const _hoisted_11 = { class: "text-xs text-neutral-500" } const _hoisted_12 = { class: "mt-10 flex justify-center" } const _hoisted_13 = { key: 8, ref: "infiniteScrollSentinel", class: "mt-6 h-8 w-full", "aria-hidden": "true" } const _hoisted_14 = { key: 9, class: "mt-4 text-center text-sm text-neutral-500" } const _hoisted_15 = { key: 0, class: "max-h-[65vh] space-y-4 overflow-y-auto text-left" } const _hoisted_16 = { key: 0, class: "aspect-4/3 overflow-hidden rounded-xl bg-neutral-100" } const _hoisted_17 = { class: "text-sm text-neutral-600" } function render(_ctx, _cache, $props, $setup, $data, $options) { const _component_UAlert = _resolveComponent("UAlert") const _component_USelect = _resolveComponent("USelect") const _component_UButton = _resolveComponent("UButton") const _component_ProductImageBlurUp = _resolveComponent("ProductImageBlurUp") const _component_NuxtLink = _resolveComponent("NuxtLink") const _component_UModal = _resolveComponent("UModal") return (_openBlock(), _createElementBlock("div", _hoisted_1, [ (!$setup.slugContext) ? (_openBlock(), _createBlock(_component_UAlert, { key: 0, color: "warning", variant: "subtle", title: "Liste bağlamı yoktur", description: "Ürün listesi yalnızca koleksiyon / marka / model sayfalarında çalışır" })) : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [ ($setup.errorText) ? (_openBlock(), _createBlock(_component_UAlert, { key: 0, color: "error", variant: "subtle", class: "mb-4", title: "Listeleme alınamadı", description: $setup.errorText }, null, 8 /* PROPS */, ["description"])) : _createCommentVNode("v-if", true), ($setup.effectiveSortPreset && $setup.effectiveSortPreset.apiReady === false) ? (_openBlock(), _createBlock(_component_UAlert, { key: 1, color: "warning", variant: "subtle", class: "mb-4", title: "Sıralama henüz aktif değil", description: "En Çok Değerlendirilen sıralaması için backend ekibinin comment_rank desteğini eklemesi gerekiyor. Şimdilik mağaza varsayılan sıralaması uygulanır." })) : _createCommentVNode("v-if", true), _createCommentVNode(" Toolbar "), ( $setup.toolbarCfg.showTotalCount === 'show' || $setup.toolbarCfg.showGridToggle === 'show' || $setup.toolbarCfg.showSortControl === 'show' ) ? (_openBlock(), _createElementBlock("div", _hoisted_2, [ ($setup.toolbarCfg.showTotalCount === 'show' && $setup.meta) ? (_openBlock(), _createElementBlock("p", _hoisted_3, [ _createElementVNode("span", _hoisted_4, _toDisplayString($setup.meta.totalItems), 1 /* TEXT */), _cache[8] || (_cache[8] = _createTextVNode(" ürün görüntüleniyor ", -1 /* CACHED */)) ])) : _createCommentVNode("v-if", true), _createElementVNode("div", _hoisted_5, [ ($setup.toolbarCfg.showGridToggle === 'show') ? (_openBlock(), _createElementBlock("div", _hoisted_6, [ _createElementVNode("button", { type: "button", class: _normalizeClass(["rounded-md px-3 py-1.5 transition", $setup.surfaceViewMode === 'detail' ? 'bg-white text-neutral-900 shadow-sm' : 'text-neutral-600']), onClick: _cache[0] || (_cache[0] = $event => ($setup.toggleGridView('detail'))) }, " Detaylı ", 2 /* CLASS */), _createElementVNode("button", { type: "button", class: _normalizeClass(["rounded-md px-3 py-1.5 transition", $setup.surfaceViewMode === 'gallery' ? 'bg-white text-neutral-900 shadow-sm' : 'text-neutral-600']), onClick: _cache[1] || (_cache[1] = $event => ($setup.toggleGridView('gallery'))) }, " Galeri ", 2 /* CLASS */) ])) : _createCommentVNode("v-if", true), ($setup.toolbarCfg.showSortControl === 'show') ? (_openBlock(), _createBlock(_component_USelect, { key: 1, modelValue: $setup.sortUiModel, "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => (($setup.sortUiModel) = $event)), class: "min-w-48", size: "sm", items: $setup.sortFieldItems, "label-key": "label", "value-key": "value" }, null, 8 /* PROPS */, ["modelValue", "items"])) : _createCommentVNode("v-if", true) ]) ])) : _createCommentVNode("v-if", true), ( ($setup.pending && !$setup.rawProducts.length) || ( $setup.slugContext && !$setup.rawProducts.length && !$setup.listingRouteAlignedWithSlugContext && !$setup.errorText ) ) ? (_openBlock(), _createElementBlock("div", _hoisted_7, " Ürünler yükleniyor… ")) : _createCommentVNode("v-if", true), _createCommentVNode(" Liste ızgarası: listingGrid (veya legacy layout.gridCols/gap) "), ($setup.displayProducts.length) ? (_openBlock(), _createElementBlock("div", { key: 4, class: _normalizeClass($setup.listingGridShellClasses) }, [ (_openBlock(true), _createElementBlock(_Fragment, null, _renderList($setup.displayProducts, (row) => { return (_openBlock(), _createElementBlock(_Fragment, { key: row.id }, [ ($setup.ProductCardComp) ? (_openBlock(), _createBlock(_resolveDynamicComponent($setup.ProductCardComp), { key: 0, product: row, "card-cfg": $setup.cardCfg, "quick-cfg": $setup.quickCfg, config: $setup.P.productCardConfig || $setup.cfg, settings: $props.settings, "surface-view-mode": $setup.surfaceViewMode, "listing-image-primary": $setup.listingImagePrimary, "filter-state": $setup.filterState }, null, 8 /* PROPS */, ["product", "card-cfg", "quick-cfg", "config", "settings", "surface-view-mode", "listing-image-primary", "filter-state"])) : _createCommentVNode("v-if", true) ], 64 /* STABLE_FRAGMENT */)) }), 128 /* KEYED_FRAGMENT */)) ], 2 /* CLASS */)) : (!$setup.pending && !$setup.errorText && $setup.listingRouteAlignedWithSlugContext) ? (_openBlock(), _createElementBlock("p", _hoisted_8, " Bu filtrelere uygun ürün yok. ")) : _createCommentVNode("v-if", true), _createCommentVNode(" Sayfalama: paginated "), ($setup.paginationType === 'paginated' && $setup.meta && $setup.meta.totalPages > 1 && $setup.displayProducts.length) ? (_openBlock(), _createElementBlock("div", _hoisted_9, [ _createElementVNode("div", _hoisted_10, [ ($setup.showPaginationFirstJump) ? (_openBlock(), _createBlock(_component_UButton, { key: 0, size: "sm", color: "neutral", variant: "ghost", disabled: $setup.pending, "aria-label": "İlk sayfa", onClick: _cache[3] || (_cache[3] = $event => ($setup.goToPage(1))) }, { default: _withCtx(() => [...(_cache[9] || (_cache[9] = [ _createTextVNode(" « ", -1 /* CACHED */) ]))]), _: 1 /* STABLE */ }, 8 /* PROPS */, ["disabled"])) : _createCommentVNode("v-if", true), _createVNode(_component_UButton, { size: "sm", color: "neutral", variant: "outline", disabled: $setup.pending || $setup.meta.page <= 1, onClick: _cache[4] || (_cache[4] = $event => ($setup.bumpPage(-1))) }, { default: _withCtx(() => [...(_cache[10] || (_cache[10] = [ _createTextVNode(" Önceki ", -1 /* CACHED */) ]))]), _: 1 /* STABLE */ }, 8 /* PROPS */, ["disabled"]), (_openBlock(true), _createElementBlock(_Fragment, null, _renderList($setup.visiblePageNumbers, (pageNum) => { return (_openBlock(), _createBlock(_component_UButton, { key: pageNum, size: "sm", color: pageNum === $setup.meta.page ? 'primary' : 'neutral', variant: pageNum === $setup.meta.page ? 'solid' : 'outline', disabled: $setup.pending, onClick: $event => ($setup.goToPage(pageNum)) }, { default: _withCtx(() => [ _createTextVNode(_toDisplayString(pageNum), 1 /* TEXT */) ]), _: 2 /* DYNAMIC */ }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["color", "variant", "disabled", "onClick"])) }), 128 /* KEYED_FRAGMENT */)), _createVNode(_component_UButton, { size: "sm", color: "neutral", variant: "outline", disabled: $setup.pending || $setup.meta.page >= $setup.meta.totalPages, onClick: _cache[5] || (_cache[5] = $event => ($setup.bumpPage(1))) }, { default: _withCtx(() => [...(_cache[11] || (_cache[11] = [ _createTextVNode(" Sonraki ", -1 /* CACHED */) ]))]), _: 1 /* STABLE */ }, 8 /* PROPS */, ["disabled"]), ($setup.showPaginationLastJump) ? (_openBlock(), _createBlock(_component_UButton, { key: 1, size: "sm", color: "neutral", variant: "ghost", disabled: $setup.pending, "aria-label": "Son sayfa", onClick: _cache[6] || (_cache[6] = $event => ($setup.goToPage($setup.meta.totalPages))) }, { default: _withCtx(() => [...(_cache[12] || (_cache[12] = [ _createTextVNode(" » ", -1 /* CACHED */) ]))]), _: 1 /* STABLE */ }, 8 /* PROPS */, ["disabled"])) : _createCommentVNode("v-if", true) ]), _createElementVNode("p", _hoisted_11, " Sayfa " + _toDisplayString($setup.meta.page) + " / " + _toDisplayString($setup.meta.totalPages), 1 /* TEXT */) ])) : ($setup.paginationType === 'load-more' && $setup.canLoadMore && $setup.displayProducts.length) ? (_openBlock(), _createElementBlock(_Fragment, { key: 7 }, [ _createCommentVNode(" Daha fazla göster "), _createElementVNode("div", _hoisted_12, [ _createVNode(_component_UButton, { size: "md", color: "neutral", variant: "outline", loading: $setup.pending, disabled: $setup.pending, onClick: $setup.handleLoadMoreClick }, { default: _withCtx(() => [...(_cache[13] || (_cache[13] = [ _createTextVNode(" Daha fazla ürün göster ", -1 /* CACHED */) ]))]), _: 1 /* STABLE */ }, 8 /* PROPS */, ["loading", "disabled"]) ]) ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)) : _createCommentVNode("v-if", true), _createCommentVNode(" Sonsuz scroll gözlemcisi "), ($setup.paginationType === 'infinite' && $setup.canLoadMore) ? (_openBlock(), _createElementBlock("div", _hoisted_13, null, 512 /* NEED_PATCH */)) : _createCommentVNode("v-if", true), ($setup.paginationType === 'infinite' && $setup.pending && $setup.displayProducts.length) ? (_openBlock(), _createElementBlock("p", _hoisted_14, " Yükleniyor… ")) : _createCommentVNode("v-if", true), _createVNode(_component_UModal, { open: $setup.quickModalOpen, "onUpdate:open": _cache[7] || (_cache[7] = $event => (($setup.quickModalOpen) = $event)), scrollable: "", title: $setup.quickModalProduct?.title ?? 'Ürün' }, { body: _withCtx(() => [ ($setup.quickModalProduct) ? (_openBlock(), _createElementBlock("div", _hoisted_15, [ ($setup.orderedImages($setup.quickModalProduct, 1)[0] || $setup.productsPlaceholderImageUrl) ? (_openBlock(), _createElementBlock("div", _hoisted_16, [ _createVNode(_component_ProductImageBlurUp, { image: $setup.orderedImages($setup.quickModalProduct, 1)[0] || $setup.buildPlaceholderImage(), primary: "large", fit: $setup.listingImageFit($setup.orderedImages($setup.quickModalProduct, 1)[0] || $setup.buildPlaceholderImage()), "intrinsic-center": $setup.isListingPlaceholder($setup.orderedImages($setup.quickModalProduct, 1)[0] || $setup.buildPlaceholderImage()), alt: $setup.quickModalProduct.title ?? '', "img-class": "pointer-events-none", sizes: "520px", width: "800", height: "600", loading: "eager", "lqip-loading": "eager", decoding: "async" }, null, 8 /* PROPS */, ["image", "fit", "intrinsic-center", "alt"]) ])) : _createCommentVNode("v-if", true), _createElementVNode("p", _hoisted_17, _toDisplayString($setup.quickModalProduct.short_description || $setup.quickModalProduct.description || 'Ürün açıklaması yok.'), 1 /* TEXT */), _createVNode(_component_NuxtLink, { to: $setup.productHref($setup.quickModalProduct), class: "inline-flex items-center gap-2 text-sm font-medium text-primary-600 underline" }, { default: _withCtx(() => [...(_cache[14] || (_cache[14] = [ _createTextVNode(" Ürün sayfasına git ", -1 /* CACHED */) ]))]), _: 1 /* STABLE */ }, 8 /* PROPS */, ["to"]) ])) : _createCommentVNode("v-if", true) ]), _: 1 /* STABLE */ }, 8 /* PROPS */, ["open", "title"]) ], 64 /* STABLE_FRAGMENT */)) ])) } /** Backend `filterProducts` / SKU: `in_stock` | `out_of_stock` | `pre_order` */ const __script = _defineComponent({ props: { config: { type: Object, default: () => ({}) }, blocks: { type: Array, default: () => [] }, slug: { type: String, default: '' }, params: { type: Object, default: null }, settings: { type: Object, default: () => ({}) }, }, setup(__props, { expose: __expose }) { __expose(); function normalizeListingStockStatus(raw) { return String(raw ?? '').trim().toLowerCase() } function listingGridTailwindTokens(opts) { const impl = typeof globalThis !== 'undefined' ? globalThis.sectionGridTailwindTokens : undefined if (typeof impl === 'function') return impl(opts) return ['grid', 'grid-cols-1', 'sm:grid-cols-2', 'lg:grid-cols-4', 'gap-4'] } function listingGridPaddingMarginTokens(gs) { const padFn = typeof globalThis !== 'undefined' ? globalThis.sectionPaddingTailwindTokens : undefined const marFn = typeof globalThis !== 'undefined' ? globalThis.sectionMarginTailwindTokens : undefined const merged = [] if (typeof padFn === 'function' && gs && typeof gs === 'object' && gs.padding) merged.push(...padFn(gs)) if (typeof marFn === 'function' && gs && typeof gs === 'object' && gs.margin) merged.push(...marFn(gs)) return merged } const props = __props /** CDN şablonunda `#app` composable yok — `RemoteComponent` `globalThis.useRoute` yayınlar */ function shellUseRoute() { const fn = typeof globalThis !== 'undefined' ? globalThis.useRoute : undefined if (typeof fn !== 'function') throw new Error('[product-list] globalThis.useRoute eksik (RemoteComponent güncel mi?)') return fn() } function shellNavigateTo(destination) { const fn = typeof globalThis !== 'undefined' ? globalThis.navigateTo : undefined if (typeof fn !== 'function') throw new Error('[product-list] globalThis.navigateTo eksik (RemoteComponent güncel mi?)') return fn(destination) } const route = shellUseRoute() const cfg = computed(() => props.config && typeof props.config === 'object' ? props.config : {}, ) const P = computed(() => props.params && typeof props.params === 'object' ? props.params : {}, ) const slugContext = computed(() => P.value.slugContext || null) /** * SPA’da bazen şablon parametreleri (slugContext / ürünler) güncellenmeden route önce güncellenir. * `"Bu filtrelere uygun ürün yok"` ancak bağlam URL ile örtüşüyorsa gösterilmeli. */ const routeSlugKeyForListing = computed(() => { const p = route.params.slug if (!p) return 'home' return Array.isArray(p) ? p.join('/') : String(p).trim() }) const listingRouteAlignedWithSlugContext = computed(() => { const ctx = slugContext.value const sv = typeof ctx?.slugValue === 'string' ? ctx.slugValue.trim().toLowerCase() : '' if (!sv) return true const pathKey = routeSlugKeyForListing.value.trim().toLowerCase() const st = typeof ctx.slugType === 'string' ? ctx.slugType : '' if (st === 'category') return pathKey === sv /* marka/model path önekleri farklı olabilir — yalın slug eşleşmesini kabul et */ if (st === 'brand' || st === 'model') return pathKey === sv || pathKey.endsWith(`/${sv}`) return pathKey === sv }) const rawProducts = computed(() => P.value.products || []) const meta = computed(() => P.value.meta || null) const pending = computed(() => P.value.pending === true) const error = computed(() => P.value.error || null) const filterState = computed(() => P.value.filterState || {}) const actions = computed(() => P.value.actions || {}) const cardCfg = computed(() => { const shared = P.value.productCardConfig if (shared?.productCard && typeof shared.productCard === 'object') return shared.productCard return cfg.value.productCard || {} }) const quickCfg = computed(() => { const shared = P.value.productCardConfig if (shared?.quickActions && typeof shared.quickActions === 'object') return shared.quickActions return cfg.value.quickActions || {} }) const ProductCardComp = computed(() => { const c = typeof globalThis !== 'undefined' ? globalThis.ProductCardComponent : null return c || null }) const toolbarCfg = computed(() => cfg.value.toolbar || {}) const paginationCfg = computed(() => cfg.value.pagination || {}) /** Yeni `listingGrid` veya eski `layout` altındaki gridCols/gap (geriye uyum). */ const innerListGridCfg = computed(() => { const fromNew = cfg.value.listingGrid if (fromNew && typeof fromNew === 'object') return fromNew const legacyLayout = cfg.value.layout return { gridCols: legacyLayout?.gridCols, gap: legacyLayout?.gap, } }) /** CDN şablonu — preset tanımları host bundle ile aynı sözlük (globalThis yedek). */ const SORT_PRESETS = typeof globalThis !== 'undefined' && globalThis.PRODUCT_LIST_SORT_PRESETS ? globalThis.PRODUCT_LIST_SORT_PRESETS : { sort_order_asc: { id: 'sort_order_asc', label: 'Mağaza Sıralaması', sort: 'sort_order', order: 'ASC', apiReady: true }, title_asc: { id: 'title_asc', label: 'Alfabetik A - Z', sort: 'title', order: 'ASC', apiReady: true }, title_desc: { id: 'title_desc', label: 'Alfabetik Z - A', sort: 'title', order: 'DESC', apiReady: true }, created_at_desc: { id: 'created_at_desc', label: 'Yeniden Eskiye', sort: 'created_at', order: 'DESC', apiReady: true }, created_at_asc: { id: 'created_at_asc', label: 'Eskiden Yeniye', sort: 'created_at', order: 'ASC', apiReady: true }, sale_price_asc: { id: 'sale_price_asc', label: 'Fiyat Artan', sort: 'price', order: 'ASC', apiReady: true }, sale_price_desc: { id: 'sale_price_desc', label: 'Fiyat Azalan', sort: 'price', order: 'DESC', apiReady: true }, comment_rank_desc: { id: 'comment_rank_desc', label: 'En Çok Değerlendirilen', sort: 'comment_rank', order: 'DESC', apiReady: true }, } function normalizeSortPresetId(raw) { if (!raw || typeof raw !== 'string') return null const key = raw.trim() if (key in SORT_PRESETS) return key const legacy = { sort_order: 'sort_order_asc', title: 'title_asc', created_at: 'created_at_desc', updated_at: 'created_at_desc', list_price: 'sale_price_desc', price: 'sale_price_desc', } return legacy[key] ?? null } function visiblePaginationPages(currentPage, totalPages, windowSize = 5) { const total = Math.max(1, Math.floor(totalPages)) const current = Math.min(Math.max(1, Math.floor(currentPage)), total) if (total <= windowSize) { return Array.from({ length: total }, (_, i) => i + 1) } let start = Math.max(1, current - Math.floor(windowSize / 2)) let end = start + windowSize - 1 if (end > total) { end = total start = Math.max(1, end - windowSize + 1) } return Array.from({ length: end - start + 1 }, (_, i) => start + i) } function parseQueryView(raw) { if (raw == null) return null const s = typeof raw === 'string' ? raw.trim() : String(Array.isArray(raw) ? raw[0] : raw).trim() if (s === 'gallery' || s === 'detail') return s return null } /** URL ?view → yoksa panel varsayılanı */ const surfaceViewMode = computed(() => { const override = parseQueryView(route.query.view) if (override) return override const d = toolbarCfg.value.defaultViewMode return d === 'gallery' || d === 'detail' ? d : 'detail' }) /** Ürün görseli: galeri → `medium` (~900), detay ızgarası → `small` (~600). */ const listingImagePrimary = computed(() => surfaceViewMode.value === 'gallery' ? 'medium' : 'small', ) /** Tema Ayarları → `globalStyles.products.placeholderImage` */ const productsPlaceholderImageUrl = computed(() => { const raw = props.settings?.productsPlaceholderImageUrl return typeof raw === 'string' && raw.trim() ? raw.trim() : '' }) function buildPlaceholderImage() { const url = productsPlaceholderImageUrl.value if (!url) return null return { small: url, medium: url, large: url, _isPlaceholder: true } } function isListingPlaceholder(image) { return Boolean(image?._isPlaceholder) } function listingImageFit(image) { return isListingPlaceholder(image) ? 'contain' : 'cover' } const listingGridClasses = computed(() => { /** Detay ve galeri aynı `listingGrid.gridCols`; yalnızca galeride ara boşluk sıkı. */ const cols = innerListGridCfg.value.gridCols const gap = surfaceViewMode.value === 'gallery' ? { 320: 'gap-0.5' } : innerListGridCfg.value.gap const safeCols = cols && typeof cols === 'object' && !Array.isArray(cols) && Object.keys(cols).length ? cols : { 320: '1', 640: '2', 1024: '4' } return listingGridTailwindTokens({ columns: safeCols, gap }).join(' ') }) const listingGridShellClasses = computed(() => { const grid = listingGridClasses.value const gs = innerListGridCfg.value const pm = listingGridPaddingMarginTokens(gs).join(' ') return [grid, pm].filter(Boolean).join(' ') }) const effectiveSortPreset = computed(() => P.value.effectiveSortPreset || null) const sortFieldItems = computed(() => { const allowed = toolbarCfg.value.sortOptions const rawList = Array.isArray(allowed) && allowed.length ? allowed : Object.keys(SORT_PRESETS) const list = rawList.map(normalizeSortPresetId).filter(Boolean) return list.map((id) => { const preset = SORT_PRESETS[id] return preset ? { value: preset.id, label: preset.label } : { value: id, label: id } }) }) const currentSortPresetId = computed(() => effectiveSortPreset.value?.id ?? 'sort_order_asc') function navigateQueryPatch(patch) { const next = { ...route.query } for (const [key, raw] of Object.entries(patch)) { if (raw == null || raw === '') delete next[key] else next[key] = typeof raw === 'string' ? raw : String(raw) } return shellNavigateTo({ path: route.path, query: next }) } function toggleGridView(mode) { const def = toolbarCfg.value.defaultViewMode === 'gallery' || toolbarCfg.value.defaultViewMode === 'detail' ? toolbarCfg.value.defaultViewMode : 'detail' if (mode === def) navigateQueryPatch({ view: '' }) else navigateQueryPatch({ view: mode }) } function onSortPick(presetId) { const preset = SORT_PRESETS[presetId] const fn = actions.value.setSort if (!preset || typeof fn !== 'function' || presetId == null) return fn(preset.sort, preset.order) } const sortUiModel = computed({ get: () => currentSortPresetId.value, set: (presetId) => onSortPick(presetId), }) function bumpPage(delta) { const fn = actions.value.setPage const cur = meta.value?.page ?? 1 if (typeof fn !== 'function') return fn(Math.max(1, cur + delta)) } const errorText = computed(() => { const err = error.value if (err == null) return '' if (err instanceof Error) return err.message if (typeof err === 'string') return err try { return JSON.stringify(err) } catch { return String(err) } }) function parsePrice(raw) { if (raw == null || raw === '') return null const normalized = String(raw).replace(',', '.').replace(/\s/g, '') const n = Number.parseFloat(normalized) return Number.isFinite(n) ? n : null } function formatPrice(raw, decimals, currencyCode, vatDisplay) { const d = typeof decimals === 'number' ? decimals : 2 const n = typeof raw === 'number' ? raw : parsePrice(raw) if (n == null) return '—' const formatted = new Intl.NumberFormat('tr-TR', { minimumFractionDigits: d, maximumFractionDigits: d, }).format(n) const code = typeof currencyCode === 'string' ? currencyCode.trim() : '' const base = code ? `${formatted} ${code}` : formatted // KDV hariç gösterim: fiyatın yanına satır içi "+ KDV" (ayrı alt satır etiketi değil) if (vatDisplay === 'excluded') return `${base} + KDV` return base } function discountPercent(row, vatDisplay) { const p = row?.pricing let listNum, campaign if (p) { if (vatDisplay === 'excluded') { listNum = parsePrice(p.list_price_net ?? row?.list_price) campaign = parsePrice(p.campaign_price_net ?? p.sale_price_net ?? row?.campaign_price) } else { listNum = parsePrice(p.list_price_gross ?? row?.list_price) campaign = parsePrice(p.campaign_price_gross ?? p.sale_price_gross ?? row?.campaign_price) } } else { listNum = parsePrice(row?.list_price) campaign = parsePrice(row?.campaign_price ?? row?.sale_price) } if (listNum == null || !(listNum > 0) || campaign == null || !(campaign < listNum)) return null return Math.round((1 - campaign / listNum) * 100) } /** vatDisplay yapılandırmasına göre ürünün gösterilecek ana fiyatını döner. */ function resolveDisplayPrice(row, vatDisplay) { const p = row?.pricing if (!p) return row?.campaign_price ?? row?.list_price ?? null if (vatDisplay === 'excluded') { return p.campaign_price_net ?? p.sale_price_net ?? p.list_price_net ?? row?.campaign_price ?? row?.list_price ?? null } return p.campaign_price_gross ?? p.sale_price_gross ?? p.list_price_gross ?? row?.campaign_price ?? row?.list_price ?? null } /** vatDisplay yapılandırmasına göre üzeri çizili (orijinal) fiyatı döner. */ function resolveOriginalPrice(row, vatDisplay) { const p = row?.pricing if (!p) return row?.list_price ?? null if (vatDisplay === 'excluded') { return p.list_price_net ?? row?.list_price ?? null } return p.list_price_gross ?? row?.list_price ?? null } /** İndirimli ürün mü? Gösterim fiyatı < orijinal fiyat. */ function hasDiscount(row, vatDisplay) { const display = parsePrice(resolveDisplayPrice(row, vatDisplay)) const original = parsePrice(resolveOriginalPrice(row, vatDisplay)) return display != null && original != null && display < original } /** Panel `newBadgeDaysThreshold`: string veya number (örn. `"444"`). */ function parseNewBadgeDaysThreshold(raw) { if (raw == null || raw === '') return 14 const n = typeof raw === 'number' ? raw : Number.parseInt(String(raw).trim(), 10) if (!Number.isFinite(n) || n < 1) return 14 return Math.min(n, 9999) } /** Dashboard `extra_meta` ile uyumlu boolean okuma (`is_new`, `is_discounted`). */ function extraMetaBool(extra, key) { if (!extra || typeof extra !== 'object') return false const v = extra[key] if (v === true) return true if (v === false || v == null) return false if (typeof v === 'string') return v === 'true' || v === '1' return Boolean(v) } function extraMetaStr(extra, key) { if (!extra || typeof extra !== 'object') return '' const v = extra[key] if (typeof v === 'string') return v if (v == null) return '' return String(v) } function isCssColorString(s) { const t = String(s ?? '').trim() return ( /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t) || /^rgb\s*\(/i.test(t) || /^rgba\s*\(/i.test(t) || /^hsl\s*\(/i.test(t) || /^hsla\s*\(/i.test(t) ) } /** Rozet HEX için `bg-[#..]` / `text-[#..]` — yalnızca güvenli hex (arbitrary value). */ function safeHexForArbitraryClass(value) { const s = String(value ?? '').trim() if (!/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(s)) return null return s.toLowerCase() } function listingTextTokenClass(s) { const t = String(s ?? '').trim() return /^(?:(?:sm|md|lg|xl|2xl):)?text-[\w-]+$/.test(t) ? t : '' } /** `bg-primary-600` veya `bg-[#hex]` / `bg-[rgb(...)]` (boşluksuz). */ function listingBgClassFromMeta(raw) { const t = String(raw ?? '').trim() if (!t) return '' if (/^(?:(?:sm|md|lg|xl|2xl):)?bg-[\w-]+$/.test(t)) return t const hex = safeHexForArbitraryClass(t) if (hex) return `bg-[${hex}]` if (isCssColorString(t)) return `bg-[${t.replace(/\s+/g, '')}]` return '' } /** `text-primary-500` veya `text-[#hex]` / `text-[rgb(...)]`. */ function listingTextClassFromMeta(raw) { const t = String(raw ?? '').trim() if (!t) return '' const token = listingTextTokenClass(t) if (token) return token const hex = safeHexForArbitraryClass(t) if (hex) return `text-[${hex}]` if (isCssColorString(t)) return `text-[${t.replace(/\s+/g, '')}]` return '' } /** Panel `extra_meta` renklerinin statik varsayılanları geçersiz kılması için (Tailwind important). */ function tailwindImportantClassList(classString) { if (!classString || typeof classString !== 'string') return '' return classString .trim() .split(/\s+/) .filter(Boolean) .map((token) => { if (token.startsWith('!')) return token const colon = token.lastIndexOf(':') if (colon === -1) return `!${token}` return `${token.slice(0, colon + 1)}!${token.slice(colon + 1)}` }) .join(' ') } function listingNewBadgeChipDynamicClass(row) { const e = listingExtra(row) const bgRaw = extraMetaStr(e, 'new_badge_bg').trim() const textRaw = extraMetaStr(e, 'new_badge_text').trim() const parts = [] const bgCls = listingBgClassFromMeta(bgRaw) const textCls = listingTextClassFromMeta(textRaw) if (bgCls) parts.push(tailwindImportantClassList(bgCls)) if (textCls) parts.push(tailwindImportantClassList(textCls)) return parts.join(' ') } function listingDiscountBadgeChipDynamicClass(row) { const e = listingExtra(row) const bgRaw = extraMetaStr(e, 'discount_badge_bg').trim() const textRaw = extraMetaStr(e, 'discount_badge_text').trim() const parts = [] const bgCls = listingBgClassFromMeta(bgRaw) const textCls = listingTextClassFromMeta(textRaw) if (bgCls) parts.push(tailwindImportantClassList(bgCls)) if (textCls) parts.push(tailwindImportantClassList(textCls)) return parts.join(' ') } function isNewByDateThreshold(row) { const days = parseNewBadgeDaysThreshold(cardCfg.value.newBadgeDaysThreshold) const created = row?.created_at if (!created) return false const t = Date.parse(created) if (Number.isNaN(t)) return false return (Date.now() - t) / 86400000 <= days } /** Blokta açıksa: mağaza `extra_meta.is_new` VEYA oluşturulma tarihi eşik içinde. */ function isNewProduct(row) { if (cardCfg.value.showNewBadge !== 'show') return false const extra = listingExtra(row) if (extraMetaBool(extra, 'is_new')) return true return isNewByDateThreshold(row) } /** Blokta açıksa: kampanyalı fiyat veya mağaza `extra_meta.is_discounted`. */ function showDiscountBadge(row) { if (cardCfg.value.showDiscountBadge !== 'show') return false if (discountPercent(row, cardCfg.value.vatDisplay) != null) return true return extraMetaBool(listingExtra(row), 'is_discounted') } function isOutOfStock(row) { const st = normalizeListingStockStatus(row?.stock_status) if (st === 'out_of_stock') return true if (st === 'pre_order') return false if (st === 'in_stock') { const qty = row?.stock_qty if (typeof qty === 'number' && qty <= 0) return true return false } const qty = row?.stock_qty if (typeof qty === 'number' && qty <= 0) return true return false } function isPreOrder(row) { return normalizeListingStockStatus(row?.stock_status) === 'pre_order' } /** Kart / varyant paneli — stok durumuna göre birincil CTA metni */ function listingCartFaceLabel(row) { if (isOutOfStock(row)) return 'Stokta Yok' if (isPreOrder(row)) return 'Ön Sipariş' return 'Sepete Ekle' } /** Liste kaydı için tip güvenli `extra_meta` (panel şablonu — backend şekli zamanla oturur). */ function listingExtra(row) { const raw = row?.extra_meta if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return null return raw } function normalizeListingOption(entry, fallbackIndex) { if (typeof entry === 'string') { return { id: `opt-${fallbackIndex}`, label: entry } } if (!entry || typeof entry !== 'object') return null const label = entry.name ?? entry.label ?? entry.title ?? entry.value if (label == null || String(label).trim() === '') return null const idRaw = entry.id ?? entry.value ?? entry.slug ?? label const base = { id: String(idRaw), label: String(label) } const hex = normalizeHex(entry.hex ?? entry.color_code ?? entry.colorCode) return hex ? { ...base, colorHex: hex } : base } function normalizeHex(value) { if (value == null) return null const s = String(value).trim() if (/^#[0-9a-f]{3,8}$/i.test(s)) return s if (/^[0-9a-f]{3,8}$/i.test(s)) return `#${s}` return null } function optionListFromMeta(raw) { if (!Array.isArray(raw)) return [] const out = [] for (let i = 0; i < raw.length; i++) { const normalized = normalizeListingOption(raw[i], i) if (normalized) out.push(normalized) } return out } function listingVariantOptionsFromMeta(row) { const meta = listingExtra(row) if (!meta) return { colors: [], sizes: [] } const colors = optionListFromMeta( meta.listing_color_options ?? meta.color_options ?? meta.variant_colors ?? meta.colors, ) const sizes = optionListFromMeta( meta.listing_size_options ?? meta.size_options ?? meta.variant_sizes ?? meta.sizes, ) return { colors, sizes } } function skuRowInStock(sku) { const st = normalizeListingStockStatus(sku?.stock_status) if (st === 'out_of_stock') return false if (st === 'pre_order') return true if (st === 'in_stock') { const qty = sku?.stock_qty if (typeof qty === 'number' && qty <= 0) return false return true } const qty = sku?.stock_qty if (typeof qty === 'number' && qty <= 0) return false return true } /** `filterProducts` `Product.skus` — SKU satırlarından renk / beden listesi çıkarımı. */ function listingVariantOptionsFromSkus(row) { const skus = Array.isArray(row?.skus) ? row.skus : [] if (!skus.length) return { colors: [], sizes: [] } const groupOrder = [] const groups = new Map() for (const skuRow of skus) { const opts = Array.isArray(skuRow.options) ? skuRow.options : [] for (const opt of opts) { const gid = String(opt.variant_group_id) if (!groups.has(gid)) { groups.set(gid, { id: gid, items: new Map(), }) groupOrder.push(gid) } const grp = groups.get(gid) const iid = String(opt.variant_item_id) if (!grp.items.has(iid)) { const hex = normalizeHex(opt.color_code) grp.items.set(iid, { id: iid, label: opt.variant_item_name, colorHex: hex, display_type: opt.display_type, }) } } } const ordered = groupOrder.map((gid) => groups.get(gid)).filter(Boolean) function groupLooksColor(group) { const items = [...group.items.values()] return items.some( (item) => String(item.display_type ?? '').toUpperCase() === 'COLOR' || !!item.colorHex, ) } function mapSlice(group) { if (!group) return [] return [...group.items.values()].map((item) => ({ id: item.id, label: item.label, colorHex: item.colorHex, })) } const colorGroup = ordered.find((g) => groupLooksColor(g)) const sizeGroup = ordered.find((g) => g && g !== colorGroup) if (!colorGroup && ordered.length === 1) { const only = ordered[0] const items = mapSlice(only) return groupLooksColor(only) ? { colors: items, sizes: [] } : { colors: [], sizes: items } } let colors = mapSlice(colorGroup) let sizes = mapSlice(sizeGroup) if (!sizes.length && ordered.length > 1 && colorGroup) { const fallbackGroup = ordered.find((g) => g !== colorGroup) sizes = mapSlice(fallbackGroup) } return { colors, sizes } } function listingVariantOptions(row) { const fromMeta = listingVariantOptionsFromMeta(row) if (fromMeta.colors.length || fromMeta.sizes.length) return fromMeta const skuList = Array.isArray(row?.skus) ? row.skus : [] if (!row?.has_variants && skuList.length === 0) return fromMeta const fromSkus = listingVariantOptionsFromSkus(row) return fromSkus.colors.length || fromSkus.sizes.length ? fromSkus : fromMeta } /** Meta veya SKU’dan türetilen en az bir varyant ekseni var mı (liste satırı). */ function productRowNeedsVariantPicker(row) { if (!row) return false const { colors, sizes } = listingVariantOptions(row) return colors.length > 0 || sizes.length > 0 } function skuMatchesVariantPickerSelection(sku, colorId, sizeId, colors, sizes) { const ids = new Set((sku.options || []).map((o) => String(o.variant_item_id))) const wantsColor = colors.length > 0 const wantsSize = sizes.length > 0 if (!wantsColor && !wantsSize) return true let colorOk = true let sizeOk = true if (wantsColor) { if (!colorId) return false colorOk = ids.has(String(colorId)) } if (wantsSize) { if (!sizeId) return false sizeOk = ids.has(String(sizeId)) } return colorOk && sizeOk } /** Açılır panel seçimleri için SKU stok doğrulaması (SKU yoksa kısıtlama yapılmaz). */ function variantSheetHasInStockCombination(row, colorId, sizeId) { const { colors, sizes } = listingVariantOptions(row) const skus = Array.isArray(row?.skus) ? row.skus : [] if (!skus.length) return true const twoAxes = Boolean(colors.length && sizes.length) if (twoAxes) return ( !!(colorId && sizeId) && skus.some( (sku) => skuRowInStock(sku) && skuMatchesVariantPickerSelection(sku, colorId, sizeId, colors, sizes), ) ) if (!colors.length && sizes.length && sizeId) { return skus.some( (sku) => skuRowInStock(sku) && skuMatchesVariantPickerSelection(sku, null, sizeId, colors, sizes), ) } if (colors.length && !sizes.length && colorId) { return skus.some( (sku) => skuRowInStock(sku) && skuMatchesVariantPickerSelection(sku, colorId, null, colors, sizes), ) } return false } function isListingVariantSizeUnavailable(row, sizeId) { const { colors, sizes } = listingVariantOptions(row) if (!sizeId || !sizes.length || !colors.length) return false const skus = row?.skus if (!Array.isArray(skus) || !skus.length) return false const colorId = variantSheetPicker.value.colorId if (!colorId) return false return !variantSheetHasInStockCombination(row, colorId, sizeId) } function variantSheetConfirmDisabled(row) { if (!row || isOutOfStock(row)) return true const opts = listingVariantOptions(row) const { colors, sizes } = opts if (variantOptionsNeedPdp(row, colors, sizes)) return false const { colorId, sizeId } = variantSheetPicker.value if (colors.length > 0 && !colorId) return true if (sizes.length > 0 && !sizeId) return true if (Array.isArray(row.skus) && row.skus.length > 0) return !variantSheetHasInStockCombination(row, colorId ?? null, sizeId ?? null) return false } function variantOptionsNeedPdp(row, colors, sizes) { const backendVariants = !!row?.has_variants const hasSkus = Array.isArray(row?.skus) ? row.skus.length > 0 : false return (backendVariants || hasSkus) && !colors.length && !sizes.length } function insertVideoSlide(slides, videoSlide, position) { let index = slides.length if (position === 'first') index = 0 else if (position === 'second') index = 1 index = Math.min(Math.max(0, index), slides.length) slides.splice(index, 0, videoSlide) } /** Eski `before` / `after` kayıtlarıyla uyumlu. */ function resolveVideoPosition(raw) { if (raw === 'first' || raw === 'before') return 'first' if (raw === 'second') return 'second' return 'last' } const displayProducts = computed(() => { let list = [...rawProducts.value] const mode = cardCfg.value.showOutOfStock if (mode === 'hide') list = list.filter((row) => !isOutOfStock(row)) if (mode === 'show' && cardCfg.value.outOfStockSortLast === 'yes') list.sort((a, b) => (Number(isOutOfStock(a))) - Number(isOutOfStock(b))) const hoverCap = cardCfg.value.hoverImageCount const showVideo = cardCfg.value.showProductVideo === 'show' const videoPosition = resolveVideoPosition(cardCfg.value.videoPosition) return list.map((row) => { let imgs = orderedImages(row, hoverCap) if (!imgs.length) { const ph = buildPlaceholderImage() if (ph) imgs = [ph] } const slides = [...imgs] if (showVideo && row.video_url && row.video_type === 'local') { insertVideoSlide(slides, { _isVideo: true, video_url: row.video_url, poster: imgs[0]?.medium || imgs[0]?.small || '', }, videoPosition) } return { ...row, _listingVariantOptions: listingVariantOptions(row), _listingDiscountPercent: discountPercent(row, cardCfg.value.vatDisplay), _listingOrderedImages: imgs, _listingSlides: slides, } }) }) function productHref(row) { const slug = row?.slug return slug ? `/${String(slug).replace(/^\/+/, '')}` : '#' } function orderedImages(row, limit) { const images = Array.isArray(row?.images) ? [...row.images] : [] images.sort((x, y) => { if (x.is_main && !y.is_main) return -1 if (!x.is_main && y.is_main) return 1 const ax = typeof x.sort_order === 'number' ? x.sort_order : 999 const ay = typeof y.sort_order === 'number' ? y.sort_order : 999 return ax - ay }) const cap = typeof limit === 'number' ? Math.min(Math.max(limit, 1), 5) : 1 return images.slice(0, cap) } /** Varyant paneli miktarı — kart başına yerel durum */ const qtyByProductId = ref({}) function minOrderQty(row) { const mn = row?.min_order_qty return typeof mn === 'number' && mn >= 1 ? Math.floor(mn) : 1 } /** `stock_unit`: piece | kilogram | meter | box (API); kg/m için ondalık adım. */ function isFractionalStockUnit(row) { const unit = String(row?.stock_unit ?? '').toLowerCase() return unit === 'kilogram' || unit === 'meter' } function orderQuantityStep(row) { return isFractionalStockUnit(row) ? 0.1 : 1 } function orderQuantityFormatOptions(row) { if (isFractionalStockUnit(row)) { return { minimumFractionDigits: 0, maximumFractionDigits: 2 } } return { maximumFractionDigits: 0 } } function orderQuantityMax(row) { if (!row) return undefined const minimum = minOrderQty(row) const caps = [] const maxOrder = row.max_order_qty if (typeof maxOrder === 'number' && !Number.isNaN(maxOrder) && maxOrder >= minimum) caps.push(maxOrder) const stock = row.stock_qty if (typeof stock === 'number' && !Number.isNaN(stock) && stock >= 0) caps.push(stock) if (!caps.length) return undefined return Math.min(...caps) } function orderQuantityLabel(row) { const unit = String(row?.stock_unit ?? '').toLowerCase() if (unit === 'kilogram') return 'Miktar (kg)' if (unit === 'meter') return 'Miktar (m)' if (unit === 'box') return 'Kutu adedi' return 'Adet seçimi' } function roundOrderQuantity(row, quantity) { if (!isFractionalStockUnit(row)) return Math.floor(quantity) return Math.round(quantity * 100) / 100 } function clampOrderQuantity(row, quantity) { const minimum = minOrderQty(row) const cap = orderQuantityMax(row) let next = quantity if (!Number.isFinite(next) || Number.isNaN(next)) next = minimum next = roundOrderQuantity(row, next) if (next < minimum) next = minimum if (cap != null && next > cap) next = cap return next } function setOrderQuantity(productId, raw) { const row = rawProducts.value.find((r) => r.id === productId) if (!row) return const next = typeof raw === 'number' ? raw : Number(raw) qtyByProductId.value = { ...qtyByProductId.value, [productId]: clampOrderQuantity(row, next), } } function quantityFor(pid) { const row = rawProducts.value.find((r) => r.id === pid) if (!row) return 1 const minimum = minOrderQty(row) const stored = qtyByProductId.value[pid] let base = minimum if (typeof stored === 'number' && !Number.isNaN(stored) && stored >= minimum) base = roundOrderQuantity(row, stored) return clampOrderQuantity(row, base) } const quickModalOpen = ref(false) const quickModalProduct = ref(null) function openQuickView(row) { quickModalProduct.value = row quickModalOpen.value = true } /** Tek kartta üst üste binmesin — açık kart id */ const variantSheetOpenFor = ref(null) const variantSheetPicker = ref({ colorId: null, sizeId: null }) const variantSheetProduct = computed(() => { const id = variantSheetOpenFor.value if (id == null) return null return rawProducts.value.find((r) => r.id === id) ?? null }) const variantSheetOptions = computed(() => { const row = variantSheetProduct.value if (!row) return { colors: [], sizes: [] } return listingVariantOptions(row) }) /** İki flex satırından fazlasını PDP linkli «+N» ile kesmek için; panel kapalıyken anlamızdır */ const VARIANT_SHEET_SHOW_ALL_CHIP_TAKE = Number.MAX_SAFE_INTEGER const variantColorChipFlexWrapEl = shallowRef(null) const variantSizeChipFlexWrapEl = shallowRef(null) const variantSheetVisibleColorChipTake = ref(VARIANT_SHEET_SHOW_ALL_CHIP_TAKE) const variantSheetVisibleSizeChipTake = ref(VARIANT_SHEET_SHOW_ALL_CHIP_TAKE) let variantSheetClampDebounceId function variantSheetChipFlexRowCount(wrapEl) { if (!wrapEl) return 0 /** @type {HTMLElement[]} */ const nodes = Array.from(wrapEl.children ?? []) if (!nodes.length) return 0 const snappedTops = new Set() for (const node of nodes) { const top = typeof node.offsetTop === 'number' ? node.offsetTop : 0 snappedTops.add(Math.round(top / 6) * 6) } return Math.max(snappedTops.size, 1) } function bindVariantSheetChipFlexWrap(kind, sheetRowId, wrapEl) { if (!sheetRowId || variantSheetOpenFor.value !== sheetRowId) return if (kind === 'colors') variantColorChipFlexWrapEl.value = wrapEl ?? null else variantSizeChipFlexWrapEl.value = wrapEl ?? null } async function reconcileVariantSheetTwoRowChipClampInner() { const activeSheetRowId = variantSheetOpenFor.value const row = variantSheetProduct.value?.id === activeSheetRowId ? variantSheetProduct.value : null async function converge(wrapEl, listLength, takeRef, kindHint) { if (!wrapEl || listLength < 1) return for (let pick = listLength; pick >= 1; pick--) { if (variantSheetOpenFor.value !== activeSheetRowId || !variantSheetProduct.value) return takeRef.value = pick await nextTick() const refreshed = kindHint === 'colors' ? variantColorChipFlexWrapEl.value : variantSizeChipFlexWrapEl.value if ( refreshed && refreshed.isConnected && variantSheetChipFlexRowCount(refreshed) <= 2 ) return } } await nextTick() if ( variantSheetOpenFor.value == null || !row || variantSheetProduct.value?.id !== row.id ) return const { colors, sizes } = listingVariantOptions(row) variantSheetVisibleColorChipTake.value = colors.length ? colors.length : VARIANT_SHEET_SHOW_ALL_CHIP_TAKE variantSheetVisibleSizeChipTake.value = sizes.length ? sizes.length : VARIANT_SHEET_SHOW_ALL_CHIP_TAKE await nextTick() if (variantSheetOpenFor.value !== row.id || !variantSheetProduct.value) return /** Ref bağları bazen ilk kareye yetişmez — chip satırını ölçmeden önce ikinci bekleyiş */ await nextTick() await converge( variantColorChipFlexWrapEl.value, colors.length, variantSheetVisibleColorChipTake, 'colors', ) await nextTick() if (variantSheetOpenFor.value !== row.id) return await converge( variantSizeChipFlexWrapEl.value, sizes.length, variantSheetVisibleSizeChipTake, 'sizes', ) } function scheduleVariantSheetTwoRowClamp() { if (variantSheetOpenFor.value == null) { if (variantSheetClampDebounceId != null) { clearTimeout(variantSheetClampDebounceId) variantSheetClampDebounceId = null } return } if (variantSheetClampDebounceId != null) clearTimeout(variantSheetClampDebounceId) variantSheetClampDebounceId = window.setTimeout(() => { variantSheetClampDebounceId = null void reconcileVariantSheetTwoRowChipClampInner() .catch(() => { /* ölçüm yarışında DOM kalkmış olabilir */ }) }, 80) } watch( () => variantSheetOpenFor.value, () => { variantSheetVisibleColorChipTake.value = VARIANT_SHEET_SHOW_ALL_CHIP_TAKE variantSheetVisibleSizeChipTake.value = VARIANT_SHEET_SHOW_ALL_CHIP_TAKE variantColorChipFlexWrapEl.value = null variantSizeChipFlexWrapEl.value = null scheduleVariantSheetTwoRowClamp() }, ) watchEffect((onCleanup) => { if (variantSheetOpenFor.value == null) return const colorFlex = variantColorChipFlexWrapEl.value const sizeFlex = variantSizeChipFlexWrapEl.value if (typeof ResizeObserver === 'undefined') return const ro = new ResizeObserver(() => scheduleVariantSheetTwoRowClamp()) if (colorFlex) ro.observe(colorFlex) if (sizeFlex) ro.observe(sizeFlex) onCleanup(() => { try { ro.disconnect() } catch { /* boş */ } }) }) const variantSheetOpenColorChipUi = computed(() => { const list = variantSheetOptions.value.colors ?? [] if (!list.length) return { chips: [], trailingToPdp: 0 } const takeLimit = variantSheetVisibleColorChipTake.value if (takeLimit >= list.length || takeLimit < 1) return { chips: list, trailingToPdp: 0 } const safePick = Math.max(1, Math.min(Math.floor(takeLimit), list.length)) const trailingCount = Math.max(0, list.length - safePick) const chips = trailingCount === 0 ? list : list.slice(0, safePick) return { chips, trailingToPdp: trailingCount === 0 ? 0 : trailingCount, } }) const variantSheetOpenSizeChipUi = computed(() => { const list = variantSheetOptions.value.sizes ?? [] if (!list.length) return { chips: [], trailingToPdp: 0 } const takeLimit = variantSheetVisibleSizeChipTake.value if (takeLimit >= list.length || takeLimit < 1) return { chips: list, trailingToPdp: 0 } const safePick = Math.max(1, Math.min(Math.floor(takeLimit), list.length)) const trailingCount = Math.max(0, list.length - safePick) const chips = trailingCount === 0 ? list : list.slice(0, safePick) return { chips, trailingToPdp: trailingCount === 0 ? 0 : trailingCount, } }) /** Figma: seçili favoriler — yerel durum (/cart ile birleştirilirken sıfırlanabilir). */ const favoriteProductIds = ref({}) function isFavorite(pid) { return favoriteProductIds.value[pid] === true } function toggleFavorite(pid) { favoriteProductIds.value = { ...favoriteProductIds.value, [pid]: !isFavorite(pid), } } function closeVariantPicker() { variantSheetOpenFor.value = null } function initVariantPickerSelection(row, colors, sizes) { const ids = filterState.value?.variant_item_ids const active = Array.isArray(ids) ? new Set(ids.map(String)) : new Set() const colorPick = colors.find((c) => active.has(String(c.id))) ?? colors[0] const sizePick = sizes.find((s) => active.has(String(s.id))) ?? sizes[0] variantSheetPicker.value = { colorId: colorPick?.id ?? null, sizeId: sizePick?.id ?? null, } } function handleAddToCartClick(row, event) { if (!row || isOutOfStock(row)) return if (event && typeof event.stopPropagation === 'function') event.stopPropagation() if (!productRowNeedsVariantPicker(row)) { closeVariantPicker() return } variantSheetOpenFor.value = row.id const { colors, sizes } = row._listingVariantOptions ?? listingVariantOptions(row) initVariantPickerSelection(row, colors, sizes) } /** Varyant onayı — şimdilik stub; daha sonra seçilen SKU + miktar ile /cart bağlanır. */ function confirmVariantAddToCart() { const row = variantSheetProduct.value if (!row) return const { colors, sizes } = variantSheetOptions.value if (variantOptionsNeedPdp(row, colors, sizes)) { shellNavigateTo(productHref(row)) closeVariantPicker() return } if (variantSheetConfirmDisabled(row)) return closeVariantPicker() } function selectVariantChip(kind, optionId) { if (kind === 'color') variantSheetPicker.value = { ...variantSheetPicker.value, colorId: optionId } else variantSheetPicker.value = { ...variantSheetPicker.value, sizeId: optionId } } function overlayPrimaryLabel(row, colors, sizes) { if (isOutOfStock(row)) return 'Stokta Yok' if (variantOptionsNeedPdp(row, colors, sizes)) return 'Ürün sayfasına git' const { colorId, sizeId } = variantSheetPicker.value const needColor = colors.length > 0 const needSize = sizes.length > 0 const selectionComplete = (!needColor || colorId) && (!needSize || sizeId) if ( selectionComplete && Array.isArray(row?.skus) && row.skus.length > 0 && !variantSheetHasInStockCombination(row, colorId ?? null, sizeId ?? null) ) return 'Stokta Yok' return listingCartFaceLabel(row) } const paginationType = computed( () => P.value.paginationType || paginationCfg.value.type || 'paginated', ) const canLoadMore = computed(() => P.value.canLoadMore === true) const visiblePageNumbers = computed(() => { if (!meta.value?.totalPages) return [] return visiblePaginationPages(meta.value.page, meta.value.totalPages, 5) }) const showPaginationFirstJump = computed(() => { const pages = visiblePageNumbers.value return pages.length > 0 && pages[0] > 1 }) const showPaginationLastJump = computed(() => { const pages = visiblePageNumbers.value const total = meta.value?.totalPages ?? 1 return pages.length > 0 && pages[pages.length - 1] < total }) function goToPage(page) { const fn = actions.value.setPage if (typeof fn !== 'function') return fn(Math.max(1, Math.floor(page))) } function handleLoadMoreClick() { const fn = actions.value.loadNextPage if (typeof fn === 'function') fn() } const infiniteScrollSentinel = ref(null) let infiniteObserver = null onMounted(() => { if (typeof IntersectionObserver === 'undefined') return infiniteObserver = new IntersectionObserver( (entries) => { if (paginationType.value !== 'infinite') return if (!entries[0]?.isIntersecting) return if (!canLoadMore.value || pending.value) return handleLoadMoreClick() }, { rootMargin: '280px 0px' }, ) watch( infiniteScrollSentinel, (el, prev) => { if (!infiniteObserver) return if (prev) infiniteObserver.unobserve(prev) if (el) infiniteObserver.observe(el) }, { immediate: true }, ) }) onUnmounted(() => { if (infiniteObserver) infiniteObserver.disconnect() }) const __returned__ = { normalizeListingStockStatus, listingGridTailwindTokens, listingGridPaddingMarginTokens, props, shellUseRoute, shellNavigateTo, route, cfg, P, slugContext, routeSlugKeyForListing, listingRouteAlignedWithSlugContext, rawProducts, meta, pending, error, filterState, actions, cardCfg, quickCfg, ProductCardComp, toolbarCfg, paginationCfg, innerListGridCfg, SORT_PRESETS, normalizeSortPresetId, visiblePaginationPages, parseQueryView, surfaceViewMode, listingImagePrimary, productsPlaceholderImageUrl, buildPlaceholderImage, isListingPlaceholder, listingImageFit, listingGridClasses, listingGridShellClasses, effectiveSortPreset, sortFieldItems, currentSortPresetId, navigateQueryPatch, toggleGridView, onSortPick, sortUiModel, bumpPage, errorText, parsePrice, formatPrice, discountPercent, resolveDisplayPrice, resolveOriginalPrice, hasDiscount, parseNewBadgeDaysThreshold, extraMetaBool, extraMetaStr, isCssColorString, safeHexForArbitraryClass, listingTextTokenClass, listingBgClassFromMeta, listingTextClassFromMeta, tailwindImportantClassList, listingNewBadgeChipDynamicClass, listingDiscountBadgeChipDynamicClass, isNewByDateThreshold, isNewProduct, showDiscountBadge, isOutOfStock, isPreOrder, listingCartFaceLabel, listingExtra, normalizeListingOption, normalizeHex, optionListFromMeta, listingVariantOptionsFromMeta, skuRowInStock, listingVariantOptionsFromSkus, listingVariantOptions, productRowNeedsVariantPicker, skuMatchesVariantPickerSelection, variantSheetHasInStockCombination, isListingVariantSizeUnavailable, variantSheetConfirmDisabled, variantOptionsNeedPdp, insertVideoSlide, resolveVideoPosition, displayProducts, productHref, orderedImages, qtyByProductId, minOrderQty, isFractionalStockUnit, orderQuantityStep, orderQuantityFormatOptions, orderQuantityMax, orderQuantityLabel, roundOrderQuantity, clampOrderQuantity, setOrderQuantity, quantityFor, quickModalOpen, quickModalProduct, openQuickView, variantSheetOpenFor, variantSheetPicker, variantSheetProduct, variantSheetOptions, VARIANT_SHEET_SHOW_ALL_CHIP_TAKE, variantColorChipFlexWrapEl, variantSizeChipFlexWrapEl, variantSheetVisibleColorChipTake, variantSheetVisibleSizeChipTake, get variantSheetClampDebounceId() { return variantSheetClampDebounceId }, set variantSheetClampDebounceId(v) { variantSheetClampDebounceId = v }, variantSheetChipFlexRowCount, bindVariantSheetChipFlexWrap, reconcileVariantSheetTwoRowChipClampInner, scheduleVariantSheetTwoRowClamp, variantSheetOpenColorChipUi, variantSheetOpenSizeChipUi, favoriteProductIds, isFavorite, toggleFavorite, closeVariantPicker, initVariantPickerSelection, handleAddToCartClick, confirmVariantAddToCart, selectVariantChip, overlayPrimaryLabel, paginationType, canLoadMore, visiblePageNumbers, showPaginationFirstJump, showPaginationLastJump, goToPage, handleLoadMoreClick, infiniteScrollSentinel, get infiniteObserver() { return infiniteObserver }, set infiniteObserver(v) { infiniteObserver = v } } Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true }) return __returned__ } }) // Forced Props Injection if (typeof __script !== 'undefined') { __script.props = __script.props || ['config', 'blocks', 'slug']; __script.render = render; __script.__scopeId = "data-v-8acba2cd"; __script.__file = "product-list.vue"; console.log("[RemoteComponent] Loaded: product-list", __script); } // Style Injection (Runtime) if (typeof document !== 'undefined' && "") { const styleId = 'style-' + "data-v-8acba2cd"; if (!document.getElementById(styleId)) { const styleTag = document.createElement('style'); styleTag.id = styleId; styleTag.textContent = ""; document.head.appendChild(styleTag); } } export default __script;

Kadın Giyim & Abiye Koleksiyonu