更新购物车后打开模态购物车

Question

我想在浏览产品页面 A 时通过一个“添加到购物车”按钮添加两种不同的产品（A 和 B）到购物车。每个产品都有自定义属性 也需要传输到购物车。 我们使用“modal”购物车选项。

在github找到这段代码：

var MGUtil = {
    data: [],
    ini: 0,
    total: 0,
    addItem: function(qty, id, properties, callback) {
        var params = { quantity: qty, id: id };
        if (properties != false) {
            params.properties = properties;
        }
        $.ajax({
            type: 'POST',
            url: '/cart/add.js',
            dataType: 'json',
            data: params,
            success: function() {
                if (typeof callback === 'function') {
                    callback();
                }
            },
            error: function() {}
        });
    },

    recursive: function() {
        MGUtil.addItem(MGUtil.data[MGUtil.ini].qty, MGUtil.data[MGUtil.ini].id, MGUtil.data[MGUtil.ini].properties, function() {
            MGUtil.ini += 1;
            if (MGUtil.ini < MGUtil.total) {
                MGUtil.recursive();
            } else {
                document.location.href = '/cart';//GO TO THE CART AFTER ADDING ITEMS
            }
        });
    },

    begin: function() {
        /*SAMPLE*/
        /* SET YOUR ARRAY QTY's' ID's PROPERTIES(FALSE IF IS EMPTY)*/
        MGUtil.data = [
            { "id": "#variant_id_A", "qty": 2, "properties": { "data1": "1" } },
            { "id": "#variant_id_B", "qty": 3, "properties": { "data2": "1" } }
        ];
        MGUtil.total = MGUtil.data.length;
        MGUtil.recursive();
    }
}

MGUtil.begin();

唯一缺少的是我想打开“模态”购物车而不是去购物车页面。

我可以显示购物车：

$('#ajaxifyModal').addClass('is-visible');

但是当我在运行上面的代码后在产品页面上执行此操作时，内容不会更新。刷新页面将是一种解决方案——虽然不是很漂亮。

如何在不离开页面的情况下更新购物车内容并打开模态购物车？

更新

认为这是接收更新的购物车内容的 AJAX 调用：

$.ajax({
    type: 'GET',
    url: '/cart.js',
    dataType: 'json',
    success: function(cart) {
        console.log(cart);
    },
    error: function() {}
});

Answer 1

在这里尝试用这个替换你的“else”

else {
  var tmpVar = $.get("/cart"); // trying to trigger the page (we are not going to do anything with this variable)
  $('#ajaxifyModal').addClass('is-visible'); // open the modal
}