Magento – Why does the ajax add to cart not push the right product to the cart

ajaxcartconfigurable-productformsproduct

I am building a shopping cart in Magento and I am trying to get the add to cart working with an ajax push from a button in a form. In the markup for the products they are listed in a slider and in this slider I have the product details like image, name, variants etc. The problem I get is that when I press submit on the button, the ajax looks like its happening so I go and check the network tab in the inspector and see that I get a successfully sent ajax submit but when I refresh nothing seems to be in the cart.

One thing to also mention is that the url in network I see starts with

/ajax/index/add/uenc/--encryptedcode/product/idnumber 

I am not sure if thats correct for add to cart, in the form action I am using this php to capture that for the product but in the form action rendered I see nothing at all. When I type say www.google.co.uk into the action tag it shows up on all the forms:

action="<?php echo $this->getSubmitUrl($_product) ?>"

I also know that in some cases this has been used in Magento sites:

<a href="#" class="buy-button buying-options js-add-to-cart button" data-products-in-cart="<?= $products_in_cart ?>">
            <!-- Button text is added dynamically with JS -->
        </a>

And this above code spits out the html to be something like this which is the correct url to add a product into the cart:

<a href="/checkout/cart/add?product=6&amp;qty=1" class="buy-button buying-options js-add-to-cart button" data-products-in-cart="6">Add another!</a>

I am also going to show you the js I use to push the form up with ajax:

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;
            // Start of our new ajax code
            if (!url) {
                url = jQuery('#product_addtocart_form').attr('action');
            }
            url = url.replace("checkout/cart", "ajax/index"); // New Code
            var data = jQuery('#product_addtocart_form').serialize();
            data += '&isAjax=1';
            jQuery('#ajax_loader').show();
            try {
                jQuery.ajax({
                      url: url,
                      dataType: 'json',
                      type : 'post',
                      data: data,
                      success: function(data){
                          jQuery('#ajax_loader').hide();
                              //alert(data.status + ": " + data.message);
                              if(jQuery('.block-cart')){
                                  jQuery('.block-cart').replaceWith(data.sidebar);
                              }
                              if(jQuery('.header .links')){
                                  jQuery('.header .links').replaceWith(data.toplink);
                              }
                      }
                });
            } catch (e) {
            }
            // End of our new ajax code
            this.form.action = oldUrl;

            if (e) {
                throw e;
            }
        //}
    }.bind(productAddToCartForm);

Is the above php correct because I get nothing in the returned action tag at all and this I think is where I may be going wrong with this.

Can anyone figure out why it would not show the correct url for the product add to cart?

Best Answer

replace code

jQuery.ajax({
                  url: url,
                  dataType: 'json',
                  type : 'post',
                  data: data,
                  success: function(data){
                      jQuery('#ajax_loader').hide();
                          //alert(data.status + ": " + data.message);
                          if(jQuery('.block-cart')){
                              jQuery('.block-cart').replaceWith(data.sidebar);
                          }
                          if(jQuery('.header .links')){
                              jQuery('.header .links').replaceWith(data.toplink);
                          }
                  }

by this code

jQuery.ajax({
                      url: url,
                      //dataType: 'json',
                      type : 'post',
                      data: data,
                      success: function(data){     
                          console.log(data);
                            jQuery('#ajax_loader').hide();
                            //console.log(url);
                            if(jQuery('#gd_total')){ 
                                 jQuery("#gd_total").html( jQuery(data).find('#gd_total'));
                            }
                            if(jQuery('#itemC')){
                                 jQuery("#itemC").html( jQuery(data).find('#itemC'));
                            }
                      }
                });
Related Topic