You've already forked wc-bootstrap
53 lines
2.0 KiB
Twig
53 lines
2.0 KiB
Twig
|
{#
|
||
|
|
# Quantity Input Component (Bootstrap 5)
|
||
|
|
#
|
||
|
|
# Reusable quantity input with +/- buttons using Bootstrap input-group.
|
||
|
|
# Works with the quantity.js script for increment/decrement.
|
||
|
|
#
|
||
|
|
# Expected context:
|
||
|
|
# input_name - Input name attribute (default: 'quantity')
|
||
|
|
# input_id - Input id attribute (optional)
|
||
|
|
# input_value - Current quantity value (default: 1)
|
||
|
|
# min_value - Minimum quantity (default: 1)
|
||
|
|
# max_value - Maximum quantity (default: '')
|
||
|
|
# step - Step increment (default: 1)
|
||
|
|
# classes - Additional CSS classes (optional)
|
||
|
|
#
|
||
|
|
# Usage:
|
||
|
|
# {% include 'components/quantity-input.html.twig' with {
|
||
|
|
# input_name: 'quantity',
|
||
|
|
# input_value: 1,
|
||
|
|
# min_value: 1,
|
||
|
|
# max_value: product.get_max_purchase_quantity()
|
||
|
|
# } %}
|
||
|
|
#
|
||
|
|
# @package WcBootstrap
|
||
|
|
# @since 0.1.0
|
||
|
|
#}
|
||
|
|
|
||
|
|
{% set qty_name = input_name|default('quantity') %}
|
||
|
|
{% set qty_id = input_id|default('quantity_' ~ random()) %}
|
||
|
|
{% set qty_value = input_value|default(1) %}
|
||
|
|
{% set qty_min = min_value|default(1) %}
|
||
|
|
{% set qty_max = max_value|default('') %}
|
||
|
|
{% set qty_step = step|default(1) %}
|
||
|
|
|
||
|
|
<div class="quantity input-group input-group-sm {{ classes|default('') }}" style="max-width: 140px;">
|
||
|
|
<button type="button" class="btn btn-outline-secondary qty-minus" aria-label="{{ __('Decrease quantity') }}">
|
||
|
|
<i class="bi bi-dash" aria-hidden="true"></i>
|
||
|
|
</button>
|
||
|
|
<input type="number"
|
||
|
|
class="form-control text-center"
|
||
|
|
name="{{ qty_name|esc_attr }}"
|
||
|
|
id="{{ qty_id|esc_attr }}"
|
||
|
|
value="{{ qty_value|esc_attr }}"
|
||
|
|
min="{{ qty_min|esc_attr }}"
|
||
|
|
{% if qty_max %}max="{{ qty_max|esc_attr }}"{% endif %}
|
||
|
|
step="{{ qty_step|esc_attr }}"
|
||
|
|
inputmode="numeric"
|
||
|
|
aria-label="{{ __('Quantity') }}" />
|
||
|
|
<button type="button" class="btn btn-outline-secondary qty-plus" aria-label="{{ __('Increase quantity') }}">
|
||
|
|
<i class="bi bi-plus" aria-hidden="true"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|