JavaScript在Squarespace中仅被调用一次 [英] JavaScript only being called once in Squarespace

问题描述

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

I have some custom JavaScript on my SquareSpace site that manipulates Product titles beyond what you can do with SquareSpace's default style editor. It works when initially loading the page (https://www.manilva.co/catalogue-accessories/) but if you click on any of the categories on the left, the styling resets to the default.

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

I'm assuming the JavaScript is being overwritten by the SquareSpace style, but I can't figure out why. Perhaps I'm calling the function in the wrong place?

任何建议都会有所帮助.

Any suggestions would be helpful.

谢谢！

当前代码:

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;

  });

推荐答案

问题的根源是您的模板已启用AJAX加载.作为Squarespace开发人员，目前有两种普遍接受的方法可以解决此问题:

The source of your problem is that your template has AJAX loading enabled. There are currently a couple generally-accepted ways to deal with this as a Squarespace developer:

1. 禁用AJAX加载
2. 在 将在初始站点加载以及"AJAX加载"发生时运行的方式.
   
   

1. Disable AJAX loading
2. Write your javascript functions in a manner that will run on initial site load and whenever an "AJAX load" takes place.
   
   

Option 1 - Disable AJAX:

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

1. In the Home Menu, click Design, and then click Site Styles.
2. Scroll down to Site: Loading.
3. Uncheck Enable Ajax Loading.

选项2-在您的JS中使用AJAX帐户

开发人员可以采用多种方法来解决此问题，包括通过

There are a number of ways that developers approach this, including the following, added via 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/页或其他系统"页上).通过在上述方法之一的上下文中添加代码，并确保代码当然可以在所需的上下文中运行并且没有自身的错误/问题，您将使代码在初始站点加载和每个AJAX页面上运行加载(有些例外，具体取决于您使用的方法).

Each of those works for most of the latest (at time of writing) templates most of the time. Each of those have their advantages and disadvantages, and contexts where they do not work as one might expect (for example, on the /cart/ page or other "system" pages). By adding your code within the context of one of the methods above, and ensuring that the code is of course working in the desired contexts and without its own bugs/issues, you will have your code run on initial site load and on each AJAX page load (with some exceptions, depending on the method you use).

这篇关于JavaScript在Squarespace中仅被调用一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！