Files
wc-bootstrap/assets/js/quantity.js
magdev 01b807a769 Implement Phase 1: global templates and notices (Bootstrap 5)
Add 9 Twig template overrides for WooCommerce's global and notice templates:
- global/wrapper-start, wrapper-end: conditional container with _theme_wrapped
- global/breadcrumb: Bootstrap breadcrumb component with aria-current
- global/sidebar: offcanvas-lg for mobile, standard aside for desktop
- global/quantity-input: input-group with +/- buttons
- global/form-login: responsive form with form-control, form-check
- notices/notice, error, success: Bootstrap alert-dismissible with icons

Supporting changes:
- assets/js/quantity.js: +/- button handler respecting min/max/step
- assets/css/wc-bootstrap.css: WooCommerce notice fallback styles, spinner removal
- functions.php: register quantity.js script

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 10:19:10 +01:00

40 lines
1.3 KiB
JavaScript

/**
* Quantity Input +/- Button Handler
*
* Handles increment/decrement for Bootstrap 5 quantity input groups.
* Respects min, max, and step attributes on the input element.
* Triggers 'change' event so WooCommerce JS picks up the new value.
*
* @package WcBootstrap
* @since 0.1.0
*/
(function () {
'use strict';
function handleQuantityClick(e) {
var button = e.target.closest('.wc-qty-minus, .wc-qty-plus');
if (!button) return;
var target = button.getAttribute('data-target');
var input = target ? document.querySelector(target) : button.closest('.quantity').querySelector('input');
if (!input) return;
var currentVal = parseFloat(input.value) || 0;
var min = parseFloat(input.getAttribute('min')) || 0;
var max = parseFloat(input.getAttribute('max')) || Infinity;
var step = parseFloat(input.getAttribute('step')) || 1;
if (button.classList.contains('wc-qty-minus')) {
var newVal = currentVal - step;
input.value = newVal >= min ? newVal : min;
} else {
var newVal = currentVal + step;
input.value = max !== Infinity && newVal > max ? max : newVal;
}
input.dispatchEvent(new Event('change', { bubbles: true }));
}
document.addEventListener('click', handleQuantityClick);
})();