【block.settings.○○の使い方】Liquidファイル内でブロックオブジェクトを配列に格納して利用する方法

日本語 ディスカッション 技術的なQ＆A
1

テーマはDawnを利用しています。

初歩的なことかもしれませんが、block.settings.○○の使い方についてアドバイスいただけますと助かります。

実現したいこと

リキッドファイル内の下記のコードについて、 block.settings.photo01 ～ block.settings.photo08 を、配列に格納して、ifの条件式（（配列（photosBlock）の中の一つを指定）の部分）に利用したいです。

{% assign photosBlock = 'block.settings.photo01,block.settings.photo02,block.settings.photo03,block.settings.photo04,block.settings.photo05,block.settings.photo06,block.settings.photo07,block.settings.photo08'|split:','%}

{% if （配列（photosBlock）の中の一つを指定） %}
  //ここに挙動を記述
{% endif %}

試したこと

block.settings.photo01 の部分を photosBlock[0] の形式に置き換えて表示を検証してみましたが、意図通りに動作しませんでした。

※block.settings.photo03 が有効になっていない場合でも {% if photosBlock[2] %} のif内の挙動が実行されてしまいます。

{% assign photosBlock = 'block.settings.photo01,block.settings.photo02,block.settings.photo03,block.settings.photo04,block.settings.photo05,block.settings.photo06,block.settings.photo07,block.settings.photo08'|split:','%}

/*意図通りに動作する*/
{% if block.settings.photo01 %}
  console.log("photo01あるなら表示");
{% endif %} 
{% if block.settings.photo03 %}
  console.log("photo03あるなら表示");
{% endif %} 

/*意図通りに動作しない*/
{% if photosBlock[0] %}
  console.log("photo01あるなら表示");
{% endif %} 
{% if photosBlock[2] %}
  console.log("photo03あるなら表示");
{% endif %}

もしお気づきの点があればアドバイスいただけますと幸いです。

よろしくお願いいたします。

2

Nishi-Ec 様

お世話になっております。

推測ですが、photosBlock配列に入れることで、block.settings.photo01などが変数でなく文字列になっている可能はないでしょうか。

例えば以下のコードだと、sweets配列内は全て文字列で出力されるかと思います。

{% assign sweets = 'cake, icecream, crepe, applepie, tart' | split: ', ' %}

{% for item in sweets %}
  

sweets:{{ item }}

{% endfor %}

なにかヒントになれば幸いです。

3

ご回答ありがとうございます。

ご指摘の通り、変数として認識されていないのかと思います。

block.settings.photo01 ～ 08 まで、繰り返し処理をしたいのですが、配列に格納する以外の方法が考えつかず…。

引き続き調べてみます。

4

値自体を配列にいれる方法も考えられますが、おそらく以下の私のブログのサンプル2の仕組みが該当するように思います。

https://webutubutu.com/webdesign/10985

「オブジェクト ブラケット記法」などで検索いただければ参考になる情報が見つかる思いますので、必要に応じて調査ください。

以上ですが、ご要望と違う場合は申し訳ありません。

5

ご教示のとおりブラケット記法を取り入れることで解決しました。

ご回答に感謝いたします。

修正後のコード↓

{% assign photos = 'photo01,photo02,photo03,photo04,photo05,photo06,photo07,photo08'|split:','%}

                  function noshiPhoto () {
                    {% for i in (0..7) %}
                      {% assign k = i | plus: 1 %}
                      {% assign photoBlock = 'photo0' | append: k %}
                      {% if block.settings[photoBlock] %}
                        var photo = document.getElementById("{{photos[i]}}");
                        if (type.value === "{{ types[k] }}") {
                          photo.style.display = "block";
                        }else{
                          photo.style.display = "none";
                        } 
                      {% endif %} 
                     {% endfor %}
                  };