JavaScript: aggiornamento della quantità in un carrello e-commerce senza jQuery

JavaScript: aggiornamento della quantità in un carrello e-commerce senza jQuery

JavaScript è in grado oggi di svolgere gli stessi compiti di jQuery, come ad esempio aggiornare la quantità in un carrello di un e-commerce.

Supponiamo di avere questa struttura HTML:


<span class="qty-wrap">
    <span class="qty-minus"><i class="fa fa-minus"></i></span>
    <input type="text" name="qty" class="qty" value="1">
    <span class="qty-plus"><i class="fa fa-plus"></i></span>
</span>

In JavaScript avremo:


'use strict';

const Store = {
    quantity: () => {
        let qtyWrap = document.querySelectorAll('.qty-wrap');
        if(qtyWrap.length > 0) {
            for(let i = 0; i < qtyWrap.length; i++) {
                let qty = qtyWrap[i];
                let minus = qty.querySelector('.qty-minus');
                let plus =  qty.querySelector('.qty-plus');
                let input = qty.querySelector('.qty');
                let value = parseInt(input.value, 10);

                plus.addEventListener('click', () => {
                    value = value + 1;
                    input.value = value;
                });

                minus.addEventListener('click', () => {
                    value = (value > 1) ? (value - 1) : 1;
                    input.value = value;
                });

            }
        }
    }
};

document.addEventListener('DOMContentLoaded', () => {
    Store.quantity();
});

Torna su