Shopify Buy Button on my React site

[Michael_Pinter]

Hello,

I'm integrating the Shopify Buy Button into my React app and noticed the Buy Button does not render unless the page is refreshed. In other words, the button does not appear when you're using React to navigate to pages that contain the Buy Button.  Is there a way to programatically fire the script that loads the button when navigating through React routes?

To go into greater detail, the Buy Button does appear on the DOM when navigating through React routes.  The iframe that is supposed to be generated by the Buy Button does not render, however.  It only renders when the page is reloaded.

Any help would be greatly appreciated!

[Rich_Gilbank]

Hi Michael,

The Buy Button itself does not have an explicit method to render currently, it only loads at DOMContentLoaded. 

However, if you'd like something more custom, the JS Buy SDK could be used for more explicit control over what you're rendering, which lends itself well to working in React. We're also working towards something that will wrap the SDK and provide UI components which could be more easily used, but it's not ready just yet. 

Hope this helps!

Rich

[marjudth]

Hi,

might be a little late but maybe it helps somebody. 

What you have to do:

• Make a Shopify-Component, where you embed the div with the given id from Shopify
• create a js file in your public folder, where you paste the JS code from the buy-button (Attention: you would have to give that function a name and remove the brackets at the end to pretend immediate invoking)
• After that add a script tag to your index.html, where you call your created function: 

document.addEventListener('DOMContentLoaded', function (event) {
    showProducts();
});

Hope that helps! 

BR Marcel