wc-bootstrap/templates/components/quantity-input.html.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>