Quantity Counter
Quantity counter input idea for Shop systems or so.
Cara Pakai
Copy-paste script berikut sebelum tag penutup <body>
:
<script>
(function() {
// INITIALIZATION OF QUANTITY COUNTER
// =======================================================
new NueQuantityCounter('.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
Parameter | Deskripsi | Nilai default |
---|---|---|
| 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' |