JavaScript 在 Squarespace 中只被调用一次

Question

我的 SquareSpace 网站上有一些自定义 JavaScript 可以操纵产品标题，这超出了 SquareSpace 的默认样式编辑器所能做的。它在最初加载页面时有效 (https://www.manilva.co/catalogue-accessories/)，但如果您单击左侧的任何类别，样式将重置为默认样式。

我假设 JavaScript 被 SquareSpace 样式覆盖，但我不知道为什么。也许我在错误的地方调用了函数？

任何建议都会有所帮助。

谢谢！

当前代码：

document.querySelectorAll(".ProductList-filter-list-item-link".forEach(i=>i.addEventListener("click", function()
  {
      var prodList = document.querySelectorAll("h1.ProductList-title");
  for (i = 0, len = prodList.length; i < len; i++) 
  {
    var text = prodList[i].innerText;
    var index = text.indexOf('-');
    var lower = text.substring(0, index);
    var higher = text.substring(index + 2);
    prodList[i].innerHTML = lower.bold() + "<br>" + higher;

  });

Answer 1

您的问题是单击左侧按钮时页面没有重新加载，只是删除、添加和替换了一些元素。更改的元素将不会重新设置样式。单击其中一个按钮后，您将需要重新运行您的 JavaScript。也许是这样的：

document.querySelectorAll(
    ".ProductList-filter-list-item"
).forEach(
    i=>i.addEventListener(
        "click", ()=>console.log("hello")
    )
)

将 console.log("hello") 替换为重置格式的任何内容。

Answer 2

问题的根源在于您的模板启用了 AJAX 加载。作为 Squarespace 开发人员，目前有几种普遍接受的方法来处理这个问题：

禁用AJAX加载
将您的 javascript 函数写在这种方式将运行在初始站点加载时以及每当 "AJAX load" 发生时。

Option 1 - Disable AJAX:

在主菜单中，单击设计，然后单击站点样式。
向下滚动到 站点：正在加载。
取消选中启用Ajax加载。

选项 2 - 在您的 JS 中考虑 AJAX

开发人员可以通过多种方式解决此问题，包括以下通过 sitewide code injection 添加的方式：

<script>
window.Squarespace.onInitialize(Y, function() {
  // do stuff
});
</script>

或

<script>
(function() {
  // Establish a function that does stuff.
  var myFunction = function() {
    // Do stuff here.
  };

  // Initialize the fn on site load.
  myFunction();
  // myFunction2(); , etc...

  // Reinit. the fn on each new AJAX-loaded page.
  window.addEventListener("mercury:load", myFunction);
})();
</script>

或

<script>
(function() {
  // Establish a function that does stuff.
  var myFunction = function() {
    // Do stuff here.
  };

  // Initialize the fn on site load.
  myFunction();

  // Reinit. the fn on each new AJAX-loaded page.
  new MutationObserver(function() {
    myFunction();
    // myFunction2(); , etc...
  }).observe(document.body, {attributes:true, attributeFilter:["id"]});
})();
</script>

这些中的每一个在大多数情况下都适用于大多数最新的（在撰写本文时）模板。其中每一个都有其优点和缺点，以及它们不能像人们预期的那样工作的上下文（例如，在 /cart/ 页面或其他 "system" 页面上）。通过在上述方法之一的上下文中添加您的代码，并确保代码当然在所需的上下文中工作并且没有它自己的 bugs/issues，您将在初始站点上拥有您的代码运行加载并在每个 AJAX 页面加载（有一些例外，具体取决于您使用的方法）。

JavaScript 在 Squarespace 中只被调用一次

JavaScript only being called once in Squarespace

javascript

squarespace