将外部 Javascript 嵌入 Shopify Liquid 文件以编辑特定 div

Question

第一次张贴在这里。总的来说，我对 shopify 和计算机科学还很陌生，所以请多多包涵。

我正在尝试更新横幅，使其在 3 条短信之间轮换显示。这是我写的JS和HTML。请注意，JS 文件位于资产下。

    var banner = document.getElementById("discountbanner");
    setInterval(bannerupdate, 3000);

    function bannerupdate(){
      for(i=1; i != 0; i++)
      {
        switch(i%2){
          case 0:
              banner.innerHTML = "Preorder now for 10% off!";
              break;
          case 1:
              banner.setAttribute("href", "xyz.com");
              banner.innerHTML = "Buy More, Save More: Save up to 30% today!";
              break;
          case 2:
            banner.innerHTML = "Free Shipping on orders of 0+";
            break;
        }
       }
    }

         <div id="discountbanner">
            {% assign pricegoal = cart.items_subtotal_price | divided_by: 100 %}
            {% if pricegoal == 0 %}
                <!--embed JS here-->
             {% elsif pricegoal < 3000 %}
           <a href="xyz.com" title="Click here to learn more!">Spend only ${{ 3000 | minus: pricegoal }} more to save 20%!</a>
            {% elsif pricegoal == 3000 %} 
           <a href="xyz.com" title="Click here to learn more!">You saved 20% on this order! Spend an extra 00 and save an extra 10%!</a>
            {% elsif pricegoal > 3000 and pricegoal < 4500 %}
           <a href="xyz.com" title="Click here to learn more!">You've saved 20%! Spend only ${{ 4500 | minus: pricegoal }} more to save 30%!</a>
            {% elsif pricegoal > 4500 %}
            You got 30% off your order!
            {% endif %}
          </div>

最终目标是让横幅仅在客户未向购物车中添加任何东西时才旋转。当我嵌入 js 使用 {{'banner.js' | asset_url | script_tag}} 也 <script src = "{{'banner.js | asset_url | script_tag}}"></script>

后者似乎不起作用，尽管前者会导致无限循环，理论上应该如此，但这会导致页面无限加载并且永远不会显示其余内容。

此外，即使我内联js，它仍然没有正确更新。关于如何解决这个问题有什么想法吗？

我猜这与 js 有关。

Answer 1

你的JS代码好像有问题

var i = 0;
var textArray = [
"Preorder now for 10% off!",
"Buy More, Save More: Save up to 30% today!",
"Free Shipping on orders of 0+"
];

 setInterval(()=>{
  banner.innerHTML = textArray[i%3];
  i++;
 }, 3000);

将外部 Javascript 嵌入 Shopify Liquid 文件以编辑特定 div

Embedding External Javascript into a Shopify Liquid File to edit a specific div

html

javascript

liquid

shopify