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&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
by this code