Plugin Documentation

Quantity selector

The Quantity Selector is a user interface component that allows users to select a specific quantity of an item within a defined range. It includes controls to increase or decrease the quantity, and an input field where users can directly enter a value. The component enforces minimum and maximum quantity limits and can be disabled based on specific requirements.

Suggest Edits

ℹ️

Beta Feature

The feature described here will be available starting with SureCart version 3.0. If you'd like to try this feature before the official release, you can install the beta version by visiting the SureCart plugin page on WordPress.org. In the Advanced Options section, select the latest version labeled "SureCart V3.0-Beta" from the Development Version dropdown, and click "Download."

Selector markup

The quantity block can be broken down into these three main sections. To be functional, they should be combined under one parent that has a class of sc-quantity-selector

1. Decrease quantity button

<div
    role="button"
    tabindex="0"
    class="sc-quantity-selector__decrease"
    data-wp-on--click="callbacks.onQuantityDecrease"
    data-wp-bind--disabled="state."
    data-wp-bind--aria-disabled="state.isQuantityDecreaseDisabled"
    data-wp-class--button--disabled="state.isQuantityDecreaseDisabled"
    aria-label="<?php echo esc_html__( 'Decrease quantity by one.', 'surecart' ); ?>"
 >
  <?php echo wp_kses( SureCart::svg()->get( 'minus' ), sc_allowed_svg_html() ); ?>
 </div>

2. Increase quantity button

<div
    role="button"
    tabindex="0"
    class="sc-quantity-selector__increase"
    data-wp-on--click="callbacks.onQuantityIncrease"
    data-wp-bind--disabled="state.isQuantityIncreaseDisabled"
    data-wp-bind--aria-disabled="state.isQuantityIncreaseDisabled"
    data-wp-class--button--disabled="state.isQuantityIncreaseDisabled"
    aria-label="<?php echo esc_html__( 'Increase quantity by one.', 'surecart' ); ?>"
>
  <?php echo wp_kses( SureCart::svg()->get( 'plus' ), sc_allowed_svg_html() ); ?>
</div>

3. Quantity input

<input
    class="sc-quantity-selector__control"
    data-wp-bind--value="state.quantity"
    data-wp-on--change="callbacks.onQuantityChange"
    data-wp-bind--min="state.minQuantity"
    data-wp-bind--aria-valuemin="state.minQuantity"
    data-wp-bind--max="state.maxQuantity"
    data-wp-bind--aria-valuemax="state.maxQuantity"
    data-wp-bind--disabled="state.isQuantityDisabled"
    data-wp-bind--aria-disabled="state.isQuantityDisabled"
    type="number"
    step="1"
    autocomplete="off"
    role="spinbutton"
/>

Overral markup

This is the general recommended markup for the quantity selector, please note that the three sections highlighted above ( increase button, decrease button, and the input) are all enclosed inside one parent that has a class of sc-quantity-selector

<div
  class="sc-quantity-selector"
  data-wp-class--quantity--disabled="state.isQuantityDisabled"
>
   <div
      role="button"
      tabindex="0"
      class="sc-quantity-selector__decrease"
      data-wp-on--click="callbacks.onQuantityDecrease"
      data-wp-bind--disabled="state."
      data-wp-bind--aria-disabled="state.isQuantityDecreaseDisabled"
      data-wp-class--button--disabled="state.isQuantityDecreaseDisabled"
      aria-label="<?php echo esc_html__( 'Decrease quantity by one.', 'surecart' ); ?>"
   >
    	<?php echo wp_kses( SureCart::svg()->get( 'minus' ), sc_allowed_svg_html() ); ?>
   </div>
  
  <input
    class="sc-quantity-selector__control"
    data-wp-bind--value="state.quantity"
    data-wp-on--change="callbacks.onQuantityChange"
    data-wp-bind--min="state.minQuantity"
    data-wp-bind--aria-valuemin="state.minQuantity"
    data-wp-bind--max="state.maxQuantity"
    data-wp-bind--aria-valuemax="state.maxQuantity"
    data-wp-bind--disabled="state.isQuantityDisabled"
    data-wp-bind--aria-disabled="state.isQuantityDisabled"
    type="number"
    step="1"
    autocomplete="off"
    role="spinbutton"
  />
   <div
    role="button"
    tabindex="0"
    class="sc-quantity-selector__increase"
    data-wp-on--click="callbacks.onQuantityIncrease"
    data-wp-bind--disabled="state.isQuantityIncreaseDisabled"
    data-wp-bind--aria-disabled="state.isQuantityIncreaseDisabled"
    data-wp-class--button--disabled="state.isQuantityIncreaseDisabled"
    aria-label="<?php echo esc_html__( 'Increase quantity by one.', 'surecart' ); ?>"
    >
    	<?php echo wp_kses( SureCart::svg()->get( 'plus' ), sc_allowed_svg_html() ); ?>
    </div>
</div>

Updated 4 months ago