shopify - shopify scriptTag - 如何动态添加css文件？

Question

我想为商家添加一个选项，以自动将我们的代码段包含在他们的产品和购物车页面上。

为此，我们计划使用插入 html 的 scriptTag 来显示片段。

我的问题：

1. 我们的代码运行时是否可以加载自定义 css 文件？
2. 如何判断代码是否在产品或购物车页面上运行？

谢谢您的帮助

Answer 1

您可以使用以下选项加载 JS/CSS

1) 选项 1：自定义现有的活动主题.liquid 模板。并将您的 JS 文件与所有代码 ( THIS IS NOT RECOMMENDED WAY)一起注入 footer.liquid

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）选项2：当店主卸载您的私人应用程序时，创建您自己的PRIVATE SHOPIFY APP并使用脚本标签以这种方式插入您自己的代码，然后您插入的代码也将被自动删除（ ）JAVASCRIPT FILETHIS IS RECOMMENDED WAY

参考：https ://help.shopify.com/api/reference/online_store/scripttag

---

问题：如何知道当前在哪个页面？通过使用 ScriptTag 插入 JAVA-SCRIPT ？

答：使用以下代码示例进行shopify页面识别

$(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");

     }

});