動的に設定したSectionを他ページにも同じ設定で追加したい

[KidoYuta]

まずやりたいこととしては、

Homeページなどで動的に設定したSectionを、他のProductsやCollectionsといったページでも設定を保持したままSectionを追加したいというものです。

Dawnテーマを使用して、Sectionはblocksで複数のCollectionを設定できるようにしています。

このCollectionを複数設定するSectionは他のProductsやCollectionsといったページでも同じ設定をするため、Collectionを設定する同じ作業がページ分繰り返すことになってしまい、手間になってしまいます。

この手間を解消するために、１箇所でCollectionを設定して他のページでもそれが自動で反映されるような仕組みを作りたいと思ってました。

そのために試したものが、以下になります。

1. settings_schema.json からCollectionを追加する

settingsからであれば各ページから参照できると思いましたが、typeの blocks や repeater が対応していないため、これはできませんでした。

2. theme.liquid にSectionを設定する

Layoutであるtheme.liquidにCollectionを設定するSectionを追加することで設定を一つにはまとめることはできましたが、メインコンテンツである {{ content_for_layout }} の中の構造には入れ込むことができなかったので、これも残念してます。

3. 2.の方法をjsのappendChild()で任意の場所へ無理やり移動

2.の方法ではメインコンテンツの中に入れ込むことができませんでしたが、jsのappendChild()を使って移動させる方法を試みました。

Layoutに追加したCollectionを設定するのSectionを querySelector() などで要素ノード取得します。わかりやすく、ここで取得したSectionを S1 とします。

S1を任意の場所へ移動させる先となるSectionを用意します。これはTemplatesのSectionで、これも同様に querySelector() などで要素ノードを取得します。これは S2 とします。

Layoutで設定した S1 を、Templatesでメインコンテンツ内の任意の場所に置くための S2 に置くために S2.appendChild(S1); で移動させてみました。

図のような感じで実装を試みてみました。

S1はtheme.liquidに以下のようなコードを追記しています。

{%- if template == 'index' or template == 'collection' or template == 'product' -%} // Homepage,Collections,Productsだけ処理
  <div class="jsCollectionList"> // Collection-S1
    {% section 'collection-list' %} // Collectionをblocksで設定するSection
  </div>
{%- endif -%}

S2のSectionはcollection-s2.liquidとして以下のようなコードにしています。

<div class="jsCollectionListTo"></div>
<script>
  let collectionlist = document.querySelector(".jsCollectionList")　// Collection-S1
  let collectionlistTo = document.querySelector(".jsCollectionListTo")　// Collection-S2
  collectionlistTo.appendChild(collectionlist);
  collectionlist.remove();
</script>

この3.の方法は意外とうまく処理はしてくれていました。

意図した処理にはなったものの、以下のHTMLエラーの判定に引っかかってしまいました。

HTML error found
Broken HTML has been detected in your theme's sections/collection-list-to.liquid file. Check that there are no missing or extra HTML tags present.
If you haven't made changes to this code, contact support for help resolving the issue.

エラーは出ているものの通常通り動いてはくれていますが、このエラーをなんとか消したいと思っています。

上記試した方法以外で何か妙案があればご教授いただけたら幸いです。

Homeページなどで１箇所で動的に設定したSectionを、他のProductsやCollectionsといったページでも設定を保持したままSectionを追加するにはどのような方法がありますでしょうか。

[Takase_R · Accepted solution]

はじめまして、Takaseと申します。

こちら気になったので自分の仮環境で試してみました。

試したテーマはdawnでバージョンは11.0.0になります。

1. セクションファイルにcommon.jsonファイルを作成

2. theme.liquidの任意の箇所でcommon.jsonとそれを囲む要素を記述

    <div id="js-common">
      {% sections 'common' %}
    </div>

3. セクションファイルにcommon_target.liquidを作成

<section id="parts_Sec_{{ section.id  | replace: '-', '_' }}">
</section>

<script>
  //すべて読み込んだ後に実行
  window.addEventListener('load', function () {
    //#js-commonが存在するかチェック
    if (document.getElementById('js-common') != null) {
      var section = document.getElementById('parts_Sec_{{ section.id  | replace: '-', '_' }}');
      var common = document.getElementById('js-common');
      section.appendChild(common);
    }
  });
</script>


{% schema %}
{
"name": "共通パーツ移動先セクション",
"settings": [
],
"presets": [{
  "name": "共通パーツ移動先セクション"
}]
}
{% endschema %}

4.common_target.liquidをコレクションページのテンプレートなどに設置

上記で試してみたところ、自分の環境ではHTMLエラーは出ずに今回やりたいことを実現できました。

window.addEventListener('load', function () {});　を外してみたところHTMLエラーがでたので、javascriptの読み込みタイミングが影響してエラーが出ていたようです。

※上記のコードだと、共通セクションはどのページにも表示されてしまうので

{%- if template == 'index' or template == 'collection' or template == 'product' -%}

{%- endif  -%}

などで適宜調整は必要かと思います。

[KidoYuta]

検証いただきありがとうございます。

処理順番に関しては検証抜けておりました…

こちら記載いただいた通りに load してから実行したところ、確かにエラーは出なくなることを確認しました。

行き詰まっておりましたので助かりました。

ありがとうございます。

※の指摘もありがとうございます。

こちら検証のところでまだDefaultでしか運用をしていなかったのでこのようにしておりました。

内容に合わせて適宜調整したいと思います。

[Jizo_Inagaki]

liquidの読み書きが可能なのであれば以下の方法が検討できるかなと思います。

1. 該当のコレクション用のセクションを複製
2. 複製したセクション内でコレクションを設定する箇所を探し、メタオブジェクトを使う形に書き換える
3. 複製したセクションを配置

以上ですが、趣旨を勘違いしていましたら申し訳ありません。

[KidoYuta]

ありがとうございます。

できればテーマ編集内で実装したいところでしたので、メタオブジェクトを使用するのは想定しておりませんでした。

しかし、そのようなやり方もあるという気づきにもなりました。

ご教授いただきありがとうございます。