0

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

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

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

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

奇怪的是，我无法打开cartvia ui.openCart()，如文档中所述。ui.openCart()当我使用 a打开购物车时，我可以打开购物车setTimout (3s)，但我无法通过 a打开购物车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>
4

1 回答 1

2

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

$('#shoppingCartDropdownInvoker').click(function(event){
  event.stopPropagation();
  ui.openCart();
});
于 2020-06-11T23:02:50.817 回答