Bardzo ciekawe a zarazem proste zagadnienie, plus i minus przy polu ilości na karcie produktu. Przez pewien okres ignorowałem tą funkcjonalność myśląc, że każdy użytkownik komputera i internetu włada nim doskonale. Jednak praca przy wielu projektach, badania zachowań ludzkich pokazują, że jest to bardzo przydatna funkcjonalność zwłaszcza dla ludzi, którzy wszystko wykonują na ekranie przeglądarki za pomocą klawiatury.
Aby to wykonać modyfikujemy lekko plik addtocart.phtml w swoim szablonie
<?php if($_product->isSaleable()): ?>
<?php if(!$_product->isGrouped()): ?>
<div class="add-to-cart">
<label for="qty"><?php echo $this->__('Qty:') ?></label>
<input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $this->getProductDefaultQty() * 1 ?>" title="<?php echo $this->__('Quantity:') ?>" class="input-text qty" />
<button class="button-up" type="button">+</button>
<button class="button-down" type="button">-</button>
</div> <!--add-to-cart-->
<?php endif; ?>
<button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><?php echo $buttonTitle ?></span></button>
<?php echo $this->getChildHtml('', true, true) ?>
<?php endif; ?>Aby powyższy kod zadziałać musimy trochę poczarować w jQuery w tym samym pliku
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('.add-to-cart .button-up').click(function() {
$qty = $(this).parent().find('.qty');
qty = parseInt($qty.val()) + 1;
$qty.val(qty);
});
$('.add-to-cart .button-down').click(function() {
$qty = $(this).parent().find('.qty');
qty = parseInt($qty.val()) - 1;
if (qty < 0)
qty = 0;
$qty.val(qty);
});
});
//]]>
</script>Pozostaje tylko dodać kod css.