使用 minicart.js 显示购物车中的商品数量答案

【问题标题】：Show number of items in cart with minicart.js使用 minicart.js 显示购物车中的商品数量
【发布时间】：2014-07-03 06:20:54
【问题描述】：

问题： 如何使用 minicart.js 脚本显示用户购物车中的商品数量？

背景故事： 我正在开发一个静态 HTML 网站，该网站使用标准 PayPal 按钮和minicart.js

销售少量产品

我想在我的网站页眉中设置一个区域来显示当前“购物车”中的商品数量，但我不知道该怎么做。 minicart.js 网站上没有详细说明此功能的示例。

我确信可以做到，但我不知所措。任何帮助将不胜感激。谢谢！

【问题讨论】：

你需要有一些基本的问题才能得到有效的答复。 StackOverflow 的重点是首先尝试解决方案并发布失败的代码。
感谢您查看我的问题。我已经对其进行了编辑，以使我需要帮助的“问题”部分更加清晰。

标签： javascript jquery paypal

【解决方案1】：

你可以这样：

paypal.minicart.cart.items().length

对我有用

【讨论】：

【解决方案2】：

我设法找到一种方法来实现我正在寻找的东西，方法是通过 minicart.js 找到必要的变量集，然后通过 jQuery 对其进行操作。

minicart.js 为我提供了以下变量，它输出当前购物车总数：

paypal.minicart.cart.total();

然后我使用该变量并应用了一些 jQuery，该 jQuery 将该变量转换为一个名为“cartTotal”的单独变量，每次在页面上发生用户交互（即单击或按键）时都会检查和更新该变量。我发现需要短暂的延迟才能让一切正常工作。有趣的是，按键检查需要比鼠标单击更长的延迟。

我的最终（目前）工作代码如下：

$( document ).ready(function() {
     var cartTotal = paypal.minicart.cart.total();
        $('input#cart').val('$' + cartTotal);

    $( "body" ).click(function() {
            setTimeout(function() { // Setting slight delay on function to accomodate for button push of removing items from cart
             var cartTotal = paypal.minicart.cart.total();
            $('input#cart').val('$' + cartTotal);
        }, 100);
    });


    $( "body" ).keypress(function() {
       setTimeout(function() { // Setting longer delay on function to accomodate for key push of removing items from cart
             var cartTotal = paypal.minicart.cart.total();
            $('input#cart').val('$' + cartTotal);
        }, 900);
    });

【讨论】：