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