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:
2026-02-28 10:19:10 +01:00
parent 9592b8cae5
commit 01b807a769
14 changed files with 477 additions and 16 deletions

View File

@@ -37,19 +37,56 @@
*/
/* ==========================================================================
Notification Overrides
Map plugin notification classes to Bootstrap alert styles.
WooCommerce Notice Overrides
Map WooCommerce notice classes to Bootstrap alert styles as fallback
when notices are rendered outside our Twig templates.
========================================================================== */
/* Example: Map plugin .my-notification to Bootstrap alert
.my-notification {
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
position: relative;
padding: 1rem 1rem;
padding: 1rem 3rem 1rem 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: var(--bs-border-radius);
}
*/
.woocommerce-info {
color: var(--bs-info-text-emphasis);
background-color: var(--bs-info-bg-subtle);
border-color: var(--bs-info-border-subtle);
}
.woocommerce-message {
color: var(--bs-success-text-emphasis);
background-color: var(--bs-success-bg-subtle);
border-color: var(--bs-success-border-subtle);
}
.woocommerce-error {
color: var(--bs-danger-text-emphasis);
background-color: var(--bs-danger-bg-subtle);
border-color: var(--bs-danger-border-subtle);
list-style: none;
padding-left: 1rem;
}
/* ==========================================================================
Quantity Input
Sizing for the Bootstrap input-group quantity widget.
========================================================================== */
.quantity.input-group .form-control {
/* Remove number input spinners (browser default) */
-moz-appearance: textfield;
}
.quantity.input-group .form-control::-webkit-outer-spin-button,
.quantity.input-group .form-control::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* ==========================================================================
Dark Mode Overrides