更新数量框产品列表magento

Question

How do i get it to work so its updates with AJAX, it does on view.phtml? It now reloads the whole page.

I have added a quantity box to my product list. this is what i added on list.phtml:

<form action="<?php echo $this->getAddToCartUrl($_product) ?>” method="post" id="product_addtocart_form_<?php echo $_product->getId()?>"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>> 
    <?php if(!$_product->isGrouped()): ?> 
        <label for="qty"><?php echo $this->__('Qty') ?>:</label> 
        <input type="text" name="qty" id="qty" maxlength="12" value="<?php echo ($this->getMinimalQty($_product)?$this->getMinimalQty($_product):1) ?>” /> 
    <?php endif; ?> 

    <button type="button" class="button btn-cart” onclick="this.form.submit()">
        <span>    
            <span><?php echo $this->__('Add to Cart') ?></span>
        </span>
    </button> 
</form>

Here are my files:

list.phtml -> http://pastebin.com/UJ0YvUq9 view.phtml -> http://pastebin.com/7pQtYvfe

Hope that the community can help me!

You will be Genius.

Answer 1

The best approach for this is using jQuery ajax. Ofcourse your code is reloading the page since the form is submitted, that's what you're programming :)

Since the view.phtml has a whole other structure and actions binded to update the cart and updating the QTY we must add some things to the list template and write some jQuery.

Write the jQuery ajax (post! that's important) call to the add to cart url and append the current product data, It's the best do this on $('button').click() and doing an event.preventDefault() to prevent the page reloading. Retrieve errors, or success notices and display the updated QTY at the product, also be aware to update the mini-cart (if displayed) in the header or other place on your website.

After posting with the QTY and other required product options, the product is being added to the cart.