JavaScript è in grado oggi di svolgere gli stessi compiti di jQuery, come ad esempio aggiornare la quantità in un carrello di WooCommerce.
Supponiamo di avere questa struttura HTML in WooCommerce:
<span class="qty-wrap">
<span class="qty-minus"><i class="fa fa-minus"></i></span>
<input type="text" name="quantity" 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();
});