Question

我正在使“添加到购物车”按钮更新购物车中的商品的跨度计数器，该计数器在您每次单击按钮后每次都起作用，但第一次单击时不起作用

我尝试使用.on方法给出相同的结果，并尝试使用document.ready也不起作用。

$(document).ready(function() {
  $('#addToCart').on('click', function() {
    jQuery.getJSON('/cart.js', function(cart) {
      $("span.count").html(cart.item_count);
    });
  }); 
});

我希望addToCart按钮可以在每次点击时更新span.count。实际结果是它在第一次单击后就可以使用。

Answer 1

$(document).ready(function() { 
  $('#addToCart').on('click', function() { 
    alert("Hello"); 
  }); 
});

请立即尝试希望对您有帮助

Answer 2

每次单击按钮，按钮单击没有问题

$(document).ready(function() {
  $('#addToCart').on('click', function() {  
  alert('button clicked');

jQuery.getJSON('/cart.js', function(cart) { 
    $("span.count").html(cart.item_count);
});

}); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/shopify-cartjs/0.4.1/cart.min.js"></script>


<button id="addToCart" type="button">Add to cart</button>

<span>Cart Items: </span> <span class="count">0</span>

Answer 3

您可以尝试以下提供的解决方案：

$(document).ready(function() {
    $(document).on('click', '#addToCart', function() {  
        alert('button clicked');
        jQuery.getJSON('/cart.js', function(cart) { 
            $("span.count").html(cart.item_count);
        });
    }); 
});

Answer 4

我想建议您另一种无需使用Ajaxify购物车API即可更新购物车的方法。您应该尝试一次。我说的是cart.js

您只需要在主题标题中的CDN下面添加

。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/shopify-cartjs/0.4.1/cart.min.js"></script>

之后，您需要在html中添加标签“ data-cart-render”。它将自动在html标签中呈现购物车项目计数。示例：

<span data-cart-render="item_count"></span>

点击事件不会在首次点击时触发，而是在每次点击后触发

4 个答案: