Функция openCart() для Shopify Buy Button JS не работает

Question

Мне нравится настраивать магазин Shopify с помощью простой структуры веб-сайта HTML/CSS/JS/PHP, куда я включаю гибко настраиваемую библиотеку Shopify Buy Button JS.

Я выполнил руководство, и все настроено правильно, так как я могу получать и отображать все свои продукты, которые я настроил через панель управления Shopify.

Стили по умолчанию и iFrames элементов пользовательского интерфейса Shopify (cart, drawer, buy-buttonи т. д.) не соответствуют стилю и пользовательскому интерфейсу моего веб-сайта, поэтому я хочу настроить их с помощью 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();
});