Guide: Add HTML file to Assets directory and then import into template
I am building out a navigation menu for my theme and there is a lot of HTML that drives it. Rather than clutter up the templates for Sections and Articles (and force myself to maintain the menu in more than one place), I would like the menu HTML to live in the Assets directory and be strategically imported into the templates as needed.
Unfortunately, Zendesk is not playing well with this plan. I did in fact create an HTML file with the menu and I loaded it to the Assets directory. I then placed the curlybars tag (see below) for that asset into the appropriate spot in the respective templates.
{{asset 'NewMenu.html'}}
When I then preview an article or section, the menu is not showing up at all. I have tried so many different things in an attempt to get the HTML to 'show up', but nothing is working. Can someone offer up some clues here?
Thanks much.
-
Hello Marco,
You can try adding the below code in your template to include an HTML file from the assets folder.
replace asset URL<div id="asset-menu-html"></div>
<script>
$(function(){
$("#asset-menu-html").load("{{asset 'menu-navigation.html'}}");
});
</script>
Hope this helps!!!!
Stay safe
sushant -
Hi Sushant -
Thanks so much for the feedback. The script works like a charm.
Best wishes.
Marco
-
Hi Sushant -
Unfortunately, I spoke a bit too early with my previous comment. While I AM able to get the HTML to load to my template, some of the jQuery scripting (which lives in the 'script.js' file) that I use to style the HTML stops working. What is strange is that if I take the EXACT HTML code that is in the imported file and MANUALLY place it in the template, everything works as it should. This does not make sense to me.
-
I continue to experiment with the templates and associated code and -- as I stated in my previous message -- for some reason, when I use a script to load the HTML to my template from the assets directory, the HTML shows up but the connection to the jQuery in my script.js file gets severed and I lose the dynamic styling that I need in the imported content. But everything renders just fine if I take the EXACT SAME HTML code in the imported asset and manually load it directly into the template. What is it about pulling the HTML from the assets directory that is breaking the connection to the jQuery in my script.js file? Thanks in advance for any additional insights on this.
-
Does your html partial (loaded from assets) contain template tags or helpers? Or is there JavaScript code in that?
You should check browser dev console to see if there are JS errors? The only reasons rest of script will fail if there is JS error or something overriding your code in script.js.
The sequence of items loaded matters, the script.js gets loaded in header in Templating API v1.
Please share more details so we can help.
Thank you
Abdul Qabiz
Team Diziana
Please sign in to leave a comment.
5 Comments