You've already forked wc-bootstrap
magdev
01b807a769
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>
75 lines
2.9 KiB
Twig
75 lines
2.9 KiB
Twig
{#
|
|
# 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>
|