几个 Ajax 添加到购物车表单在一个页面上

Several Ajax add to cart forms on one page

本文关键字：一个 添加 Ajax 购物车 表单 几个      更新时间：2023-09-26

我在一个网站上有一个页面，同一页面上有几个产品。

我正在尝试让一个 Ajax 添加到购物车以适用于每个产品（每个都有自己的形式），但无法弄清楚如何在不为每个产品编写 Jquery 函数的情况下区分一个产品和另一个产品。

下面的脚本适用于页面上的一个产品，因为表单有自己的 ID，但是当一个页面上有 20 个产品时，这不起作用。

function update_cart(data, statusText, xhr, $form)
{
    if (data.success)
    {
        $("input[name=XID]").val(data.XID);
        $('.cart_total').html(data.cart_total); 
    }
    return true; 
}
var cart_form_options = {
    success: update_cart,
    dataType: 'json'
}
jQuery(document).ready(function($){
    $("#add_to_cart_submit").click(function(){
        $("#add_to_cart_form").ajaxForm(cart_form_options);
        $("#add_to_cart_form").submit(); 
    })
});

非常感谢！！

为每个产品提供"添加到购物车"按钮/表单一个唯一的属性，例如产品 ID。 然后，当单击"添加到购物车"按钮时，您可以获取该属性以找出要添加的确切产品。

<form id="add_to_cart_form" productID="product1">

然后在 js 中：

var product = $("add_to_cart_form").attr("productID");

啊...我想我已经解决了。 稍微玩一玩就行了。

生成的代码：

<script type="text/javascript">
                var $j = jQuery.noConflict();
                $j(document).ready(function () {
                $j('.add_to_cart_form').submit(function() {
                    $j('.add_submit', this).val('Processing...');
                    var url = $j(this).attr('action');
                    var data = $j(this).serialize();
                    $j.post(url, data, function() {$j('.cart-wrap').load('{site_url}cart');
                        $j('.mini-cart').load('{site_url}cart');
                        $j('.add_submit').val('add to cart');
                        $j('.cart-thankyou').slideDown( 500, function() {});
                        $j('.cart-thankyou').delay(1500).slideUp(400);
                    });
                    return false;
                });
            });
            </script>
相关文章：