[miniShop2 4.0.0-beta] - Разбор нововведений. Кнопки "плюс" и "минус" в корзине.

В этой заметке расскажу вам о добавленном плагине для изменения количества товара. Очевидно, что его назначение облегчить кастомизацию поля ввода количества, чтобы оно органично вписывалось в дизайн.

Вёрстка по умолчанию выглядит так

<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-input-number-wrap. При этом если ms-input-number-wrap оставить, а классы ms-input-number-plus и ms-input-number-minus удалить, скорее всего скрипт упадёт с ошибкой, поэтому не делайте так.

За внешний вид отвечают классы ms-input-number-wrap, ms-input-number-emulator,
ms-input-number-btn и классы с префиксом btn (они из Bootstrap). Соответственно с ними вы вольны делать, что душе угодно можно переопределить, можно удалить и написать свои.

Несмотря на то, что тип поля text ввести буквы не получится. Кроме того, с помощью стандартных атрибутов для поля input можно задать некоторые ограничения, например, минимальное значение(атрибут min), максимальное значение(атрибут max), шаг(атрибут step), любители экзотики могут указать атрибут data-negative=«true» и тогда можно будет вводить отрицательное количество.

Если кому-то кажется неправильным указывать указывать нетипичные атрибуты, можно сделать копию файла assets/components/minishop2/js/web/vanilajs/default.js и указать конфигурацию плагина там, вот так:

import MiniShop from "./modules/minishop.class.js";

if (miniShop2Config) {
    miniShop2Config.inputNumber = {
        wrapperSelector: '.ms-input-number-wrap',
        minusSelector: '.ms-input-number-minus',
        plusSelector: '.ms-input-number-plus',
        min: 0,
        max: 1000,
        step: 10,
        negative: false,
    }
    window.miniShop2 = new MiniShop(miniShop2Config);   
}

На этом всё. Не забываем благодарить авторов, это вдохновляет делать больше и быстрее.