我正在Magento网站上实现ajax add to cart。
目前,产品的正确网址会以标记的形式添加,当我添加到购物车时,它可以正常工作,但我想用ajax发布。购物车使用<a>
形式通过Magento的数据模板设置将产品的网址存储到产品中,由于Magento的限制,该设置只能用作<a>
。
标记如下:
<form class="js-update-product" id="product_addtocart_form" action="">
<div class="colour-guide-link buying-options condensed-bold group">
<span>Colour & Size</span>
(<span class="icon-question-sign"></span> <a href="#">guide</a>)
</div>
<div class="buying-options">
<? for ($i=0; $i < count($available_colors); $i++) { ?>
<a class="js-color-toggle button" href="#" data-color="<?= $available_colors[$i] ?>">
<?= $available_colors[$i] ?>
</a>
<? } ?>
</div>
<hr>
<div class="size-options buying-options group">
<? foreach ($all_sizes as $size) { ?>
<span class="radio-size">
<input type="radio" class="size-option" value="<? echo $size ?>" name="size" />
<label class="number"><? echo $size ?></label>
</span>
<? } ?>
</div>
<!-- <button type="submit" class="buy-button buying-options"></button> -->
<a href="#" class="buy-button buying-options js-add-to-cart button" data-products-in-cart="<?= $products_in_cart ?>">
<span class="label">Add to Bag</span>
<span class="spinner"></span>
Add to bag
</a>
<div class="adding-msg">
Adding to bag...
</div>
</form>
这是我发布的ajax代码,它发布了导致我出问题的表单。
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('.js-update-product').attr('action');
}
url = url.replace("checkout/cart", "ajax/index"); // New Code
var data = jQuery('.js-update-product').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);
productAddToCartForm.submitLight = function(button, url){
if(this.validator) {
var nv = Validation.methods;
delete Validation.methods['required-entry'];
delete Validation.methods['validate-one-required'];
delete Validation.methods['validate-one-required-by-name'];
if (this.validator.validate()) {
if (url) {
this.form.action = url;
}
this.form.submit();
}
Object.extend(Validation.methods, nv);
}
}.bind(productAddToCartForm);
理想情况下,我想要的是ajax js找到被点击的<a href="">
中的url并使用它作为ajax中的url发布。我正在努力做到的是它找到表格中的网址并将其放入帖子网址。
这是否可以使用脚本,因为它现在已经设置但有一些调整?
答案 0 :(得分:0)
您可以替换ajax函数或通过以下代码修改
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'));
}
}
});