Magento – refresh page in magento without reloading – ajax

ajaxfilterproduct

I want to use ajax or something that will allow my website in magento to refresh without reloading.

I am newbie so please guide me thoroughly about it.

Also, I am using Mana Filters in magento for filtering products and I want to update the page result without reloading when user checks the Filtering Options.

for example here is the checkbox code for filtering any product.

<input type="checkbox" name="filtercb" onclick="window.location.href='<?php echo $this->urlEscape($_item->getUrl()) ?>'"  />

when checked, it will reload the page and update the url with selected item.

Kindly help me about this.

Thank you so much in advance.

Best Answer

I'm going to explain how I handled an ajax scenario in Magento and let's see if you can use this to help yourself!

I needed to update an area of the page via Ajax when the user presses a button that looks like this:

<button type="button" title="<?php echo $buttonTitle ?>" id="buttonAddToCart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><?php echo $buttonTitle ?></button>

So, when the user presses this button it passes the contents of the form to a function called productAddToCartForm.submit(). This is the function that will initiate the ajax request. Within this function a number of things need to be specified. First, you need a URL pointing towards a controller. This is the 'link' in the ajax 'chain' connecting the user to the server. So let's take a look at that function.

    <script type="text/javascript">
    //<![CDATA[
    var productAddToCartForm = new VarienForm('product_addtocart_form');
    productAddToCartForm.submit = function (button, url) {
        if (this.validator.validate()) {
            var form = this.form;
            var oldUrl = form.action;
            if (url) {
                form.action = url;
            }
            var e = null;
            if (!url) {
                url = jQuery('#product_addtocart_form').attr('action');
            }
            if (url.search('wishlist') !== -1) {
                this.form.submit();
            } else {
                /**
                 * add to cart form data is sent to indexcontroller via AJAX.  TopCartContent is updated and displayed to the user.
                 **/
                url = url.replace("checkout/cart", "checkout/index");
                var data = jQuery('#product_addtocart_form').serialize();
                data += '&isAjax=1';
                jQuery('#ajax_loader').show();
                jQuery('#buttonAddToCart').prop("disabled", true);
                try {
                    jQuery.ajax({
                        url: url,
                        dataType: 'json',
                        type: 'post',
                        data: data,
                        success: function (data) {
                            jQuery('#img-thumb').attr('src', data.image);
                            jQuery('#prod-name').html(data.name);
                            jQuery('#prod-price').html(data.price);
                            jQuery('#header-cart-checkout').html(data.topCart);
                            Enterprise.TopCart.initialize('topCartContent');
                            Enterprise.TopCart.showCart(8);
                            jQuery('#ajax_loader').hide();
                            jQuery('#buttonAddToCart').prop('disabled', false);
                        }
                    });
                } catch (e) {
                }
                this.form.action = oldUrl;
                if (e) {
                    throw e;
                }
            }
        }
    }.bind(productAddToCartForm);

This instantiates the forms information and validates it's contents. The meat-and-potatoes of this function is wedged inbetween the 'try' section. It issues a jQuery.Ajax request to the URL, it expects a 'json' format response. It uses a post method to query the database, and is sending data to our controller.

All the things after the success:function(data) area is upon a successful response from our controller. So, before I explain that to you -- I'll show you a section of the code from my controller that will hopefully clear things up for you. It is here where the data is sent and new data is fetched from the server and given to the user, remember you must add a URL that is directed at this controller. In the above example, I overrode the core checkout/cartcontroller and replaced it with a custom checkout/indexcontroller.

class Companyspace_Checkout_IndexController extends Mage_Checkout_CartController{
$product = $this->_initProduct();
             if ($params['isAjax'] == 1) {
            $response = array();
            try {
         $message = $this->__('%s was added to your shopping cart.', Mage::helper('core')->escapeHtml($product->getName()));
        $response['status'] = 'SUCCESS';
        $response['message'] = $message;
        $this->loadLayout();
        $topCart = $this->getLayout()->getBlock('topCart')->toHtml();
        $response['topCart'] = $topCart;
        $response['image'] = (string)Mage::helper('catalog/image')->init($product, 'thumbnail');
        $response['name'] = $product->getname();
        $response['price'] = Mage::helper('core')->formatPrice($product->getPrice(), true);
        }
     $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($response));
    return;
    }

This recieves the request from the previous function and prepares a response array. This response array is populated by a number of things, including a re-initialized $topCart section (this is what I mainly use to refresh a certain section of my page). It then encodes this using jsonEncode and sends it back to the user.

Then, this function uses JQuery to populate the elements with new information!

I hope this helps!

Related Topic