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

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

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

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

javascript shopify shopify-javascript-buy-sdk buybutton.js
person John Brunner    schedule 14.12.2019    source источник
comment
опубликуйте HTML-код shoppingCartDropdownInvoker   -  person    schedule 14.12.2019
comment
Мое первое предположение было бы таким: Почему jQuery или метод DOM, такой как getElementById, не находит элемент?   -  person Andreas    schedule 14.12.2019
comment
@Unknown Я обновил вопрос с помощью HTML-кода "shoppingCartDropdownInvoker"   -  person John Brunner    schedule 14.12.2019
comment
Я скопировал / вставил ваш код, и он отлично работает у меня, проверьте, есть ли ошибка в инструментах разработчика, когда вы нажимаете ссылку   -  person    schedule 14.12.2019
comment
@ Неизвестно Спасибо за попытку. Я также попробовал приведенный выше код в новом простом HTML-файле, но он тоже не работает. Это действительно странно. Я также пробовал это с другим браузером.   -  person John Brunner    schedule 14.12.2019
comment
есть ли ошибка в инструментах разработчика?   -  person    schedule 14.12.2019
comment
@ Неизвестно, нет, ничего. Когда я вставляю console.log (щелкните); заявление, это работает нормально. Я также пробовал приведенный выше код (и простой HTML-файл) с базовым «обработчиком кликов javascript» вместо «jQuery», но это тоже не работает. Я запускаю эту штуку с XAMPP на локальном хосте.   -  person John Brunner    schedule 14.12.2019
comment
хмм .. попробуйте добавить console.log (ui) в обработчик кликов, чтобы увидеть, какие функции могут быть вызваны в пользовательском интерфейсе, я не могу найти функцию openCart в документации из быстрого просмотра   -  person    schedule 14.12.2019
comment
@Unknown Странно то, что он отлично работает с функцией setTimeout   -  person John Brunner    schedule 14.12.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно не дать событию всплыть в цепочке. Добавьте event.stopPropagation, как показано

$('#shoppingCartDropdownInvoker').click(function(event){
  event.stopPropagation();
  ui.openCart();
});
person Michael Theodore    schedule 11.06.2020