Для разработки
- Запускаем в репозитории
npm link
- создаст глобальный симлинк на пакет - В проекте шаблона запускаем
npm link shopexpress-core
заменит пакет на симлинк - Делаем
npm run watch
в шаблоне (в webpback должен быть включенresolve.symlinks=true
)
Публикация
- Если вносились правки в пуше проставляем
version
для package.json - После пуша делаем
npm publish
, предварительно авторизовавшись в аккаунтеnpm login
Доступные VUE-компоненты
- Account.vue - Личный кабинет
- Auth.vue - Форма авторизации и регистрации по СМС
- Comments.vue - Форма для вывода комментариев
- Виджеты корзины
- Cart.vue - Список товаров в корзине
- CartButton.vue - Кнопка добавления товара в корзину
- CartFastOrder.vue - Форма быстрого заказа по Email
- CartForm.vue - Расширенная форма добавления товара в корзину с опциями группового товара и спецификациями
- CartMini.vue - Кнопка корзины в шапке сайта (отображает кол-во товара и открывает CartSidebar.vue)
- CartOneClick.vue - Компонент для вывода упрощенной корзины быстрого заказа в 1 клик
- CartQuantity.vue - Компонент для указания кол-ва товара
- CartSidebar.vue - Упрощенная боковая корзина
- OrderForm.vue - Форма заказа в корзине
- DuplicateOrder.vue - Кнопка дублирования заказа
- Виджеты каталога
- Catalog.vue - Список товаров в каталоге (отображает отфильтрованный список товаров для текущей страницы)
- Filters.vue - Фильтры в каталоге
- FiltersHorizontal.vue - Горизонтальные фильтры в каталоге
- DigitSlider.vue - Выводит поле для ввода диапазона чисел
- OrderBy.vue - Кнопка сортировки в каталоге
- PerPage.vue - Кнопка кол-во товара на странице в каталоге
- Pagination.vue - Пагинация в каталоге
- ShowMore.vue - Кнопка "Показать ещё" в каталоге
- FavoritesMini.vue - Кнопка избранного в шапке сайта (отображает кол-во товара в избранном)
- ComparedMini.vue - Кнопка сравнения в шапке сайта (отображает кол-во товара к сравнению)
- CompareButton.vue - Кнопка для добавления товара к сравнению
- FavoriteButton.vue - Кнопка для добавления товара в избранное,
- ViewType.vue - Кнопки для смены типа отображения списка товаров
- ProductImages.vue - Слайд шоу для товаров
- ArrivalsSubscription.vue - Кнопка "Подписаться на уведомление о поступлении"
- CheapenSubscription.vue - Кнопка "Подписаться на уведомление о снижении цены"
- SearchSuggest.vue - Интерактивное поле поиска по каталогу
- ContactForm.vue - Форма обратной связи
- RegisterSubscribe.vue - Подписка на рассылку (на основе ContactForm)
- YouTubeIframe.vue - Адаптивный вывод YouTube iframe-видео на странице
- CircleLoading.vue, FacebookLoading.vue - Круговая и горизонтальная загрузка для компонента VueLoading
- InvalidFeedback.vue - Выводит ошибки валидации для поля
- CountDown.vue - Таймер обратного отсчета
- Messages.vue - Глобальные уведомления
- Payments.vue - Кнопки способов платы для перехода к оплате заказа
- InstagramPosts.vue - Слайдер с Instagram-постами
- Order.vue - Вывод заказа на страницу
- AffiliateProgram.vue - Вывод партнерской программы
- YandexMap.vue - Отображение Яндекс карты
Модальные окна
- AuthModal.vue - Модалка с формой авторизации
- CartMagicLinkModal.vue - Модалка с формой отправки ссылки на корзину по Email
- CartOneClickModal.vue - Модалка с компонентом заказа в 1 клик
- ShopExpressPopupModal.vue - Модалка для виджета рекламного предложения
- ShopExpressCallbackModal.vue - Модалка для виджета обратного звонка (на основе ContactForm)
Доступные скрипты и стили
В /js
и css
лежат доступные скрипты и стили для подключения, если каких-то не хватает из libs или media0, то класть сюда, но сначала проверить нет ли такого VUE компонента из перечисленных выше.
Порядок встраивания в шаблон
- Подключить
vue/vue.js
в общий js файл для шаблона - Прописать в
<head>
шаблона
{if $antispam}
<meta name="csrf-token" content="{$antispam}">
{/if}
- Обернуть root файлы шаблонов в wrapper с
id='vue-app'
- Настроить сборку webpack (пример можно взять из https://gitlab.com/difocus/templates/template-10001/-/tree/develop)
- Заменить smarty
{compose}
теги на подключения из build для стилей и скриптов - Создать файл
package.json
с нужными зависимостями (bootstrap в core уже есть, но 4-я версия, пока не понятно как совмещать со 3-й, т.к. все Vue-компоненты на 4-м)
- Заменить smarty
- Заменить скрипт корзины на Vue-компоненты
- Добавить файлы
mod/basket/json.html
,mod/basket/form.html
,mod/cabinet/json.html
,mod/cabinet/account.html
,mod/cabinet/message.html
из https://gitlab.com/difocus/templates/template-10001/-/tree/develop
- Добавить файлы
- Перенести и/или удалить старые скрипты из scripts.html в общий файл js
- Заменить модальные окна на Vue-модалки, пример файла
inc/modals.html
взять из https://gitlab.com/difocus/templates/template-10001/-/tree/develop, подключить его во все root файлы шаблона - Заменить кнопки добавления в корзину, кнопки Добавить в избранное и в Сравнение на Vue-кнопки
- Форму поиска
- Форму подписки на рассылку RegisterSubscribe на Vue-форму
- Добавить кнопку на корзину в шапку CartMini
- Добавить директиву
v-b-modal="'authentication-modal'"
открытия модального окна авторизации/регистрации на соотв. ссылки - Добавить директиву
v-b-modal="'shopexpresscallback-modal'"
аналогично - Переделать filters.html под
js/jquery.filters.js
- Создать root-шаблон для группового товара groupproduct.html
- Удалить
mod/merchants/*
и заменить из https://gitlab.com/difocus/templates/template-10001/-/tree/develop
Пример встраивания Vue-компонента CartForm
Полный json для отображения корзины подгружается в Vuex и доступен для любого Vue компонента.
<cart-form
price-cls="css-класс для цены"
one-click-button-cls="для кнопки покупки в 1 клик"
cart-button-wrapper-cls="для враппера с кнопкой добавления в корзину"
empty-price-message="Цена не указана."
:show-cart-fast-order="показывать форму быстрого заказа"
:cart-button="{
// Конфиг для кнопки добавления товара в заказ
'buttonCls': 'css-класс кнопки',
'addButtonCls': 'css-класс дополнительной кнопки, когда товар уже есть в корзине (актуально только для опций)',
'iconCls': 'класс иконки для кнопки',
'extended': 'показать/скрыть форму для изменения кол-ва товара',
}"
:cart-fast-order="{
// Конфиг для формы быстрого заказа
'initial-phone': 'телефон авторизованного пользователя',
'button-text': 'текст на кнопке заказа',
'description-text': 'текст описания перед фомой заказа',
}"
:oid="oid товара, на странице которого отображается форма"
:disabled="понятно"
:options='json опций товара'
:initial-price="начальная цена товара после открытия страницы (динамически изменяется в зависимости от кол-ва, выбранной опции и спецификаций)"
:initial-old-price="начальная старая цена товара"
>
<!-- А ещё есть слоты, на случай если между ценой и кнопками нужно вставить доп. контент или компоненты -->
<template v-slot:before></template>
<template v-slot:old-price></template>
<template v-slot:price></template>
<template v-slot:after-price></template>
<template v-slot:option></template>
<template v-slot:field></template>
<template v-slot:before-cart-button></template>
<template v-slot:after-cart-button></template>
<template v-slot:after></template>
</cart-form>
Пример встраивания Vue-компонента FavoriteButton
<favorite-button
pressed-cls="active"
:hide-icon="скрывать иконки"
:extended="скрыть названия и выводить иконки с tooltip при наведении (по-умолчанию extended=true)"
pressed-button-text="Из избранного"
unpressed-button-text="В избранное"
:oid="oid объекта для добавления в избранное">
</favorite-button>
Пример встраивания Vue-компонента Comments
<comments
:comments='{$comments|json_encode}'
:create-fields='{$comments_create_fields|json_encode}'
:auth-only="{$comments_auth_only|json_encode}"
:is-login="{$comments_is_login|json_encode}"
:is-admin="{$comments_is_admin|json_encode}"
:polls='{$comments_polls|json_encode}'>
</comments>
Пример встраивания Vue-компонента ProductImages
{$watermarkPath = 0}
{$watermarkPosition = 0}
{if $GLOBS.WATERMARK[0] && $GLOBS.WATERMARK[0].path}
{$watermarkPath = $GLOBS.WATERMARK[0].path}
{/if}
{if $GLOBS.WATERMARK_POSITION}
{$watermarkPosition = $GLOBS.WATERMARK_POSITION}
{/if}
{foreach $images as $key => $image}
{$images[$key]['medium'] = "/{image src=$image.path width=400 folder=".400" crop=true}"}
{if $watermarkPath}
{$images[$key]['watermark'] = "/{watermark src=$image.path watermark=$watermarkPath position=$watermarkPosition}"}
{/if}
{/foreach}
<div class="product-images">
<product-images :images='{$images|json_encode}'></product-images>
</div>
Если нужно поменять структуру слайдов - используем слоты:
<product-images :images='{$images|json_encode}'>
<template v-slot:main-slide="{ image, idx }">
<a :href="image.watermark ? image.watermark : image.path" class="glightbox" data-gallery="product">
<img :data-splide-lazy="image.medium ? image.medium : image.path" :alt="image.name">
</a>
</template>
<template v-slot:thumbs-slide="{ image }">
<img :src="image.thumb" :alt="image.name">
</template>
</product-images>