javascript - Minicart.js - 商品已添加到购物车，但购物车未显示

Question

我在按钮上有一个单击功能，可以使用 minicartjs.com 中的 Minicart.js 库将商品添加到我的购物车。单击按钮时，商品将添加到购物车中，但是购物车不会按预期弹出。我已在最新版本的 Chrome 和 IE (IE 11) 上对此进行了测试。

我注意到的一些事情:

• 在调试器中如果我执行 show cart 函数paypal.minicart.view.show() 购物车显示正常。即使与我添加的项目。
• 当我的添加按钮被点击时，“类”被附加到正文中，没有实际分配的类(class):

• 当购物车显示“minicart-showing”类附加到 body 。

以下脚本位于 MVC 部分 View 的末尾:

<script src="~/Scripts/minicart.js"></script>
<script>
    $(".showcart").click(function () {
        var data = $(this).attr("data-id");   
        paypal.minicart.cart.add(JSON.parse(data));
        // $("#body").toggleClass("minicart-showing"); <---doesn't work
        // paypal.minicart.view.show() <---- doesn't work
    });
paypal.minicart.render();
</script>

Answer 1

进一步查看作者存储库中的 minicartjs 示例后。我发现在点击函数中使用 e.stopPropagation() 可以解决该问题。

   $(".showcart").click(function (e) { // <--- added the e function
    var data = $(this).attr("data-id");
    e.stopPropagation(); // <--- And this line.
    paypal.minicart.cart.add(JSON.parse(data));
});

Code Example From Author's GitHub Repo