Question

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

我遵循了该教程，并且所有内容均已正确设置，因为我可以获取并显示通过Shopify仪表板设置的所有产品。

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

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

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

Shopify购买按钮JS的openCart（）函数不起作用

1 个答案: