shopify scriptTag - how to add css file dynamically?

Question

I would like to add an option to merchants to include our snippet on their product and cart pages automatically.

For this we plan to use scriptTag that inserts the html to show the snippet.

My questions:

is it possible to load a custom css file when our code runs?
How can I tell if the code runs on the product or cart pages?

Thanks for the help

since you're inlining HTML in your script, just inline your css too. — David Lazar
@DavidLazar, true, but this is hard when using external libraries. — itsdarrylnorris

Viral Viral · Accepted Answer · 2018-06-12T06:40:51

You can load JS/CSS using following options

1) Option 1 : Customizing existing active theme .liquid template. And inject your JS file in footer.liquid with all code ( THIS IS NOT RECOMMENDED WAY )

function loadjscssfile(filename, filetype){
    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype=="css"){ //if filename is an external CSS file
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

2) Option 2 : Crate your own PRIVATE SHOPIFY APP and use script tag to insert your own JAVASCRIPT FILE this way when store owner un-install your private app then automatically your inserted code will also be removed ( THIS IS RECOMMENDED WAY )

Reference : https://help.shopify.com/api/reference/online_store/scripttag

Question : How to know currently on which page is ? By Inserted JAVA-SCRIPT using ScriptTag ?

Answer : Use following code sample for shopify page identification

$(document).ready(function() {

     if (window.location.href.indexOf("product") > -1) {

         // Console.log("We're in product detail page");

     }else if(window.location.href.indexOf("cart") > -1){

         // Console.log("We're in cart page");

     }

});

shopify scriptTag - how to add css file dynamically?

1 Answers