Skip to content

Instantly share code, notes, and snippets.

@angellromero
Last active March 23, 2023 11:37
Show Gist options
  • Save angellromero/783ed8ea4c20ef1d09c8 to your computer and use it in GitHub Desktop.
Save angellromero/783ed8ea4c20ef1d09c8 to your computer and use it in GitHub Desktop.
Quantity Toggle Increment/Decrement FunctionalityDescription Needed
<div class="qty-box qty-toggle">
<span class="label"><?php echo $this->__('Quantity');?></span>
<div class="inner">
<button class="button minus decrement" type="button"><i class="icon-minus"></i></button>
<input type="number" name="qty" id="qty" maxlength="12" value="<?php echo ($_product->getQty()*1) ?>" title="<?php echo $this->__('Qty') ?>" placeholder="QTY" class="input-text qty" />
<button class="button plus increment" type="button"><i class="icon-plus"></i></button>
</div>
</div>
/**
* Quantity Toggle Increment/Decrement Functionality
* @type {*|jQuery|HTMLElement}
*/
var $qtyToggle = $('.qty-toggle');
if ($qtyToggle.length > 0) {
$qtyToggle.each(function(index, element) {
var $el = $(element),
minQuantity = $el.data('min-quantity') || 0,
maxQuantity = $el.data('max_quantity') || 100,
$qtyInput = $el.find('.qty'),
currentQty = $el.find('.qty').val(),
disabledClass = 'disabled',
$decrementEl = $el.find('.decrement'),
$incrementEl = $el.find('.increment');
$el.data('currentQty', currentQty);
$decrementEl.addClass(disabledClass).on('click', function(e) {
var $this = $(this);
currentQty = $el.data('currentQty');
if (currentQty > minQuantity) {
currentQty--;
$qtyInput.val(currentQty);
$el.data('currentQty', currentQty);
if ($incrementEl.hasClass(disabledClass)) {
$incrementEl.removeClass(disabledClass);
}
if (currentQty === minQuantity) {
// Do Nothing and disable button
$this.addClass(disabledClass);
}
}
});
$incrementEl.on('click', function(e) {
var $this = $(this);
currentQty = $el.data('currentQty');
if (currentQty < maxQuantity) {
currentQty++;
$qtyInput.val(currentQty);
$el.data('currentQty', currentQty);
if ($decrementEl.hasClass(disabledClass)) {
$decrementEl.removeClass(disabledClass);
}
if (currentQty === maxQuantity) {
// Do Nothing and disable button
$this.addClass(disabledClass);
}
}
});
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment