我的网站添加到购物车**是完成ajax。现在我有一个按钮,通过页面上的ajax插入新产品。我的问题是新添加的产品**添加到购物车形式不适用于ajax。
<ul>
<li>
<form action="add-to-cart.php?product_id=1">....</form>
</li>
<li>
<form action="add-to-cart.php?product_id=2">....</form>
</li>
<li>
<form action="add-to-cart.php?product_id=3">....</form>
</li>
<li>
<form action="add-to-cart.php?product_id=4">....</form>
</li>
<li>
<form action="add-to-cart.php?product_id=5">....</form>
</li>
</ul>
<button id="load-more">Load More Products</a>
我知道我可以像这样绑定事件
$(document).on("submit", 'form', function(event) {
//logic here
});
但我无法访问具有逻辑的js文件(假设我无法编辑该文件)。
所以我的问题是我可以在新加载的ajax内容上重新附加/重新绑定事件(添加到购物车表格是具体的)。
修改 现有的addto cart js文件的代码
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'mage/translate',
'jquery/ui'
], function($, $t) {
"use strict";
$.widget('mage.catalogAddToCart', {
options: {
processStart: null,
processStop: null,
bindSubmit: true,
minicartSelector: '[data-block="minicart"]',
messagesSelector: '[data-placeholder="messages"]',
productStatusSelector: '.stock.available',
addToCartButtonSelector: '.action.tocart',
addToCartButtonDisabledClass: 'disabled',
addToCartButtonTextWhileAdding: '',
addToCartButtonTextAdded: '',
addToCartButtonTextDefault: ''
},
_create: function() {
if (this.options.bindSubmit) {
this._bindSubmit();
}
},
_bindSubmit: function() {
var self = this;
this.element.on('submit', function(e) {
e.preventDefault();
self.submitForm($(this));
});
},
isLoaderEnabled: function() {
return this.options.processStart && this.options.processStop;
},
/**
* Handler for the form 'submit' event
*
* @param {Object} form
*/
submitForm: function (form) {
var addToCartButton, self = this;
if (form.has('input[type="file"]').length && form.find('input[type="file"]').val() !== '') {
self.element.off('submit');
// disable 'Add to Cart' button
addToCartButton = $(form).find(this.options.addToCartButtonSelector);
addToCartButton.prop('disabled', true);
addToCartButton.addClass(this.options.addToCartButtonDisabledClass);
form.submit();
} else {
self.ajaxSubmit(form);
}
},
ajaxSubmit: function(form) {
var self = this;
$(self.options.minicartSelector).trigger('contentLoading');
self.disableAddToCartButton(form);
$.ajax({
url: form.attr('action'),
data: form.serialize(),
type: 'post',
dataType: 'json',
beforeSend: function() {
if (self.isLoaderEnabled()) {
$('body').trigger(self.options.processStart);
}
},
success: function(res) {
if (self.isLoaderEnabled()) {
$('body').trigger(self.options.processStop);
}
if (res.backUrl) {
window.location = res.backUrl;
return;
}
if (res.messages) {
$(self.options.messagesSelector).html(res.messages);
}
if (res.minicart) {
$(self.options.minicartSelector).replaceWith(res.minicart);
$(self.options.minicartSelector).trigger('contentUpdated');
}
if (res.product && res.product.statusText) {
$(self.options.productStatusSelector)
.removeClass('available')
.addClass('unavailable')
.find('span')
.html(res.product.statusText);
}
self.enableAddToCartButton(form);
}
});
},
disableAddToCartButton: function(form) {
var addToCartButtonTextWhileAdding = this.options.addToCartButtonTextWhileAdding || $t('Adding...');
var addToCartButton = $(form).find(this.options.addToCartButtonSelector);
addToCartButton.addClass(this.options.addToCartButtonDisabledClass);
addToCartButton.find('span').text(addToCartButtonTextWhileAdding);
addToCartButton.attr('title', addToCartButtonTextWhileAdding);
},
enableAddToCartButton: function(form) {
var addToCartButtonTextAdded = this.options.addToCartButtonTextAdded || $t('Added');
var self = this,
addToCartButton = $(form).find(this.options.addToCartButtonSelector);
addToCartButton.find('span').text(addToCartButtonTextAdded);
addToCartButton.attr('title', addToCartButtonTextAdded);
setTimeout(function() {
var addToCartButtonTextDefault = self.options.addToCartButtonTextDefault || $t('Add to Cart');
addToCartButton.removeClass(self.options.addToCartButtonDisabledClass);
addToCartButton.find('span').text(addToCartButtonTextDefault);
addToCartButton.attr('title', addToCartButtonTextDefault);
}, 1000);
}
});
return $.mage.catalogAddToCart;
});
答案 0 :(得分:3)
谢谢大家,我找到了解决方案。我在ajax调用之后再次调用add to cart方法并且它有效。
$.ajax({
dataType: 'html',
type: 'GET',
url:url,
success: function(data){
var data = $($.parseHTML(data));
var productList = data.find('.products.list').html();
productWrapper.append(productList);
$( "form" ).catalogAddToCart(); // this solved the problem
},
});
答案 1 :(得分:2)
尝试在ajax调用后加载该javascript文件 -
$.getScript(src);