A theme app extension boilerplate that highlights the basic structure and features that are available to developers who want to integrate their apps with Shopify Online Stores.
I am working on a project which have an extension for example (AppBlock).
the extension looks something like this, a very simple one
THIS IS THE LIQUID FILE (BLOCK FOLDER)
This is my div id app
"Content"
{% schema %}
{
"name": "app",
"target": "section",
"javascript": "app.js" ,
"settings": [
{ "type": "product", "id": "product", "label": "product", "autofill": true },
{ "type": "color", "id": "colour", "label": "Star Colour", "default": "#ff0000" }
]
}
{% endschema %}
THIS IS THE JS FILE I HAVE
console.log("Hiii js is linked");
let elem = document.getElementById('app');
for (let i = 0 ; i < 4 ; i++) {
elem.innerHTML += i + " "
}
So if i add this exension for the first time everthing is working fine my block printing "Content0 1 2 3" but for the second time if i add the same extension on the same page the block is printing only 'Content' the js content is not getting appended. I am getting this error.
(appjs:5 Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')
at app.js:5:3)
this is just a example i have to use this logic in my main project please help me out so that i can able to add same block multiple time at a same page.
Thanks in advance.
I am working on a project which have an extension for example (AppBlock). the extension looks something like this, a very simple one THIS IS THE LIQUID FILE (BLOCK FOLDER) This is my div id app "Content" {% schema %} { "name": "app", "target": "section", "javascript": "app.js" , "settings": [ { "type": "product", "id": "product", "label": "product", "autofill": true }, { "type": "color", "id": "colour", "label": "Star Colour", "default": "#ff0000" } ] } {% endschema %}
THIS IS THE JS FILE I HAVE console.log("Hiii js is linked"); let elem = document.getElementById('app');
for (let i = 0 ; i < 4 ; i++) { elem.innerHTML += i + " " }
So if i add this exension for the first time everthing is working fine my block printing "Content0 1 2 3" but for the second time if i add the same extension on the same page the block is printing only 'Content' the js content is not getting appended. I am getting this error. (appjs:5 Uncaught TypeError: Cannot read properties of null (reading 'innerHTML') at app.js:5:3) this is just a example i have to use this logic in my main project please help me out so that i can able to add same block multiple time at a same page. Thanks in advance.