我有一个基本的表单弹出窗口,当使用以下代码单击主要产品的按钮立即购买时将显示该弹出窗口:onclick="productAddToCartForm.submit(this)"
与这个主产品相同的页面上使用完全相同的按钮在同一个页面中拥有相关产品,我希望单击时也显示此弹出窗口,我也尝试向其添加onclick="productAddToCartForm.submit(this)"
,但如果我按下它,弹出窗口将起作用,但会将两种产品添加到 CART 中。
我该怎么做?
代码如下所示:
<div style="display: none;" id="ajax-popup">
<span class="button b-close"><span>X</span></span>
<h2 id="ajax-popup-message"></h2>
<div id="ajax-popup-content"></div>
</div>
<script type="text/javascript">
//<![CDATA[
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);
jQuery('#ajax-popup-message').addClass(data.status);
if(jQuery('#ajax-popup')){
jQuery('#ajax-popup-message').html(data.message);
}
if(jQuery('#ajax-popup')){
jQuery('#ajax-popup-content').html(data.sidebar);
}
if(jQuery('.header .links')){
jQuery('.header .links').replaceWith(data.toplink);
}
jQuery('#ajax-popup').bPopup();
}
});
} 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'];
// Remove custom datetime validators
for (var methodName in Validation.methods) {
if (methodName.match(/^validate-datetime-.*/i)) {
delete Validation.methods[methodName];
}
}
if (this.validator.validate()) {
if (url) {
this.form.action = url;
}
this.form.submit();
}
Object.extend(Validation.methods, nv);
}
}.bind(productAddToCartForm);
//]]>
</script>
HTML 看起来像这样:
<div class="main">
<div class="first">
<div class="add-to-cart">
<img onclick="productAddToCartForm.submit(this)" title="Add to Cart" src="../images/add-to-cart.png">
</div></div>
//STUFF
<div class="second">
<button onclick="window.location='URL'; productAddToCartForm.submit(this)" class="form-button add-to-cart" type="button"></button></div>
</div>
从我从您的示例中可以看出,您正在调用表单提交函数两次。似乎第二个onclick具有调试代码,当您将其粘贴到此处时,窗口中留下了位置,其中,我只能从您的描述中确定,弹出窗口标记导致将项目提交到购物车的无限循环。
首先,你使用jQuery使Javascript编程更容易,去掉html中的onclick= DHTML事件并使用jQuery。然后添加
jQuery(document).ready(function(){
jQuery('.add-to-cart').click(function(e){
e.preventDefault();
productAddToCartForm.submit(this);
});
});
其次,没有理由将jQuery.ajax
包装在try catch
中,它具有自己的错误处理功能。除非你认为jQuery的ajax函数会有问题。否则,如果尝试在成功方法中捕获错误,则需要将代码放在成功方法中。
将 ajax 想象成一个完全独立的浏览器,在执行它的瞬间被打开。
以下是我所指的一个例子:http://jsfiddle.net/73gpC/1/
下面是错误方法的示例:
jQuery.ajax({
error: function(jqXHR, text, errorThrown){
if(errorThrown){
alert('Error: ' + errorThrown);
}
}
});
接下来,您已经用var form = this.form;
声明了表单,为什么要再次在DOM中搜索它? jQuery('#product_addtocart_form').serialize();
应该form.serialize();
每次执行jQuery('selector')
时,jQuery都会"搜索"DOM中的元素。
虽然一开始听起来不错,但当您开始处理更复杂的应用程序时,当用户与您的应用程序交互时,以这种方式执行操作非常慢。改用声明的变量要快得多,因为您已经找到了它。话虽如此,总是更喜欢 ID 而不是类名,因为它们查找速度更快,但需要有效的 HTML(ID 是唯一的,不能重复使用)。
从外观上看,<button onclick="window.location='URL'; productAddToCartForm.submit(this)"
完全损坏了,您期望它做一些它根本不会做的事情,因为当用户单击它时window.location='URL'
会将用户浏览器重定向到"URL",并且productAddToCartForm.submit(this)
永远不会执行。
示例:http://jsfiddle.net/CZqDL/
单击时不会显示任何警报框,表示该函数从未触发。
如果有能力的话,我完全支持帮助某人学习如何解决问题,但这确实超出了您对Javascript或jQuery的总体经验水平。我建议买一本jQuery编程书或聘请开发人员来正确编程。特别是看到VarienForm如何成为Magento的一部分,它应该列在您的标签中,这是一个电子商务应用程序。
如果您只是在学习,我建议您在jQuery或Magento论坛上了解如何使用应用程序或可能进行培训。否则,如果您的表单由于糟糕的编程实践而搞砸,您将失去客户,获得不正确的订单,或者可能会被起诉或逮捕(取决于您是否正在处理信用卡)。有许多网站,您可以在其中聘请自由职业者以非常低的成本完成您需要的事情并避免麻烦。