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

Question

我想为商家添加一个选项，以自动将我们的 sn-p 包含在他们的产品和购物车页面中。

为此，我们计划使用插入 html 的 scriptTag 来显示 sn-p。

我的问题：

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

感谢您的帮助

Answer 1

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

1) 选项 1：自定义现有的活动主题 .liquid 模板。并在 footer.liquid 中注入您的 JS 文件，其中包含所有代码 (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) 选项 2：创建您自己的 PRIVATE SHOPIFY APP 并使用脚本标签插入您自己的 JAVASCRIPT FILE 当店主卸载您的私人应用程序时然后自动您插入的代码也将被删除 (THIS 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");

     }

});