You've already forked wc-bootstrap
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>
This commit is contained in:
39
assets/js/quantity.js
Normal file
39
assets/js/quantity.js
Normal file
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* 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);
|
||||
})();
|
||||
Reference in New Issue
Block a user