2

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?

2

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'));
                            }
                      }
                });
0

Please note Magento uses prototype.js , so adding jQuery can cause some issues. Did you search for free extensions at the magento connect?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.