如何覆盖循环模板并在添加到购物车按钮旁边显示特定类别或多个产品的数量

<!-- 假设这是产品列表的HTML模板 -->
<div class="product-list">
  {{#each products}}
    <div class="product">
      <h3>{{name}}</h3>
      <p>{{description}}</p>
      <button class="add-to-cart">添加到购物车</button>
      <span class="product-count">{{getProductCount category}}</span>
    </div>
  {{/each}}
</div>

<script>
// 假设这是前端的JavaScript代码
// getProductCount函数用于获取特定类别或多个产品的数量
function getProductCount(category) {
  // 发送异步请求到后端，获取产品数量
  // 可以使用AJAX、Fetch API或其他适当的方式
  // 假设后端返回的数据格式为JSON
  fetch('/api/product/count?category=' + category)
    .then(response => response.json())
    .then(data => {
      // 更新特定类别或多个产品的数量
      const productCountElement = document.querySelector('.product-count');
      productCountElement.textContent = data.count;
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

// 监听添加到购物车按钮的点击事件
const addToCartButtons = document.querySelectorAll('.add-to-cart');
addToCartButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 执行添加到购物车的逻辑
    // ...
  });
});
</script>