Shopify Buy Button JS 的 openCart() 函数不起作用

Question

我喜欢通过简单的 HTML/CSS/JS/PHP 网站结构设置 Shopify 商店，其中包括高度可定制的 Shopify Buy Button JS library。

我按照教程进行操作，一切都设置正确，因为我可以获取并显示我通过 Shopify 仪表板设置的所有产品。

Shopify UI 元素（cart、drawer、buy-button 等）的默认样式和 iFrame 与我网站的样式和 UX 不匹配，因此我想通过 css 自定义它们。我通过指令"iframe: false" 停用了大多数元素的iFrames，这可以正常工作。

我还想创建一个自定义的toggle 按钮，用于打开cart（而不是固定在屏幕右侧中间的经典切换按钮形式 Shopify）。

奇怪的是，我无法通过ui.openCart() 打开cart，如文档中所述。当我使用setTimout (3s) 时，我可以通过ui.openCart() 打开购物车，但我无法通过jQuery click event 这样做。我做错了什么？

到目前为止我的代码：

<script src="//sdks.shopifycdn.com/buy-button/1.0.0/buybutton.js"></script>
<script>
var client = ShopifyBuy.buildClient({
  domain: 'domain.myshopify.com',
  storefrontAccessToken: '2b3xxxxxxxxjh5', // previously apiKey, now deprecated
});

ui = ShopifyBuy.UI.init(client);

ui.createComponent('product', {
  id: 23xxxxxx56,
  node: document.getElementById('my-product'),
  options: {
    "product": {
      "iframe": false
    },
    toggle: {
      "iframe": false
    }
  }
});

// -- this does not work --
$('#shoppingCartDropdownInvoker').click(function(){
  ui.openCart();
});

// -- this does work --
setTimeout(function(){
  ui.openCart();
}, 3000);
</script>

#shoppingCartDropdownInvoker 的代码是：

<a id="shoppingCartDropdownInvoker" class="btn btn-xs btn-icon btn-text-secondary" href="javascript:;" role="button">
  <span class="fas fa-shopping-cart btn-icon__inner"></span>
</a>

Answer 1

您需要阻止事件在链上冒泡。 添加 event.stopPropagation 如图

$('#shoppingCartDropdownInvoker').click(function(event){
  event.stopPropagation();
  ui.openCart();
});