Page 1 of 1

[HOW-TO] - How to add a quantity imput field to the category page template in Opencart 3

Posted: Sat Apr 18, 2020 1:05 am
by siteadvice
I thought someone might find this useful.

I modified it from this post in the Opencart 1.5 forum (thanks Xyph3r).

Put this somewhere in the page:

Code: Select all

<script type="text/javascript">
function addQtyToCart(product_id) {
  var qty = $('.item-' + product_id).val();
  if ((parseFloat(qty) != parseInt(qty)) || isNaN(qty)) {
    qty = 1;
  }
  cart.add(product_id, qty);
}
</script>
Find the add to cart button:

Code: Select all

<button type="button" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');">
Change it to

Code: Select all

<button type="button" class="btn module-product-btn-cart animation" onclick="addQtyToCart('{{ product.product_id }}');">
Then add a quantity input box next to it somewhere:

Code: Select all

<input type="text" value="1" size="2" class="item-{{ product.product_id }}" />
This seems to integrate gracefully. If the product has mandatory options then (as usual in all versions of Opencart) the item will not be added to the cart but instead the browser will redirect to the product page so they can be selected.