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>
(function() {
// INITIALIZATION OF QUANTITY COUNTER
// =======================================================
new HSQuantityCounter('.js-quantity-counter')
})()
</script>
Basic example
<!-- Quantity -->
<div class="quantity-counter">
<div class="js-quantity-counter row align-items-center">
<div class="col">
<span class="d-block small">Select quantity</span>
<input class="js-result form-control form-control-quantity-counter" type="text" value="1">
</div>
<!-- End Col -->
<div class="col-auto">
<a class="js-minus btn btn-outline-secondary btn-xs btn-icon rounded-circle" href="javascript:;">
<svg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 1C0 0.723858 0.223858 0.5 0.5 0.5H7.5C7.77614 0.5 8 0.723858 8 1C8 1.27614 7.77614 1.5 7.5 1.5H0.5C0.223858 1.5 0 1.27614 0 1Z" fill="currentColor"/>
</svg>
</a>
<a class="js-plus btn btn-outline-secondary btn-xs btn-icon rounded-circle" href="javascript:;">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 0C4.27614 0 4.5 0.223858 4.5 0.5V3.5H7.5C7.77614 3.5 8 3.72386 8 4C8 4.27614 7.77614 4.5 7.5 4.5H4.5V7.5C4.5 7.77614 4.27614 8 4 8C3.72386 8 3.5 7.77614 3.5 7.5V4.5H0.5C0.223858 4.5 0 4.27614 0 4C0 3.72386 0.223858 3.5 0.5 3.5H3.5V0.5C3.5 0.223858 3.72386 0 4 0Z" fill="currentColor"/>
</svg>
</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Quantity -->
Modal example
Quantity Counter
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Quantity Counter</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<!-- Quantity -->
<div class="quantity-counter">
<div class="js-quantity-counter row align-items-center">
<div class="col">
<span class="d-block small">Select quantity</span>
<input class="js-result form-control form-control-quantity-counter" type="text" value="1">
</div>
<!-- End Col -->
<div class="col-auto">
<a class="js-minus btn btn-outline-secondary btn-xs btn-icon rounded-circle" href="javascript:;">
<svg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 1C0 0.723858 0.223858 0.5 0.5 0.5H7.5C7.77614 0.5 8 0.723858 8 1C8 1.27614 7.77614 1.5 7.5 1.5H0.5C0.223858 1.5 0 1.27614 0 1Z" fill="currentColor"/>
</svg>
</a>
<a class="js-plus btn btn-outline-secondary btn-xs btn-icon rounded-circle" href="javascript:;">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 0C4.27614 0 4.5 0.223858 4.5 0.5V3.5H7.5C7.77614 3.5 8 3.72386 8 4C8 4.27614 7.77614 4.5 7.5 4.5H4.5V7.5C4.5 7.77614 4.27614 8 4 8C3.72386 8 3.5 7.77614 3.5 7.5V4.5H0.5C0.223858 4.5 0 4.27614 0 4C0 3.72386 0.223858 3.5 0.5 3.5H3.5V0.5C3.5 0.223858 3.72386 0 4 0Z" fill="currentColor"/>
</svg>
</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Quantity -->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Methods
Parameters | Description | Default value |
---|---|---|
|
Selector, inside the initialized element, which is responsible for adding a unit to the current value | '.js-plus' |
|
Selector, inside the initialized element, which is responsible for subtracting the unit from the current value | '.js-minus' |
|
Selector, inside the initialized element, which is responsible for displaying the current value | '.js-result' |