「Advanced Custom Fields」アプリでProduct variantsに設定したmetafieldsが表示できない

たまごごはん
新規メンバー
2 0 1

「Advanced Custom Fields」アプリをインストールして、https://help.advancedcustomfield.com/の公式ヘルプページを見ながら作業しています。

 

まず、問題なくできた範囲としては、

アプリ内でProductに新しいCustom Fieldsを追加して、そのMetafieldsを設定した後、テーマのproduct-template.liquidファイルにコード{{product.metafields.namespace.key}}を挿入して、該当のShopifyページにMetafieldsの内容が意図した通りに表示されるところまではできました。

 

そして、できていない内容としては、

アプリ内でProduct variantsに新しいCustom Fields(Namespace: Shipping、Key: Hokkaido)を追加して、そのCustom FieldsにMetafieldsを設定(¥3,300)して、上と同様にproduct-template.liquidファイルにコード{{variant.metafields.Shipping.Hokkaido}}を挿入してみましたが、該当のShopifyページにはMetafieldsの内容(¥3,300)が出力されません。

ACF_Configration.pngACF_Metafields.png

Product variantsの場合は、Productと違ってLiquidの記述方法などが異なるのでしょうか。

お分かりの方おられましたらアドバイスいただけますと幸いです。よろしくお願いいたします。

0 件の「いいね!」
Jizo_Inagaki
航海者
296 103 359

恐らくですが以下のようなfor文が抜けているのではと思われます。

{% for variant in product.variants %}
  {{ variant.metafields.hoge.fuga }}
{% endfor %}

記載済みでしたら申し訳ありません。

Jizo_Inagaki | フリーランスのwebデザイナー
- ある程度のテーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- 解決できなかった場合はその旨を記載いただければ助かります。
たまごごはん
新規メンバー
2 0 1

jizoさん

アドバイスいただき、ありがとうございました。

 

ご指摘いただいた「for文」、確かに記述しておりませんでした!

お教えいただいたように、product-template.liquidに下記コードを追記しましたところ、登録したmetafieldは表示できました。

{% for variant in product.variants %}
  {{ variant.metafields.Shipping.Hokkaido }}
{% endfor %}

 ただ、その商品の全てのバリエーションのmetafieldがズラズラっと表示されてしまいましたので、

金額表示と同じように選択したバリエーションと対になったmetafieldのみを表示するには、<option>タグとの組み合わせなどが必要かな?と想像しました。

後でもう少しコードを工夫してみます。

 

数日間まともに動作させられずモヤモヤしていたのですが、ようやく光が見えてきました。

本当にありがとうございました!