# Товары (opens new window)
Папка блока
/components/sections/products
В компоненте использованы плагины slick, vue-gallery
Виды блока отличаюца только оберткой отдельного товара, поэтому находяца в основном компоненте. Для view1 в режиме редактирования разметка немного отличаца от разметки в режиме просмотра сайта (просмотр добавлена кнопка "подгрузки товаров").
# Подгрузка товаров
На данный момент релизована "псевдоподгрузка" - часть товаров просто скрываеца на фронте, с бека тянуца сразу все
# Один товар
Один товар имеет два отображения:
- ProductsItemDetailed.vue - этот компонент появляеца во всплывашке.
- ProductsItem.vue - краткий вид товара в категории.
# Поля товара:
| название | суть |
|---|---|
| title | название товара |
| short_description | краткое описание |
| description | полное описание |
| tech_chars | технические характеристики |
| price | цена |
| old_price | перечеркнутая цена |
| img_1 | основная картинка товара |
| img_2 | картинка товара |
| img_3 | картинка товара |
| img_4 | картинка товара |
# Картинки товара
Предусмотрено 4 отдельных поля для картинок товара. Картинка из img_1 считаеца основной - она показываеца в компоненте ProductsItem.vue
# Увеличение картинки в режиме просмотра
Через компонент vue-gallery. Галерея одна на все товары, находица в компоненте products.vue
# Товар ProductsItem.vue эмитит события:
- call-order-dialog: вызов всплывашки с формой отправки заказа
- call-details-dialog: вызов всплывашки с полным описанием товара
# Товар ProductsItemDetailed.vue эмитит события:
- call-gallery: вызов галереи фоток
- call-order-form: вызов всплывашки с формой отправки заказа
- save-details: сохранение страницы после редактирования полного описания товара
# Форма заказа
Общая на все товары, находица в основном компоненте products.vue.
# Детальная всплывашка
Общая на все товары, находица в основном компоненте products.vue.