JavaScript вызывается только один раз в Squarespace - PullRequest
Новая
       33

JavaScript вызывается только один раз в Squarespace

0 голосов
/ 02 февраля 2019

У меня есть собственный JavaScript на моем сайте SquareSpace, который манипулирует названиями продуктов, помимо того, что вы можете сделать с помощью редактора стилей 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;

  });

Ответы [ 2 ]

0 голосов
/ 02 февраля 2019

Источник вашей проблемы в том, что в вашем шаблоне включена загрузка AJAX.В настоящее время есть несколько общепринятых способов справиться с этим в качестве разработчика Squarespace:

  1. Отключить загрузку AJAX
  2. Напишите функции JavaScript таким образом, чтобы они выполнялись при начальной загрузке сайтаи всякий раз, когда происходит «загрузка AJAX».

Опция 1 - отключить 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.загрузить (за некоторыми исключениями, в зависимости от используемого вами метода).

0 голосов
/ 02 февраля 2019

Ваша проблема в том, что страница не перезагружается при нажатии на кнопку слева, только некоторые элементы удаляются, добавляются и заменяются.Измененные элементы не будут рестайлинг.Вам нужно будет повторно запустить JavaScript после нажатия одной из этих кнопок.Возможно, что-то вроде этого: 

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

, где вы заменяете console.log("hello") тем, что сбрасывает форматирование.

...