diff --git a/app/components/catalog/CatalogConfigurator.vue b/app/components/catalog/CatalogConfigurator.vue index 06e558b..03a454f 100644 --- a/app/components/catalog/CatalogConfigurator.vue +++ b/app/components/catalog/CatalogConfigurator.vue @@ -6,6 +6,7 @@ import { type CatalogProductTypeSettingsQuery, type ClientProductsQuery, } from '~/composables/graphql/generated'; +import { catalogProductImageSrc } from '~/utils/catalogProductImages'; import { useClientCart } from '~/composables/useClientCart'; const props = defineProps<{ @@ -128,6 +129,10 @@ function createProductCover(name: string, sku: string) { return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`; } +function productImageSrc(name: string, sku: string) { + return catalogProductImageSrc(name) ?? createProductCover(name, sku); +} + function hydrateProduct(product: ProductNode): ParsedProduct { const normalizedTags = product.tags.map((tag) => normalizeText(tag)).filter(Boolean).sort((a, b) => a.localeCompare(b, 'ru')); @@ -633,9 +638,9 @@ function productDetailPath(group: ProductGroup) { class="absolute left-[-212px] top-28 z-10 hidden w-44 rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:-translate-x-2 hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block" >

{{ previousGroup.typeLabel }}

@@ -647,9 +652,9 @@ function productDetailPath(group: ProductGroup) { class="absolute right-[-212px] top-28 z-10 hidden w-44 rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:translate-x-2 hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block" >

{{ nextGroup.typeLabel }}

@@ -676,9 +681,9 @@ function productDetailPath(group: ProductGroup) { class="flex items-center gap-3 rounded-[24px] border border-[#e6efe9] bg-white p-3 shadow-[0_14px_30px_rgba(18,56,36,0.06)]" > {{ previousGroup.typeLabel }} @@ -690,9 +695,9 @@ function productDetailPath(group: ProductGroup) { class="flex items-center gap-3 rounded-[24px] border border-[#e6efe9] bg-white p-3 shadow-[0_14px_30px_rgba(18,56,36,0.06)]" > {{ nextGroup.typeLabel }} @@ -703,9 +708,9 @@ function productDetailPath(group: ProductGroup) {
diff --git a/app/components/catalog/CatalogProductTypeList.vue b/app/components/catalog/CatalogProductTypeList.vue index dc6cb1c..0e14a91 100644 --- a/app/components/catalog/CatalogProductTypeList.vue +++ b/app/components/catalog/CatalogProductTypeList.vue @@ -4,6 +4,7 @@ import { ClientProductsDocument, type ClientProductsQuery, } from '~/composables/graphql/generated'; +import { catalogProductImageSrc } from '~/utils/catalogProductImages'; type ProductNode = ClientProductsQuery['clientProducts'][number]; type ProductTypeCard = { @@ -60,6 +61,10 @@ function createProductCover(name: string, sku: string) { return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`; } +function productImageSrc(name: string, sku: string) { + return catalogProductImageSrc(name) ?? createProductCover(name, sku); +} + const productTypeCards = computed(() => { const products = productsQuery.result.value?.clientProducts ?? []; const query = search.value.trim().toLowerCase(); @@ -110,9 +115,9 @@ const productTypeCards = computed(() => { class="surface-card block rounded-3xl p-3 transition hover:-translate-y-0.5 hover:shadow-[0_22px_42px_rgba(18,56,36,0.12)]" > diff --git a/app/utils/catalogProductImages.ts b/app/utils/catalogProductImages.ts new file mode 100644 index 0000000..ce70e59 --- /dev/null +++ b/app/utils/catalogProductImages.ts @@ -0,0 +1,31 @@ +const CATALOG_PRODUCT_IMAGE_BY_TYPE: Record = { + 'алюминиевый скотч': '/catalog-products/aluminum-tape.webp', + 'армированный скотч': '/catalog-products/reinforced-tape.webp', + 'вспененный скотч': '/catalog-products/double-sided-foam-tape.webp', + 'двусторонний pvc': '/catalog-products/double-sided-superglue-foam-tape.webp', + 'двусторонний пп': '/catalog-products/double-sided-polypropylene-tape.webp', + 'джамбо-рулоны': '/catalog-products/jumbo-rolls.webp', + 'крепп': '/catalog-products/masking-tape-indoor.webp', + 'лента алюминиевая': '/catalog-products/aluminum-tape.webp', + 'лента армированная': '/catalog-products/reinforced-tape.webp', + 'лента двусторонняя': '/catalog-products/double-sided-polypropylene-tape.webp', + 'лента малярная': '/catalog-products/masking-tape-indoor.webp', + 'лента металлизированная': '/catalog-products/metallized-tape.webp', + 'лента с логотипом': '/catalog-products/logo-tape.webp', + 'лента сигнальная': '/catalog-products/signal-tape.webp', + 'лента упаковочная': '/catalog-products/packaging-tape.webp', + 'малярная лента': '/catalog-products/masking-tape-outdoor.webp', + 'металлизированный скотч': '/catalog-products/metallized-tape.webp', + 'перчатки хб': '/catalog-products/cotton-gloves.webp', + 'сигнальная лента': '/catalog-products/signal-tape.webp', + 'стретч-пленка': '/catalog-products/stretch-film.webp', + 'упаковочный скотч': '/catalog-products/packaging-tape.webp', +}; + +function normalizeCatalogProductType(value: string | null | undefined) { + return String(value ?? '').replaceAll(/\s+/g, ' ').trim().toLowerCase(); +} + +export function catalogProductImageSrc(productType: string | null | undefined) { + return CATALOG_PRODUCT_IMAGE_BY_TYPE[normalizeCatalogProductType(productType)] ?? null; +} diff --git a/public/catalog-products/aluminum-tape.webp b/public/catalog-products/aluminum-tape.webp new file mode 100644 index 0000000..a11271b Binary files /dev/null and b/public/catalog-products/aluminum-tape.webp differ diff --git a/public/catalog-products/cotton-gloves.webp b/public/catalog-products/cotton-gloves.webp new file mode 100644 index 0000000..553aa38 Binary files /dev/null and b/public/catalog-products/cotton-gloves.webp differ diff --git a/public/catalog-products/double-sided-fabric-tape.webp b/public/catalog-products/double-sided-fabric-tape.webp new file mode 100644 index 0000000..e4125a3 Binary files /dev/null and b/public/catalog-products/double-sided-fabric-tape.webp differ diff --git a/public/catalog-products/double-sided-foam-tape.webp b/public/catalog-products/double-sided-foam-tape.webp new file mode 100644 index 0000000..6fb61a4 Binary files /dev/null and b/public/catalog-products/double-sided-foam-tape.webp differ diff --git a/public/catalog-products/double-sided-paper-tape.webp b/public/catalog-products/double-sided-paper-tape.webp new file mode 100644 index 0000000..15b1021 Binary files /dev/null and b/public/catalog-products/double-sided-paper-tape.webp differ diff --git a/public/catalog-products/double-sided-polypropylene-tape.webp b/public/catalog-products/double-sided-polypropylene-tape.webp new file mode 100644 index 0000000..3b89157 Binary files /dev/null and b/public/catalog-products/double-sided-polypropylene-tape.webp differ diff --git a/public/catalog-products/double-sided-superglue-foam-tape.webp b/public/catalog-products/double-sided-superglue-foam-tape.webp new file mode 100644 index 0000000..d1db52f Binary files /dev/null and b/public/catalog-products/double-sided-superglue-foam-tape.webp differ diff --git a/public/catalog-products/jumbo-rolls.webp b/public/catalog-products/jumbo-rolls.webp new file mode 100644 index 0000000..710b09a Binary files /dev/null and b/public/catalog-products/jumbo-rolls.webp differ diff --git a/public/catalog-products/logo-tape.webp b/public/catalog-products/logo-tape.webp new file mode 100644 index 0000000..5b18257 Binary files /dev/null and b/public/catalog-products/logo-tape.webp differ diff --git a/public/catalog-products/masking-tape-indoor.webp b/public/catalog-products/masking-tape-indoor.webp new file mode 100644 index 0000000..045413a Binary files /dev/null and b/public/catalog-products/masking-tape-indoor.webp differ diff --git a/public/catalog-products/masking-tape-outdoor.webp b/public/catalog-products/masking-tape-outdoor.webp new file mode 100644 index 0000000..2988835 Binary files /dev/null and b/public/catalog-products/masking-tape-outdoor.webp differ diff --git a/public/catalog-products/metallized-tape.webp b/public/catalog-products/metallized-tape.webp new file mode 100644 index 0000000..80539e4 Binary files /dev/null and b/public/catalog-products/metallized-tape.webp differ diff --git a/public/catalog-products/packaging-tape.webp b/public/catalog-products/packaging-tape.webp new file mode 100644 index 0000000..0ac02df Binary files /dev/null and b/public/catalog-products/packaging-tape.webp differ diff --git a/public/catalog-products/reinforced-tape.webp b/public/catalog-products/reinforced-tape.webp new file mode 100644 index 0000000..e0697f7 Binary files /dev/null and b/public/catalog-products/reinforced-tape.webp differ diff --git a/public/catalog-products/signal-tape.webp b/public/catalog-products/signal-tape.webp new file mode 100644 index 0000000..a7d0306 Binary files /dev/null and b/public/catalog-products/signal-tape.webp differ diff --git a/public/catalog-products/stretch-film.webp b/public/catalog-products/stretch-film.webp new file mode 100644 index 0000000..cb17eaa Binary files /dev/null and b/public/catalog-products/stretch-film.webp differ