Include JavaScript ScriptTag in Shopify themes Node.js React - Embedded App

Highlighted
Shopify Partner
6 0 1

Hello Everybody, 

I just started developing apps on Shopify. I am a fresh developer with less than 1 year of programming experience. I am giving this info out because I would like to ask for a detailed and more beginner-friendly answer. 

 

I have created an embedded App using Polaris, Node.js, React. 

What I would like to accomplish is that my App will add a JavaScript script tag to the product.template.liquid right under the "Add To Cart" button. Also, it will remove the script tag from the product.template.liquid page when a toggle button in one of my React stateful components is clicked. 

I have the following Toggle handler: 

  state = {
        minValue: '',
        maxValue: '',
        enabled: false,
    }; 

<SettingToggle
           action={{
                        content: contentStatus,
                        onAction: this.handleToggle,
                    }}
                    enabled={enabled}
                    >
                    BusyStore App is{' '}
                    <TextStyle variation="strong">{textStatus}</TextStyle>.
</SettingToggle>

handleToggle = () => { 
        this.setState(({enabled}) => { 
            return {enabled: !enabled};
        })
    }

 

When this.state == enabled POST: 

 </script> 
                function foo() {
                ...
document.getElementById('txt').innerHTML =
            		"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<strong>" + Math.round(count) + "</strong> ogląda teraz ten produkt";
   		         var t = setTimeout(startTime, 2000);
			}
		function checkTime(i) {
   			 if (i < 10) {i = i};
   		 return i;
		}
</script> 

 

when this.state == disabled then DELETE 

 

<body onload="startTime()">
                   			<img src="https://i.imgur.com/345345345.gif"
                        		     alt=""
                        		     style="height: 32px; margin-bottom: -34px;">
					<div id="txt"></div>
</body>

 

I am using on load property to call the function. 

 

How do I go about adding such a snippet: 

Is this the right approach? https://shopify.dev/tutorials/include-javascript-in-shopify-themes 

0 Likes