Minicart.js - 项目已添加到购物车但购物车未显示

Question

我在按钮上有一个点击功能，可以使用minicartjs.com的Minicart.js库将项目添加到我的购物车。单击按钮时，项目将添加到购物车，但购物车不会按预期弹出。我已经在Chrome和IE的最新版本（即11）上测试了这个。

我注意到的一些事情：

• 如果我执行show cart功能，在调试器中 paypal.minicart.view.show()购物车显示正常。即使有了 我添加的项目。
• 单击我的添加按钮时，“class”将附加到正文中，但没有 分配的实际班级：

• 当购物车 时，会附加“minicart-showing”类 身体。

以下脚本位于MVC部分视图的末尾：

<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