FROM CACHE - jp_header
解決済

MEGA MENUなどに表示される、第2階層のナビ一覧に、そのページのカスタムフィールドを取得し表示する事は可能でしょうか?

k2b8692
観光客
18 0 1
{% 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」のページに設定されているカスタムフィールドを表示したいのですが、
うまくいかず表示できずにいます。

もし宜しければお知恵をお借りできないでしょうか?
よろしくお願いいたします。

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

成功

もう不要かもしれませんが、よりシンプルな形にできそうだったので追記します。

 

 

{{ all_products['ハンドル名'].metafields.hoge.fuga }}

 

 

collectionを使わずとも、必要なページのハンドル名を記載すれば値が取れました。

 

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

元の投稿で解決策を見る

Jizo_Inagaki
Shopify Partner
990 373 690

成功

状況を鑑みまして、原因は不明なものの状況がある程度見えてはきたので、一応ですが即席で以下のコードを作ってみました。

{% assign collectionHandle = sub_sub_link.url | split: "/" | last %}
取得した値の確認用: {{ collectionHandle }}<br>
{{ collections[collectionHandle].metafields.photo.photo }}

 

コレクションのハンドルをURLの末尾からとり、それを設定するサンプルです。

実際に動かして試していないのですが、恐らく動作するかと思います。

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

元の投稿で解決策を見る

27件の返信27

junichiokamura
Community Manager
1200 280 506

こちらの記事が、同様のことをやっているので参考になりますでしょうか?

https://www.shopify.com/partners/blog/shopify-link-list

冒頭の、linklistの参照は、sectionの設定を見て判断しているようですが、これがちゃんと動作するかは不明です。(ブログでは、{% for link in linklists.main-menu.links %} となっています)。

 

Senior Partner Solutions Engineer
k2b8692
観光客
18 0 1

コメントありがとうございます。
お礼が遅くなってしまい申し訳ありません。

現在、サブナビのサブナビまでの表示はできている状態で、そのサブナビのサブナビの飛び先に設定してるカスタムフィールドをそのナビ無いで取得する事は出来ないかと奮闘しております。

具体的には、最終的に表示するナビは作家別コレクションになっていて(その上のナビは素材別コレクション)、各作家にアイコンをカスタムフィールドで登録しています。
そちらを表示させたいと思っております。

度々となってしまいますが、お知恵をお借りできれば幸いです。

皆様、よろしくお願いいたします。

Jizo_Inagaki
Shopify Partner
990 373 690

横から失礼します。

実際に試していないのと、仕組み的にバッドノウハウの可能性が高いのですが、一応できそうかなというのが考えられたので記載したいと思います。

 

 

{% for collection in collections %}
  {% if collection.title == 'コレクション名' %}
    {% for product in collection.products %}
      {% if product.url == sub_sub_link.url %}
        {{ product.metafields.メタフィールド名 }}
    {% endfor %}
  {% endif %}
{% endfor %}

 

 

  1. 目的の商品のみでコレクションを作る
  2. forでコレクション内の商品情報を取り出す
  3. 商品のURLとsub_sub_link.urlが一致した場合にメタフィールドを取り出す

 

{% 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の値が取れれば解決できるのですが、方法がわかりませんでした。

 

動作しない、あるいは目的に沿っていないなどでしたら申し訳ありません。

 

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

成功

もう不要かもしれませんが、よりシンプルな形にできそうだったので追記します。

 

 

{{ all_products['ハンドル名'].metafields.hoge.fuga }}

 

 

collectionを使わずとも、必要なページのハンドル名を記載すれば値が取れました。

 

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

やっと時間を作れて、試せたのですが、表示されませんでした。

根本的な仕組みを理解しきれていないので、自分の環境に適用させるのが難しく、ダメでした。
liquidについて、しっかり勉強しないとダメですね。。。

色々とお知恵をお借りいたしまして、ありがとうございます。

Jizo_Inagaki
Shopify Partner
990 373 690

表示されなかったとのこと、コードが動作せず残念です。

すでにクローズかと思いますが、ちょうど最近の案件でこちらのご希望と同種の要望を満たすコードを作る必要がありまして、ちゃんと動くものができましたので、それを元に一応記載します。

 

 

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

 

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

コレクションで分類したものの一覧を表示し、その一つ一つの登録されている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 %}

と、入れてみたのですが、何も取得できず、情けない話どこが問題かも把握できない状態です。。。

Jizo_Inagaki
Shopify Partner
990 373 690

試作いただきありがとうございます。

確認したいのですが、メタフィールドを設定したのは以下のいずれでしょうか?

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

度々、ご確認ありがとうございます。

・コレクション

となります。

Jizo_Inagaki
Shopify Partner
990 373 690

なるほど。では以下でいけると思います。

 {{ collections[sub_sub_link.handle].metafields.photo.photo }}

 

対象が商品のカスタムフィールドだと勘違いしていました。申し訳ありません。 

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

現在、以下の状態なのですが、何も表示されませんでした。。。
「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 %}

 

 

Jizo_Inagaki
Shopify Partner
990 373 690

一旦動的な値の設定はおきまして、以下は出力できますでしょうか?

{{ collections[コレクションページのハンドル名].metafields.photo.photo }}
{{ collections[コレクションページのハンドル名].title }}

 

