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

Preview
HTML

Select quantity

<!-- 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