Доступ к элементам DOM, сгенерированным Shopify BuyButton.js UI Client

Я создаю веб-сайт, на котором я хочу запустить дополнительную функцию при нажатии кнопки «Добавить в корзину».

По какой-то причине, когда я пытаюсь использовать какой-либо прослушиватель событий или getElementsbyTagName для доступа к кнопке, созданной скриптом BuyButton, она всегда возвращается как неопределенная и дает мне эту ошибку:

Uncaught TypeError: невозможно установить свойства неопределенного (настройка «innerHTML»)

Вот мой код:

         <script src="http://sdks.shopifycdn.com/buy-button/1.0.0/buybutton.js" ></script>    
</head>
<body>
    <div id="shopifyDiv"></div>


    <script type="text/javascript">
    /*<![CDATA[*/
        var client = ShopifyBuy.buildClient({
          domain: 'shopify.myshopify.com',
          storefrontAccessToken: '(myTokenHere)',
        });

        var ui = ShopifyBuy.UI.init(client);

        
        ui.createComponent('product', {
        id: (myIdHere),
        node: document.getElementById('shopifyDiv'),
        options: {
            product:{
              width: '350px',
              contents:{
                img: false,
                button: true,
                title: false
              },
              text: {
          button: 'Add to cart'
        },
            },
          cart:{
            startOpen: false
          },

        }
      
      });


    /*]]>*/
    </script>



  <script type="module">

document.getElementsByTagName('button')[0].innerHTML = 'hello world';

       </script>
    
</body>
</html>

Я удалил специальный токен доступа Shopify и доменное имя в целях безопасности.

Любая помощь в понимании того, почему эти элементы DOM, созданные скриптом Shopify, недоступны, будет высоко оценена.

Источник

1 ответ

Shopify BuyButton генерирует iframe внутри вашего элемента.

Это означает две вещи:

  • Вам нужно дождаться, пока элемент появится в DOM (поскольку это делает асинхронный запрос, вы не можете получить к нему доступ в готовом DOM)
  • Вам нужно получить содержимое iframe, чтобы получить кнопку

Итак, вам нужно связать .thenк вашему методу создания компонента, например:

      ui.createComponent('product', {
  // your original code
}).then((res) => {
  const iframe = document.querySelector('#shopifyDiv iframe').contentDocument;
  iframe.querySelector('button').innerHTML = 'hello world';
});

Нацельтесь на содержимое iframe внутри и затем выполните свою логику.

И это почти все, что вам нужно сделать.

Источник
Другие вопросы по тегам