Guide: Add HTML file to Assets directory and then import into template

5 Comments

  • Sushant Awalekar
    Community Moderator

    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

    0
  • Marco Haber

    Hi Sushant -

    Thanks so much for the feedback. The script works like a charm.

    Best wishes.

    Marco

    0
  • Marco Haber

    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. 

    0
  • Marco Haber

    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.

    0
  • Abdul Qabiz

    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

    0

Please sign in to leave a comment.

Powered by Zendesk