Liquid、JavaScriptなどに関する質問
{% assign menu = linklists[section.settings.main_linklist] %}
{% for link in menu.links %}
{% if link.links != blank %}
{% assign link-title = link.title | strip %}
{% assign is-mega-menu = false %}
{% if section.settings.enable_mega_menu == true %}
{% for block in section.blocks %}
{% assign block-title = block.settings.mega-menu | strip %}
{% if block-title == link-title %}
{% assign is-mega-menu = true %}
{% assign mega-menu-block = block %}
{% endif %}
{% endfor %}
{% endif %}
<li class="site-nav--has-dropdown {% if is-mega-menu %} mega-menu{% endif %}" aria-haspopup="true">
<a href="{{ link.url }}" class="site-nav__link">{{ link.title }}<span class="icon icon-arrow-down" aria-hidden="true"></span>
</a>
<ul class="site-nav__dropdown dropdown__list">
{% for sub_link in link.links %}
{% if sub_link.levels > 0 %}
<li class="dropdown__cat cat" aria-haspopup="true">
<a href="{{ sub_link.url }}" class="cat__link">{{ sub_link.title | escape }}</a>
<ul class="dropdown__artists">
{% for sub_sub_link in sub_link.links %}
<li><a href="{{ sub_sub_link.url }}" class="site-nav__link">{{ sub_sub_link.title | escape }}</a></li>
{% endfor %}
</ul>
</li>
{% else %}
<li class="cat"><a href="{{ sub_link.url }}" class="cat__link">{{ sub_link.title | escape }}</a></li>
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<li><a href="{{ link.url }}" class="site-nav__link">{{ link.title }}</a></li>
{% endif %}
{% endfor %}
と言ったメガナビで、「sub_sub_link」のページに設定されているカスタムフィールドを表示したいのですが、
うまくいかず表示できずにいます。
もし宜しければお知恵をお借りできないでしょうか?
よろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
もう不要かもしれませんが、よりシンプルな形にできそうだったので追記します。
{{ all_products['ハンドル名'].metafields.hoge.fuga }}
collectionを使わずとも、必要なページのハンドル名を記載すれば値が取れました。
成功
状況を鑑みまして、原因は不明なものの状況がある程度見えてはきたので、一応ですが即席で以下のコードを作ってみました。
{% assign collectionHandle = sub_sub_link.url | split: "/" | last %}
取得した値の確認用: {{ collectionHandle }}<br>
{{ collections[collectionHandle].metafields.photo.photo }}
コレクションのハンドルをURLの末尾からとり、それを設定するサンプルです。
実際に動かして試していないのですが、恐らく動作するかと思います。
こちらの記事が、同様のことをやっているので参考になりますでしょうか?
https://www.shopify.com/partners/blog/shopify-link-list
冒頭の、linklistの参照は、sectionの設定を見て判断しているようですが、これがちゃんと動作するかは不明です。(ブログでは、{% for link in linklists.main-menu.links %} となっています)。
コメントありがとうございます。
お礼が遅くなってしまい申し訳ありません。
現在、サブナビのサブナビまでの表示はできている状態で、そのサブナビのサブナビの飛び先に設定してるカスタムフィールドをそのナビ無いで取得する事は出来ないかと奮闘しております。
具体的には、最終的に表示するナビは作家別コレクションになっていて(その上のナビは素材別コレクション)、各作家にアイコンをカスタムフィールドで登録しています。
そちらを表示させたいと思っております。
度々となってしまいますが、お知恵をお借りできれば幸いです。
皆様、よろしくお願いいたします。
横から失礼します。
実際に試していないのと、仕組み的にバッドノウハウの可能性が高いのですが、一応できそうかなというのが考えられたので記載したいと思います。
{% for collection in collections %}
{% if collection.title == 'コレクション名' %}
{% for product in collection.products %}
{% if product.url == sub_sub_link.url %}
{{ product.metafields.メタフィールド名 }}
{% endfor %}
{% endif %}
{% endfor %}
{% if product.url == sub_sub_link.url %} が成り立つのなら、表示可能なはずです。
成り立たない場合は、sub_sub_linkから取れる他の値を使って、product内の値と比較できればなんとかなるかもしれません。
ただ他にも懸念点があります。
{% for sub_link in link.links %} のループの中の {% for sub_sub_link in sub_link.links %} のループの中で、さらにコレクションのループとそのproductのループを展開するという状態になるため、パフォーマンスに問題が出る気がします。
コレクションを利用しているため、sub_sub_linkに設定する商品でコレクションを作る必要もあります。
この点はコレクションを使わずにproductsの値が取れれば解決できるのですが、方法がわかりませんでした。
動作しない、あるいは目的に沿っていないなどでしたら申し訳ありません。
成功
もう不要かもしれませんが、よりシンプルな形にできそうだったので追記します。
{{ all_products['ハンドル名'].metafields.hoge.fuga }}
collectionを使わずとも、必要なページのハンドル名を記載すれば値が取れました。
>jizo様
お礼が遅くなり大変申し訳ありません。。。
まだ試せていないのですが、時間が取れ次第試してみます。
ありがとうございます。
やっと時間を作れて、試せたのですが、表示されませんでした。
根本的な仕組みを理解しきれていないので、自分の環境に適用させるのが難しく、ダメでした。
liquidについて、しっかり勉強しないとダメですね。。。
色々とお知恵をお借りいたしまして、ありがとうございます。
表示されなかったとのこと、コードが動作せず残念です。
すでにクローズかと思いますが、ちょうど最近の案件でこちらのご希望と同種の要望を満たすコードを作る必要がありまして、ちゃんと動くものができましたので、それを元に一応記載します。
{{ all_products[sub_sub_link.handle].metafields.hoge.fuga }}
手持ちの開発ストアで上記を試しますと値の取得を確認できているのですが、お試しになられて取得できないのであれば、私が質問内容から把握した状態と実際の状態とが違うのかもしれません。(例えば表示したいのは商品ではなくコレクションのメタフィールドの値であるなど)
そのたり明確になりますと具体案が出せるかもしれませんが、もはや不要でしたら無視していただければと思います。
■補足
当初記載いただいたコードを一部引用して組み込みますと以下のようになります。入力された内容がURLなのか画像名なのか不明のため、とりあえず値を出力させるだけのものです。
{% for sub_sub_link in sub_link.links %}
<li>
<a href="{{ sub_sub_link.url }}" class="site-nav__link">
{{ sub_sub_link.title | escape }}<br>
カスタムフィールドの値:{{ all_products[sub_sub_link.handle].metafields.hoge.fuga }}
</a>
</li>
{% endfor %}
コレクションで分類したものの一覧を表示し、その一つ一つの登録されているmetafieldsに登録した画像を表示使用しております。
metafieldsには、「Advanced Custom Fields」をして要していまして、NamespaceとKeyはともに「photo」と同じものにしてしまっています。。。
ご教授いただいたソースをもとに、
{% for sub_sub_link in sub_link.links %}
<li>
<a href="{{ sub_sub_link.url }}" class="site-nav__link">
{{ sub_sub_link.title | escape }}<br>
カスタムフィールドの値:{{ all_products[sub_sub_link.handle].metafields.photo.photo }}
</a>
</li>
{% endfor %}
と、入れてみたのですが、何も取得できず、情けない話どこが問題かも把握できない状態です。。。
試作いただきありがとうございます。
確認したいのですが、メタフィールドを設定したのは以下のいずれでしょうか?
度々、ご確認ありがとうございます。
・コレクション
となります。
なるほど。では以下でいけると思います。
{{ collections[sub_sub_link.handle].metafields.photo.photo }}
対象が商品のカスタムフィールドだと勘違いしていました。申し訳ありません。
現在、以下の状態なのですが、何も表示されませんでした。。。
「metafields」への登録の仕方が、おかしいのか、色々試行錯誤しているのですが。。。
{% assign menu = linklists[section.settings.main_linklist] %}
{% for link in menu.links %}
{% if link.links != blank %}
{% assign link-title = link.title | strip %}
{% assign is-mega-menu = false %}
{% if section.settings.enable_mega_menu == true %}
{% for block in section.blocks %}
{% assign block-title = block.settings.mega-menu | strip %}
{% if block-title == link-title %}
{% assign is-mega-menu = true %}
{% assign mega-menu-block = block %}
{% endif %}
{% endfor %}
{% endif %}
<li class="site-nav--has-dropdown {% if is-mega-menu %} mega-menu{% endif %}" aria-haspopup="true">
<a href="{{ link.url }}" class="site-nav__link">{{ link.title }}<span class="icon icon-arrow-down" aria-hidden="true"></span>
</a>
<ul class="site-nav__dropdown dropdown__list">
{% for sub_link in link.links %}
{% if sub_link.levels > 0 %}
{% if forloop.first == true %}
<li class="dropdown__cat cat active" aria-haspopup="true">
{% else %}
<li class="dropdown__cat cat" aria-haspopup="true">
{% endif %}
<a href="{{ sub_link.url }}" class="cat__link">{{ sub_link.title | escape }}</a>
<ul class="dropdown__artists">
{% for sub_sub_link in sub_link.links %}
<li>
<a href="{{ sub_sub_link.url }}" class="site-nav__link">
{{ collections[sub_sub_link.handle].metafields.photo.photo }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li class="cat"><a href="{{ sub_link.url }}" class="cat__link">{{ sub_link.title | escape }}</a></li>
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<li><a href="{{ link.url }}" class="site-nav__link">{{ link.title }}</a></li>
{% endif %}
{% endfor %}
一旦動的な値の設定はおきまして、以下は出力できますでしょうか?
{{ collections[コレクションページのハンドル名].metafields.photo.photo }}
{{ collections[コレクションページのハンドル名].title }}
上記のコレクションページのハンドル名は、どのコレクションでも良いので一つ選んで、上下同じ値をいれて見てください。
記述場所は、今回のlinkのループの中でも外でも問題ありません。
これはハンドルを固定値で打ち込んで、そこから目的の値が取れるかのテストとなります。
titleの方が取れれば、目的のコレクションのタイトルが表示されるはずです。
コレクションのタイトルが表示されるのにmetafieldsの値が表示されない場合、メタフィールドに値が設定されていない可能性があります。
または、アプリ専用の値の取り方があるかもしれません。
{{ collections[コレクションページのハンドル名].metafields.custom_fields["photo"] }}
{{ collections[コレクションページのハンドル名].metafields.custom_fields["photo","photo"] }}
アプリのドキュメントで該当の情報が見つけられていないのですが、別のところで見たコードから考えまして、上記のような書き方でもテストいただければと思います。
両者ともに、データを取得することができました!
ということは、ループ内での取得がうまくいっていないという事でしょうか?
両者というのはどのコードでしょうか?
{{ collections[コレクションページのハンドル名].metafields.photo.photo }}
{{ collections[コレクションページのハンドル名].title }}
こちらで、直接コレクションのハンドル名を指定した場合です。
{{ collections[sub_sub_link.handle].metafields.custom_fields['photo','photo'] }}
こちらは、シンタックスエラーがでてしまいました。。。
返答いただきありがとうございます。
となりますと当初想定していた方法で値は取れますね。
先ほどのコードを以下に変えて、値をみていだければと思います。
{% for sub_sub_link in sub_link.links %}
<li>
<a href="{{ sub_sub_link.url }}" class="site-nav__link">
{{ collections[sub_sub_link.handle].metafields.photo.photo }}<br>
{{ sub_sub_link.handle }}<br>
{{ sub_sub_link.title }}
</a>
</li>
{% endfor %}
上記で{{ sub_sub_link.handle }}の値が取れているなら、今度はその値で先ほどの固定値の値を書き換えて試してみてください。
{{ sub_sub_link.handle }}で値がとれていない場合は以下のような状態だと確定できます。
そのため、あとは渡す値さえ作れればというところですね。
本当に何度もありがとうございます。
試した結果ですが、
{{ sub_sub_link.handle }}
で表示されるものが、「ハンドル」ではなく「ページタイトル」 となっていました。。。
この状態は、一体どういう状態なのでしょうか。。。
日本の弁当文化は約1200年前に遡る。日本の食文化の一つとして人々を魅了し続けてきた、小さいな箱に詰まったお弁当。今では海外でも大変人気を集めています。そんな独特な日本文化を世界へ...
By rinaflora Mar 26, 20232月に、新しい英語版AMAディスカッションボードで2週間にわたって初めてのコミュニティAMAを開催しました。
By SarahF_Shopify Mar 19, 2023不正注文やチャージバック被害はビジネスへ大きな被害を与えます、このブログでは簡単な防止策を紹介し、ストア保護を最適化します
By Mirai Mar 13, 2023