MiniShop2 4.0.0.alpha. Подробности про изменённый JavaScript.

Как вы уже, наверное, знаете основное отличие нового JavaScript в MiniShop2 от старого это отсутствие зависимостей от сторонних библиотек, в частности от jQuery. Это хороший и полезный инструмент, но современный JS, на мой взгляд, позволяет обходится без него.

Об изменениях в целом.
Скрипты переписаны по стандарту ES6, разбиты на модули и, соответственно, подключаются как модули

<script type="module" src="/assets/components/minishop2/js/web/vanilajs/default.js?v=667ec14321"></script>

Первое преимущество такого подхода — загрузка скриптов не мешает загрузки страницы. Однако есть нюанс, ваши скрипты, которые используют объект miniShop2, должны подключаться строго после загрузки всех скриптов miniShop2, для этого было добавлено событие minishop-loaded

document.addEventListener("DOMContentLoaded", function(){
    miniShop2.Callbacks.add('Order.add.response.success', 'orders_add_ok', function(response) {
        miniShop2.Message.success('Всё хорошо!');
        miniShop2.Callbacks.remove('Order.add.response.success', 'orders_add_ok');
    });
});

Или, можно делать копию файла /assets/components/minishop2/js/web/vanilajs/default.js и писать в нём, после чего указать путь к своему файлу в системой настройке ms2_vanila_js.

О модульности
Второе преимущество это модульность.
Первый модуль называется MiniShop это в каком-то смысле хаб, который отвечает за подключение других модулей, отправку запросов на сервер и содержит некоторые вспомогательные функции (форматирование веса и цены).

Следующий модуль msNotify, он представляет собой класс-интерфейс, т.е. показывает какие методы можно использовать для показа уведомлений в своём классе. Стоит отметить, что метод close() не используется в новых скриптах по умолчанию. Модуль msIziToast непосредственно отвечает за показ уведомлений из коробки, именно он заменил всеми «любимый» jGrowl. Этот класс расширяет базовый класс msNotify. Внимание, настройки модуля уведомлений хранятся в отдельном файле([[+jsUrl]]web/vanilajs/message_settings.json), как и раньше, но теперь это обычный JSON объект. Ключ настроек должен полностью совпадать с именем класса, т.е. если класс называется customNotify, то файл с настройками должен быть таким

{
  "msNotify": {},
  "msIziToast": {
    "jsPath": "assets/components/minishop2/js/web/vanilajs/lib/izitoast/iziToast.min.js",
    "cssPath": "assets/components/minishop2/css/web/lib/izitoast/iziToast.min.css",
    "handlerClassName": "iziToast",
    "handlerOptions": {
      "timeout": 1500
    }
  },
  "customNotify": {
    "timeout" : 2000
  }
}

Удалять уже имеющиеся настройки не рекомендуется. Копируйте файл целиком и дописывайте свои или правьте имеющиеся. Для самых ленивых вот ссылка на документацию к IziToast. Если вы не хотите использовать готовые библиотеки, а хотите написать свое решение, ради бога, но даже в этом случае в файл с настройками (web/vanilajs/message_settings.json) нужно добавить запись с ключом равным имени вашего класса уведомлений и пустым объектом в качестве значения, как это сделано для msNotify.

Оставшиеся два модуля это Корзина(msCart) и Заказ(msOrder). Никаких принципиальных изменений логика работы этих скриптов не претерпела. Чисто теоретически, можно брать готовый объект miniShop2 и переопределять любые методы любых классов из своих скриптов, но так делать ни в коем случае не нужно, так это может сломать что-нибудь и найти ошибку будет трудно, наверное.

О мелочах
Была удалена галерея Fotorama, т.к. к работе магазина она имеет довольно опосредованное отношение и каждый волен использовать те библиотеки, которые ему хочется.
Из приятных мелочей, был добавлен плагин для управления полем количества товара. Это тоже модуль, подключается он в корзине и отвечает за корректную работу поля ввода количества. По функционалу полностью повторяет стандартный input[type=number], но имеет кнопки «плюс» и «минус» и даёт возможность их кастомизации под текущий дизайн. Вёрстка самого поля находится в чанке tpl.msCartNew, вот она:

