Accessing DOMelements generated by Shopify BuyButton.js UI Client

Question

Accessing DOMelements generated by Shopify BuyButton.js UI Client

426 Views Asked by riley donahue At 06 April 2025 at 22:22

I'm building a website where I want to run a secondary function when the "Add to Cart" button is clicked.

For some reason when I try using any sort of event listener or getElementsbyTagName to access the button created by the BuyButton script, it always returns as undefined and gives me this error:

Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML')

Here's my code:

   <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>

I removed the Shopify specific accessToken & domain name for security purposes.

Any help in understanding why these DOM Elements that are being created by the Shopify script are inaccessible would be highly appreciated.

Original Q&A

There are 1 best solutions below

**drip** · Answer 1

Shopify BuyButton generates an iframe inside your element.

This means two things:

You need to wait for the element to be present in the DOM (since this makes async request, you can't access it on DOM ready)
You need to get the content of the iframe in order to get the button

So you need to chain a .then to your component creation method, like so:

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

An target the iframe content inside of there and do your logic afterwards.

And that's pretty much all you have to do.

Accessing DOMelements generated by Shopify BuyButton.js UI Client

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in SDK

Related Questions in SHOPIFY

Related Questions in BUYBUTTON.JS

Trending Questions

Popular # Hahtags

Popular Questions