上記のコレクションページのハンドル名は、どのコレクションでも良いので一つ選んで、上下同じ値をいれて見てください。

記述場所は、今回のlinkのループの中でも外でも問題ありません。 

 

これはハンドルを固定値で打ち込んで、そこから目的の値が取れるかのテストとなります。

titleの方が取れれば、目的のコレクションのタイトルが表示されるはずです。

コレクションのタイトルが表示されるのにmetafieldsの値が表示されない場合、メタフィールドに値が設定されていない可能性があります。

または、アプリ専用の値の取り方があるかもしれません。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
Jizo_Inagaki
Shopify Partner
990 373 690
{{ collections[コレクションページのハンドル名].metafields.custom_fields["photo"] }}
{{ collections[コレクションページのハンドル名].metafields.custom_fields["photo","photo"] }}

 

アプリのドキュメントで該当の情報が見つけられていないのですが、別のところで見たコードから考えまして、上記のような書き方でもテストいただければと思います。

 

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

両者ともに、データを取得することができました!

ということは、ループ内での取得がうまくいっていないという事でしょうか?

Jizo_Inagaki
Shopify Partner
990 373 690

両者というのはどのコードでしょうか?

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
k2b8692
観光客
18 0 1
{{ collections[コレクションページのハンドル名].metafields.photo.photo }}
{{ collections[コレクションページのハンドル名].title }}

こちらで、直接コレクションのハンドル名を指定した場合です。

 

{{ collections[sub_sub_link.handle].metafields.custom_fields['photo','photo'] }}

こちらは、シンタックスエラーがでてしまいました。。。

Jizo_Inagaki
Shopify Partner
990 373 690

返答いただきありがとうございます。

となりますと当初想定していた方法で値は取れますね。

先ほどのコードを以下に変えて、値をみていだければと思います。

 

 

{% 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 }}で値がとれていない場合は以下のような状態だと確定できます。

  • メタフィールドを出力する記述自体はあっている
  • 出力する記述に渡す値が間違っている

そのため、あとは渡す値さえ作れればというところですね。

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

本当に何度もありがとうございます。

試した結果ですが、

{{ sub_sub_link.handle }}

で表示されるものが、「ハンドル」ではなく「ページタイトル」 となっていました。。。

この状態は、一体どういう状態なのでしょうか。。。

Jizo_Inagaki
Shopify Partner
990 373 690

とりあえずですがハンドルをちゃんと確認するために、コレクション設定ページの下部の「ウェブサイトのSEOを編集する」というテキストをリンクをクリックしてください。

スクリーンショット 2020-09-06 22.11.20.png

すると上記のように表示されると思いますので、ここで下部のハンドル(太文字の部分)を確認してください。

ここのハンドルの値と、先ほど出力していただいた{{ sub_sub_link.handle }}の値と確認してください。

通常これは同じはずですが、違っていますでしょうか?

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

はい、そちらを確認して入るのですが、ハンドル値はちゃんと英語表記になっていて、その上のページタイトルに入れている文字が表示されてしまっている状態です。。。

Jizo_Inagaki
Shopify Partner
990 373 690

確認ですが、以下の値は同じでしょうか?

  • コレクションページのURLの最後のスラッシュのあとの文字列
  •  {{ sub_sub_link.handle }}で出力した文字列

私が先ほど添付した画像を例に出せば、この2つはいずれも「frontpage」になります。

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

該当ページを表示した状態ですと、その2つは同じものとなり、画像も表示されました。

他のページでみた場合、タイトル(日本語表記 | 英語表記)とも少し違う「日本語表記-英語表記」というテキストが表示されています。。。

Jizo_Inagaki
Shopify Partner
990 373 690

成功

状況を鑑みまして、原因は不明なものの状況がある程度見えてはきたので、一応ですが即席で以下のコードを作ってみました。

{% assign collectionHandle = sub_sub_link.url | split: "/" | last %}
取得した値の確認用: {{ collectionHandle }}<br>
{{ collections[collectionHandle].metafields.photo.photo }}

 

コレクションのハンドルをURLの末尾からとり、それを設定するサンプルです。

実際に動かして試していないのですが、恐らく動作するかと思います。

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

こちらのコードで画像が綺麗にループ内それぞれのものが表示されるようになりました!

本当に、長いお時間を使わせてしまい、大変申し訳ありません。
そして、本当にありがとうございます。

Jizo_Inagaki
Shopify Partner
990 373 690

うまくいって何よりです。

ぼんやりと最後の手段的に考えていたものなので少し不安はありますが、URL末尾がハンドルである以上は恐らく大丈夫かと思います。

この度はお疲れさまでした。

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

多くのお力添えに心から感謝いたします。

勉強しながら、改修をと思っていたのですが、勉強するまもなく期日が迫ってしまい、心折れかけておりました。

まだまだ、課題は山積みなので、今回のように頼りっきりにならないように、頑張りたいと思います。
サイトも、みさせていただきました。

勉強させていただこうと思います。

改めまして、ありがとうございます。

k2b8692
観光客
18 0 1

>jizo様

お礼が遅くなり大変申し訳ありません。。。

まだ試せていないのですが、時間が取れ次第試してみます。

ありがとうございます。