<div class="ms-input-number-wrap">
    <button class="ms-input-number-btn ms-input-number-minus btn btn-sm btn-secondary" type="button">−</button>
    <input class="ms-input-number-emulator" value="{$product.count}" name="count" type="text">
    <button class="ms-input-number-btn ms-input-number-plus btn btn-sm btn-secondary" type="button">+</button>
</div>

Чтобы отключить плагин просто удалите разметку для него. Однако если решите оставить, классы с префиксом ms- удалять не следует. Хотя если очень хочется, то можно

1. Скопировать web/vanilajs/default.js;
2. До создания класса miniShop2 добавить в стандартный кофиг свои классы, примерно так

if (miniShop2Config) {
            miniShop2Config.inputNumber = {
                wrapperSelector: '.custom-number-wrap',
                minusSelector: '.custom-number-minus',
                plusSelector: '.custom-number-plus'
            }
            window.miniShop2 = new MiniShop(miniShop2Config);
        }

3. Указать эти же классы для блока обёртки, кнопок плюс и минус.

Смысла я в этом не вижу, но возможность такая есть, ибо нельзя ограничивать полет фантазии творца.

Для переопределения логики основных модулей нужно использовать механизм наследования классов, например ка это сделано в классе msIziToast

import msNotify from "./msnotify.class.js";

export default class msIziToast extends msNotify {
    show(type, message) {
        if (window[this.config.handlerClassName]) {
            const options = Object.assign(this.config.handlerOptions, {title: message});
            try {
                window[this.config.handlerClassName][type](options);
            } catch (e) {
                console.error(e, 'Не найден метод ' + type + ' в классе ' + this.config.handlerClassName);
            }
        }
    }
}

Не забывайте экспортировать свои классы по дефолту. После чего нужно указать путь и имя вашего класса в соответствующей системой настройке:

1. Для корзины: ms2_cart_js_class_name и ms2_cart_js_class_path;
2. Для заказа: ms2_order_js_class_name и ms2_order_js_class_path;
3. Для уведомлений: ms2_notify_js_class_name и ms2_notify_js_class_path.

Механизм колбэков остался неизменным, но мы не тестировали его на совместимость с другими компонентами, собственно поэтому и выпускаем данный релиз с призывом к авторам проверить совместимость ваших творений с нашим. По этой же причине, было принято решение по умолчанию оставить старые скрипты, для переключения на новые добавили системную настройку ms2_toggle_js_type.

P.S. Лично у меня в планах запилить фильтры, избранное и сравнение, чтобы всё это было из коробки. Если получится не слишком плохо, глядишь и добавят в пакет. Сразу скажу фильтры будут самые простецкие без гарантий высокой производительности на больших проектах, хотя я конечно постараюсь оптимизировать что смогу, и точно без предварительного подсчёта результатов. С избранным вроде ничего сложного нет. Как реализовать сравнение ещё думаю.

БЛАГОДАРНОСТИ
Напоследок хочу сказать спасибо @Баха Волков за код-ревью и @Николай Савин за моральную поддержку и терпение.

Развитие MiniShop происходит исключительно благодаря Вам друзья!
Финансовая поддержка с вашей стороны, позволяет выделять больше времени на развитие сообщества и обновлять наши проекты, которые в свою очередь приносят пользу и вам.

Поддержать нас можно, используя следующие каналы для доната:

• Отправить донат с карты
• Отправить донат на Яндекс. Деньги
• Отправить донат на Qiwi

Огромное спасибо, всем кто поддерживает!

БОНУС: ссылка на скачивание пакета

document.addEventListener("minishop-loaded", function(){
    miniShop2.Callbacks.add('Order.add.response.success', 'orders_add_ok', function(response) {
        miniShop2.Message.success('Всё хорошо!');
        miniShop2.Callbacks.remove('Order.add.response.success', 'orders_add_ok');
    });
});