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='{}'