將外部 Javascript 嵌入到 Shopify 液體文件中以編輯特定 div

Question

第一次在這里發海報。 總的來說，我對 shopify 和計算機科學還很陌生，所以請多多包涵。

我正在嘗試更新橫幅，使其在 3 條短信之間輪換。 這是我寫的 JS 和 HTML。 請注意，JS 文件位於 assets 下。

 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 $750+"; 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 $1500 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>

最終目標是讓橫幅僅在客戶未向其購物車中添加任何內容時旋轉。 當我使用{{'banner.js' | asset_url | script_tag}}嵌入 js 時{{'banner.js' | asset_url | script_tag}} {{'banner.js' | asset_url | script_tag}}以及<script src = "{{'banner.js | asset_url | script_tag}}"></script>

后者似乎不起作用，盡管前者會導致理論上應該的無限循環，但這會導致頁面無限加載並且永遠不會顯示內容的 rest。

此外，即使我內聯了 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 $750+"
];

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