From 93074c5c14af51a82851eede492ae664dd5f38af Mon Sep 17 00:00:00 2001 From: Ruslan Bakiev <572431+veikab@users.noreply.github.com> Date: Thu, 9 Apr 2026 19:29:48 +0700 Subject: [PATCH] Redesign catalog product detail page --- .../catalog/CatalogConfigurator.vue | 411 +++++++++++------- 1 file changed, 258 insertions(+), 153 deletions(-) diff --git a/app/components/catalog/CatalogConfigurator.vue b/app/components/catalog/CatalogConfigurator.vue index eec64dc..d38d23f 100644 --- a/app/components/catalog/CatalogConfigurator.vue +++ b/app/components/catalog/CatalogConfigurator.vue @@ -484,43 +484,43 @@ function fieldHelperText(group: ProductGroup, field: ParamFieldKey) { const setting = groupCatalogSetting(group); if (field === 'widthMm') { - return 'Ширина рулона. От неё зависит, насколько широкую полосу материала вы получите.'; + return 'Ширина рулона.'; } if (field === 'lengthM') { const customRange = formatLengthRange(setting); if (setting.allowCustomLength && customRange) { - return `Выберите стандартную длину или закажите свою. Доступный диапазон: ${customRange}.`; + return `Стандартная длина или своя: ${customRange}.`; } - return 'Длина рулона в метрах. Здесь выбирается стандартный доступный размер.'; + return 'Длина рулона в метрах.'; } if (field === 'thicknessMicron') { - return 'Толщина материала. Чем выше значение, тем плотнее и заметнее сама лента.'; + return 'Толщина материала.'; } if (field === 'sleeveBrand') { if (setting.allowCustomSleeveBrand) { - return 'Тип втулки внутри рулона. При необходимости можем сделать втулку с вашим логотипом.'; + return 'Можно выбрать стандартную втулку или сделать с логотипом.'; } - return 'Тип втулки внутри рулона. Выберите подходящий стандартный вариант.'; + return 'Тип втулки внутри рулона.'; } if (field === 'colorTag') { - return 'Цвет или визуальное исполнение ленты. Он влияет на внешний вид готового продукта.'; + return 'Цвет ленты.'; } if (field === 'labelTag') { if (setting.allowCustomLabel) { - return 'Готовая надпись или маркировка. Если нужно, можем нанести и вашу собственную надпись.'; + return 'Стандартная маркировка или своя надпись.'; } - return 'Готовая надпись или маркировка на ленте для стандартных сценариев использования.'; + return 'Готовая надпись или маркировка.'; } - return 'Выберите подходящий параметр для этой позиции.'; + return 'Параметр товара.'; } function customizationDetails(group: ProductGroup) { @@ -543,6 +543,44 @@ function customizationDetails(group: ProductGroup) { return details; } +function selectedSummary(group: ProductGroup) { + return visibleFields(group) + .map((field) => { + const value = getGroupState(group)[field.key]; + if (value === null) { + return null; + } + + return `${field.label}: ${formatOptionLabel(field.key, value)}`; + }) + .filter((item): item is string => Boolean(item)); +} + +function productBadges(product: ParsedProduct) { + const badges: string[] = []; + + if (product.widthMm !== null) { + badges.push(`Ширина: ${product.widthMm} мм`); + } + if (product.lengthM !== null) { + badges.push(`Длина: ${product.lengthM} м`); + } + if (product.thicknessMicron !== null) { + badges.push(`Толщина: ${product.thicknessMicron} мкм`); + } + if (product.sleeveBrand) { + badges.push(`Втулка: ${product.sleeveBrand}`); + } + if (product.colorTags[0]) { + badges.push(`Цвет: ${product.colorTags[0]}`); + } + if (product.labelTags[0]) { + badges.push(`Надпись: ${product.labelTags[0]}`); + } + + return badges; +} + function incrementProduct(product: ProductNode) { if (getQuantity(product.id) === 0) { addProduct({ @@ -589,194 +627,261 @@ function productDetailPath(group: ProductGroup) {
Загрузка каталога...
{{ error.message }}
-
+
-
- - ← Назад +
+ + ← -
- - ← - - - → - +
+

{{ selectedGroup.typeLabel }}

+
+ +
+ + + {{ previousGroup.typeLabel }} + + + + + {{ nextGroup.typeLabel }} +
-
-
-

{{ selectedGroup.typeLabel }}

- -
- +
+
+ - {{ note }} - +
+ +
+
+ + {{ item }} + +
+
+ +
+
+

+ {{ note }} +

+
-
+
-
-
-

{{ field.label }}

-

{{ fieldHelperText(selectedGroup, field.key) }}

-
+

{{ field.label }}

-
- +
+ +

{{ fieldHelperText(selectedGroup, field.key) }}

+
+
+ + +
-
-
+
+
+

Доступные варианты

+ +
+
+
+

{{ product.sku }}

+ +
+ + {{ badge }} + +
+
+ +
+ +
-
{{ selectedQty(selectedGroup) }}
-
-
- - -
-
-
-

Товар в наличии

-

- Все доступные варианты по этому типу товара. -

-
- -
- - - - - - - - - - - - - - - - - - - - - -
АртикулШиринаДлинаТолщинаВтулкаДействие
{{ product.sku }}{{ product.widthMm ?? '—' }}{{ product.lengthM ?? '—' }}{{ product.thicknessMicron ?? '—' }}{{ product.sleeveBrand ?? '—' }} - -
- - {{ getQuantity(product.id) }} - -
-
-
-
-
+ +