Liquid、JavaScriptなどに関する質問
テーマは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の仕組みが該当するように思います。
https://webutubutu.com/webdesign/10985
「オブジェクト ブラケット記法」などで検索いただければ参考になる情報が見つかる思いますので、必要に応じて調査ください。
以上ですが、ご要望と違う場合は申し訳ありません。
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 %}
なにかヒントになれば幸いです。
ご回答ありがとうございます。
ご指摘の通り、変数として認識されていないのかと思います。
block.settings.photo01 ~ 08 まで、繰り返し処理をしたいのですが、配列に格納する以外の方法が考えつかず…。
引き続き調べてみます。
成功
値自体を配列にいれる方法も考えられますが、おそらく以下の私のブログのサンプル2の仕組みが該当するように思います。
https://webutubutu.com/webdesign/10985
「オブジェクト ブラケット記法」などで検索いただければ参考になる情報が見つかる思いますので、必要に応じて調査ください。
以上ですが、ご要望と違う場合は申し訳ありません。
ご教示のとおりブラケット記法を取り入れることで解決しました。
ご回答に感謝いたします。
修正後のコード↓
{% 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 %}
};
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024