Quantity counter

Quantity counter input idea for Shop systems or so.

How to use?

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

              
                <script src="./assets/vendor/hs-quantity-counter/dist/hs-quantity-counter.min.js"></script>
              
            

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF QUANTITY COUNTER
                    // =======================================================
                    $('.js-quantity-counter').each(function () {
                      var quantityCounter = new HSQuantityCounter($(this)).init();
                    });
                  });
                </script>
              
            

Basic example

                    
                      <!-- Quantity -->
                      <div class="bg-white border rounded py-2 px-3">
                        <div class="js-quantity-counter row align-items-center">
                          <div class="col-7">
                            <small class="d-block text-body font-weight-bold">Select quantity</small>
                            <input class="js-result form-control h-auto border-0 rounded p-0" type="text" value="0">
                          </div>
                          <div class="col-5 text-right">
                            <a class="js-minus btn btn-xs btn-icon btn-outline-secondary rounded-circle" href="javascript:;">
                              <i class="fas fa-minus"></i>
                            </a>
                            <a class="js-plus btn btn-xs btn-icon btn-outline-secondary rounded-circle" href="javascript:;">
                              <i class="fas fa-plus"></i>
                            </a>
                          </div>
                        </div>
                      </div>
                      <!-- End Quantity -->
                    
                  

Extend

By assigning a variable, you can call the standard methods of the plugin:

              
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF QUANTITY COUNTER
                    // =======================================================
                    $('.js-quantity-counter').each(function () {
                      var quantityCounter = new HSQuantityCounter($(this)).init();
                    });
                  });
                </script>
              
            

Attributes

By assigning a variable, you can call the standard methods of the plugin:

              
                data-hs-quantity-counter-options='{
                 ...
              }' - array
              
            

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-quantity-counter-options='{}'