Custom Cart / Корзина

ver.1.0.0
от 01.07.2025 10:51

Особенности

  1. Изменение количества товара в поле на кнопки '+' и '-'
JS
от 01.07.2025 10:51
Как юзать
      new CustomCart();
    
Код
      /**
 *
 * Custom Cart 1.0.0
 * Корзина
 *
 * Copyright 2025 Mihail Pridannikov
 *
 * Released on: July 01, 2025
 *
 */

window.CustomCart = function(settingsCustom) {
    this.deepMergeObjects = function (obj1, obj2) {
        const result = {};
        for (const key in obj2) {
            if (obj2.hasOwnProperty(key)) {
                if (typeof obj2[key] === "object" && obj1.hasOwnProperty(key) && typeof obj1[key] === "object") {
                    result[key] = this.deepMergeObjects(obj1[key], obj2[key]);
                } else {
                    result[key] = obj2[key];
                }
            }
        }
        for (const key in obj1) {
            if (obj1.hasOwnProperty(key) && !result.hasOwnProperty(key)) {
                if (typeof obj1[key] === "object") {
                    result[key] = this.deepMergeObjects(obj1[key], {});
                } else {
                    result[key] = obj1[key];
                }
            }
        }
        return result;
    }

    const QUANTITY = document.querySelectorAll('.quantity');

    const DEFAULT_SETTINGS = {}

    let settings = this.deepMergeObjects(DEFAULT_SETTINGS, settingsCustom);

    this.init = () => {
        QUANTITY.forEach(quantity => {
            let input = quantity.querySelector('.quantity__input');
            let buttonDecrement = quantity.querySelector('.quantity__button-prev');
            let buttonIncrement = quantity.querySelector('.quantity__button-next');

            buttonDecrement.addEventListener('click', (e) => this.handlerClickOnButtonDecrement(e, quantity, input, buttonDecrement), {passive: true});
            buttonIncrement.addEventListener('click', (e) => this.handlerClickOnButtonIncrement(e, quantity, input, buttonDecrement), {passive: true});
            input.addEventListener('input', (e) => this.handlerInputOnInput(e, quantity, input, buttonDecrement), {passive: true});
            input.addEventListener('blur', (e) => this.handlerBlurOnInput(e, quantity, input, buttonDecrement));
            input.addEventListener('keypress', (e) => this.disabledLetterWordInQuantity(e));
        });
    }
    this.handlerClickOnButtonDecrement = (e, quantity, input, buttonDecrement) => {
        input.value = parseInt(input.value) - 1;
        if (parseInt(input.value) === 1) {
            buttonDecrement.setAttribute('disabled', '');
        }
    }
    this.handlerClickOnButtonIncrement = (e, quantity, input, buttonDecrement) => {
        input.value = parseInt(input.value) + 1;
        if (parseInt(input.value) > 1) {
            buttonDecrement.removeAttribute('disabled');
        }
    }
    this.handlerInputOnInput = (e, quantity, input, buttonDecrement) => {
        if (parseInt(input.value) <= 1) {
            buttonDecrement.setAttribute('disabled', '');
            input.value = 1;
        } else {
            buttonDecrement.removeAttribute('disabled');
        }
    }
    this.handlerBlurOnInput = (e, quantity, input, buttonDecrement) => {
        if (input.value === '') {
            buttonDecrement.setAttribute('disabled', '');
            input.value = 1;
        }
    }
    this.disabledLetterWordInQuantity = (e) => {
        if (!e.key.match(/[0-9]/) && e.key !== 'Backspace') {
            e.preventDefault();
        }
    }

    this.init();
}
    

Changelogs

v1.0.0
latest
от 01 Июля 2025
  • Изменение количества товара в поле на кнопки '+' и '-'