JavascriptはSquarespaceで一度だけ呼び出されます

JavaScript only being called once in Squarespace

出典: link タグ:javascriptsquarespace 更新時間:

  問題

私はSquareSpaceのデフォルトスタイルエディタでできることを超えてProductタイトルを操作する私のSquareSpaceサイトにいくつかのカスタムJavaScriptを持っています。最初にページ( 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;

  });

  ベストアンサー

あなたの問題の原因は、テンプレートにAJAXロードが有効になっていることです。現在、これをSquarespace開発者として扱うための一般的に受け入れられる方法がいくつかあります。

  1. AJAXの読み込みを無効にする
  2. あなたのjavascript関数を 最初のサイトの読み込み時に実行され、「AJAXロード」が発生するたびに実行されます。

オプション1 - AJAX を無効にする:

  1. ホームメニューで「デザイン」をクリックし、「サイトスタイル」をクリックします。
  2. サイトまでスクロール:読み込み。
  3. Uncheck Ajax Loading を有効にします。


オプション2 - JSのAJAXのアカウント

開発者がこれにアプローチするいくつかの方法があります。これには、サイトワイドコードインジェクションで追加されました。 

 <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ページにロードします(いくつかの例外を使用

  同じタグがついた質問を見る

javascriptsquarespace
前へ:
次へ: