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

您的问题的根源是您的模板启用了AJAX加载。目前有一些普遍接受的方法可以作为Squarespace开发人员处理这个问题：

1. 禁用AJAX加载
2. 以初始站点加载和每当发生“AJAX加载”时运行的方式编写javascript函数。

Option 1 - Disable AJAX：

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

选项2 - 开发人员有多种方法可以解决这个问题，包括：

<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/页面或其他“系统”页面）。通过在上述某个方法的上下文中添加代码，并确保代码当然在所需的上下文中工作而没有自己的错误/问题，您将在初始站点加载和每个AJAX页面上运行代码加载（有一些例外，取决于您使用的方法）。

Answer 2

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

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

你用任何重置格式替换console.log("hello")的地方。