Last active
March 23, 2023 11:37
-
-
Save angellromero/783ed8ea4c20ef1d09c8 to your computer and use it in GitHub Desktop.
Quantity Toggle Increment/Decrement FunctionalityDescription Needed
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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