shopexpress-core

v2.4.48

Published

4 years ago

Ядро для шаблонов ShopExpress

0High
0Medium
0Low

shopexpress

Для разработки

Запускаем в репозитории 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)
1. Заменить smarty {compose} теги на подключения из build для стилей и скриптов
2. Создать файл package.json с нужными зависимостями (bootstrap в core уже есть, но 4-я версия, пока не понятно как совмещать со 3-й, т.к. все Vue-компоненты на 4-м)
Заменить скрипт корзины на Vue-компоненты
1. Добавить файлы 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>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme