Question

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

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

我的问题：

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

感谢您的帮助

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

     }

});

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

1 个答案: