2.4.48 • Published 2 years ago

shopexpress-core v2.4.48

Weekly downloads
69
License
ISC
Repository
gitlab
Last release
2 years ago

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

  • Запускаем в репозитории 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 компонента из перечисленных выше.

Порядок встраивания в шаблон

  1. Подключить vue/vue.js в общий js файл для шаблона
  2. Прописать в <head> шаблона
{if $antispam}
    <meta name="csrf-token" content="{$antispam}">
{/if}
  1. Обернуть root файлы шаблонов в wrapper с id='vue-app'
  2. Настроить сборку webpack (пример можно взять из https://gitlab.com/difocus/templates/template-10001/-/tree/develop)
    1. Заменить smarty {compose} теги на подключения из build для стилей и скриптов
    2. Создать файл package.json с нужными зависимостями (bootstrap в core уже есть, но 4-я версия, пока не понятно как совмещать со 3-й, т.к. все Vue-компоненты на 4-м)
  3. Заменить скрипт корзины на 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
  4. Перенести и/или удалить старые скрипты из scripts.html в общий файл js
  5. Заменить модальные окна на Vue-модалки, пример файла inc/modals.html взять из https://gitlab.com/difocus/templates/template-10001/-/tree/develop, подключить его во все root файлы шаблона
  6. Заменить кнопки добавления в корзину, кнопки Добавить в избранное и в Сравнение на Vue-кнопки
  7. Форму поиска
  8. Форму подписки на рассылку RegisterSubscribe на Vue-форму
  9. Добавить кнопку на корзину в шапку CartMini
  10. Добавить директиву v-b-modal="'authentication-modal'" открытия модального окна авторизации/регистрации на соотв. ссылки
  11. Добавить директиву v-b-modal="'shopexpresscallback-modal'" аналогично
  12. Переделать filters.html под js/jquery.filters.js
  13. Создать root-шаблон для группового товара groupproduct.html
  14. Удалить 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>
2.4.47

2 years ago

2.4.46

2 years ago

2.4.48

2 years ago

2.4.45

3 years ago

2.4.44

3 years ago

2.4.43

3 years ago

2.4.42

3 years ago

2.4.39

3 years ago

2.4.41

3 years ago

2.4.40

3 years ago

2.4.36

3 years ago

2.4.35

3 years ago

2.4.38

3 years ago

2.4.37

3 years ago

2.4.32

3 years ago

2.4.33

3 years ago

2.4.31

3 years ago

2.4.29

3 years ago

2.4.28

3 years ago

2.4.30

3 years ago

2.4.27

3 years ago

2.4.26

3 years ago

2.4.25

3 years ago

2.4.24

3 years ago

2.4.23

3 years ago

2.4.22

3 years ago

2.4.21

3 years ago

2.4.20

3 years ago

2.4.18

3 years ago

2.4.17

3 years ago

2.4.19

3 years ago

2.4.16

3 years ago

2.4.14

3 years ago

2.4.13

3 years ago

2.4.15

3 years ago

2.4.10

3 years ago

2.4.12

3 years ago

2.4.11

3 years ago

2.4.7

3 years ago

2.4.9

3 years ago

2.4.8

3 years ago

2.4.6

3 years ago

2.4.5

3 years ago

2.4.0

3 years ago

2.4.3

3 years ago

2.4.2

3 years ago

2.4.4

3 years ago

2.3.32

3 years ago

2.3.31

3 years ago

2.3.30

3 years ago

2.3.29

3 years ago

2.3.27

3 years ago

2.3.26

3 years ago

2.3.25

3 years ago

2.3.24

3 years ago

2.3.23

3 years ago

2.3.20

3 years ago

2.3.22

3 years ago

2.3.21

3 years ago

2.3.19

3 years ago

2.3.18

3 years ago

2.3.17

3 years ago

2.3.16

3 years ago

2.3.13

3 years ago

2.3.12

3 years ago

2.3.15

3 years ago

2.3.14

3 years ago

2.2.1

3 years ago

2.2.0

3 years ago

2.2.15

3 years ago

2.2.3

3 years ago

2.2.16

3 years ago

2.2.2

3 years ago

2.2.5

3 years ago

2.2.14

3 years ago

2.2.4

3 years ago

2.2.11

3 years ago

2.2.7

3 years ago

2.2.12

3 years ago

2.2.6

3 years ago

2.2.10

3 years ago

2.3.8

3 years ago

2.3.7

3 years ago

2.3.9

3 years ago

2.3.0

3 years ago

2.1.1

3 years ago

2.3.2

3 years ago

2.3.1

3 years ago

2.3.4

3 years ago

2.3.3

3 years ago

2.3.6

3 years ago

2.3.5

3 years ago

2.1.0

3 years ago

2.2.9

3 years ago

2.2.8

3 years ago

2.0.18

3 years ago

2.3.11

3 years ago

2.3.10

3 years ago

2.0.17

3 years ago

2.0.16

3 years ago

2.0.15

3 years ago

2.0.13

3 years ago

2.0.14

3 years ago

2.0.12

3 years ago

2.0.11

3 years ago

2.0.10

3 years ago

2.0.9

3 years ago

2.0.8

3 years ago

2.0.7

3 years ago

2.0.6

3 years ago

2.0.5

3 years ago

1.5.5

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.4

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.5.4

3 years ago

1.5.3

3 years ago

1.5.2

3 years ago

1.5.1

3 years ago

1.5.0

3 years ago

1.4.0

3 years ago

1.3.0

3 years ago

1.2.6

3 years ago

1.2.5

3 years ago

1.2.4

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.2.0

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago