FROM CACHE - jp_header
解決済

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

nishi-ec
Shopify Partner
35 2 4

テーマは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 %} 

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

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

1 件の受理された解決策
Jizo_Inagaki
Shopify Partner
990 373 690

成功

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

https://webutubutu.com/webdesign/10985

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

 

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

4件の返信4

株式会社フルバランス
Shopify Partner
1441 504 644

Nishi-Ec 様

 

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

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

 

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

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

{% for item in sweets %}
  <p>sweets:{{ item }}</p><br>
{% endfor %}

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

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
nishi-ec
Shopify Partner
35 2 4

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

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

 

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

引き続き調べてみます。

Jizo_Inagaki
Shopify Partner
990 373 690

成功

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

https://webutubutu.com/webdesign/10985

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

 

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
nishi-ec
Shopify Partner
35 2 4

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

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

 

修正後のコード↓

{% 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 %}
                  };