JavaScript 代码在 Shopify 中不起作用...帮助 :(答案

【问题标题】：JavaScript code wont work in Shopify... Help :(JavaScript 代码在 Shopify 中不起作用...帮助 :(
【发布时间】：2021-09-21 06:51:23
【问题描述】：

我正在尝试在我们的 Shopify 商店中在当前公告栏下方添加另一个公告栏，以便我们将 2 个堆叠在一起，但我的 Javascript 无法正常工作。 :(

我什至遵循这些准则来确保一切正确。链接：https://www.askquesty.com/post/how-to-add-javascript-shopify-tutorial 谁能帮帮我？

我的代码：

<script>
function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var el = document.createElement("span.l");
el.innerHTML = "<p class=announcementBar2>FREE SHIPPING</p>";
var div = document.getElementById("announcement-bar");
insertAfter(div, el);
</script>

【问题讨论】：

document.createElement("span.l") 创建一个 <span.l> 元素。接下来，您将在中放入一个
，这也是无效的。但是代码“有效”，因为文本出现在文档中：jsfiddle.net/d7oftjsg 您是否在浏览器控制台中收到任何错误消息？

标签： javascript shopify

【解决方案1】：

尽管这可能有效，但我不建议为此使用 JavaScript，因为它可能会导致布局变化。我会修改公告栏 sn-p，你能提供 GitHub repo 与你的主题吗？

【讨论】：

【解决方案2】：

最终在 header.liquid 中使用 HTML

<div class="promobar-content">

  <div class="bar-inner">
    <span class="header-promotion-text header-promotion-text--desktop">
      <p>FREE SHIPPING with 2 bags</p>
    </span>
  </div>

</div>

【讨论】：