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:
74
templates/global/quantity-input.html.twig
Normal file
74
templates/global/quantity-input.html.twig
Normal file
@@ -0,0 +1,74 @@
|
||||
{#
|
||||
# Quantity Input (Bootstrap 5 Override)
|
||||
#
|
||||
# Replaces WooCommerce's quantity input with a Bootstrap 5 input-group
|
||||
# featuring decrement/increment buttons.
|
||||
#
|
||||
# Expected context (from WooCommerce woocommerce_quantity_input()):
|
||||
# input_id - Input element ID
|
||||
# input_name - Input element name attribute
|
||||
# input_value - Current quantity value
|
||||
# min_value - Minimum allowed quantity
|
||||
# max_value - Maximum allowed quantity (0 = no max)
|
||||
# step - Step increment
|
||||
# placeholder - Placeholder text
|
||||
# inputmode - Input mode (e.g., 'numeric')
|
||||
# classes - CSS class(es) for the input
|
||||
# readonly - Whether input is read-only
|
||||
# type - Input type attribute
|
||||
# args - Additional args (product_name for accessible label)
|
||||
# autocomplete - Autocomplete attribute value
|
||||
#
|
||||
# WooCommerce PHP equivalent: global/quantity-input.php
|
||||
#
|
||||
# @package WcBootstrap
|
||||
# @since 0.1.0
|
||||
#}
|
||||
|
||||
{% set label = args.product_name is defined and args.product_name
|
||||
? __('%s quantity')|format(args.product_name)
|
||||
: __('Quantity')
|
||||
%}
|
||||
|
||||
<div class="quantity input-group input-group-sm" style="max-width: 140px;">
|
||||
{{ do_action('woocommerce_before_quantity_input_field') }}
|
||||
|
||||
<label class="visually-hidden" for="{{ input_id|esc_attr }}">{{ label|esc_attr }}</label>
|
||||
|
||||
{% if not readonly %}
|
||||
<button type="button"
|
||||
class="btn btn-outline-secondary wc-qty-minus"
|
||||
aria-label="{{ __('Decrease quantity') }}"
|
||||
data-target="#{{ input_id|esc_attr }}">
|
||||
<i class="bi bi-dash" aria-hidden="true"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<input type="{{ type|default('number')|esc_attr }}"
|
||||
{% if readonly %}readonly="readonly"{% endif %}
|
||||
id="{{ input_id|esc_attr }}"
|
||||
class="form-control text-center {{ classes is iterable ? classes|join(' ')|esc_attr : classes|default('')|esc_attr }}"
|
||||
name="{{ input_name|esc_attr }}"
|
||||
value="{{ input_value|esc_attr }}"
|
||||
aria-label="{{ __('Product quantity')|esc_attr }}"
|
||||
min="{{ min_value|esc_attr }}"
|
||||
{% if max_value is defined and max_value > 0 %}max="{{ max_value|esc_attr }}"{% endif %}
|
||||
{% if not readonly %}
|
||||
step="{{ step|esc_attr }}"
|
||||
placeholder="{{ placeholder|esc_attr }}"
|
||||
inputmode="{{ inputmode|default('numeric')|esc_attr }}"
|
||||
autocomplete="{{ autocomplete|default('on')|esc_attr }}"
|
||||
{% endif %}
|
||||
/>
|
||||
|
||||
{% if not readonly %}
|
||||
<button type="button"
|
||||
class="btn btn-outline-secondary wc-qty-plus"
|
||||
aria-label="{{ __('Increase quantity') }}"
|
||||
data-target="#{{ input_id|esc_attr }}">
|
||||
<i class="bi bi-plus" aria-hidden="true"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
{{ do_action('woocommerce_after_quantity_input_field') }}
|
||||
</div>
|
||||
Reference in New Issue
Block a user