Question

我在网站上有一个页面，其中有多个产品在同一页面上。

我正在尝试将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(); 
    })
});

非常感谢!!

Answer 1

将每个产品“添加到购物车”按钮/形成一个独特的属性，例如产品ID。然后，当点击“添加到购物车”按钮时，您可以获取该属性以找出要添加的确切产品。

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

然后在js：

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

Answer 2

啊......我想我已经对它进行了分类。一点点玩耍都有诀窍。

结果代码：

<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>

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

2 个答案: