FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

「バリエーション(親)」にメタフィールド(カスタムデータ)を設定したい。

解決済

「バリエーション(親)」にメタフィールド(カスタムデータ)を設定したい。

mr_front_lern
Shopify Partner
7 1 2

相談内容

設定 > カスタムデータ

から、「商品 > バリエーション」にメタフィールドを追加することは出来ると思います。

 

しかしこちらで追加したものは、

各商品ページの「各バリエーション(選択肢1つ1つ)」に対して追加されます。

 

今回は、そうではなくその親にメタフィールドを追加したいです。

 

例えば通常であれば、

===

サイズ

 S M L

===

とあるとして、

「商品 > バリエーション」に追加したフィールドは、

各「S M L」の中で設定できます。

 

そうではなく、

「サイズ」に対してメタフィールドを設定したい、と考えております。

 

理由

例えば「サイズ」「カラー」というバリエーションがあったとします。

その中で、

「サイズ」→「※サイズによって素材が異なる場合があります。」

「カラー」→「※カラーによって商品重量が異なります。」

というように、そのバリエーション(親)に対しての注釈を付けたい、

という部分でございます。

 

(こちらの用途を達成できるのであれば、メタフィールドでなくても構いません)

 

分かりづらい内容で大変恐れ入りますが、

ご教示いただけますと幸いです。

 

1 件の受理された解決策
improv
Shopify Partner
38 12 6

成功

状況把握いたしました。

例えばDawnですと、main-product.liquid の

{%- for option in product.options_with_values -%} の中に下記コードを挿入すると

イメージ通りの表示が可能です。

    {% if option.name == 'サイズ' %}
      <p>※サイズによって素材が異なる場合があります。</p>
    {% elsif option.name == 'カラー' %}
      <p>※カラーによって商品重量が異なります。</p>
    {% endif %}

 

他テンプレートの場合も、バリエーションごとにinputを生成している部分のコードを

探してその中に、オプションの名前ごとに表示を変更する、という分岐を

書けば実現できます。

伊藤佑真 フリーランスwebエンジニア
-shopifyアプリの開発をしています。
- 私の回答で解決しましたら、ぜひいいね、ベストソリューションの承認をお願いします。
- shopifyアプリやシステム開発のご相談はお気軽にDMにて

元の投稿で解決策を見る

5件の返信5

improv
Shopify Partner
38 12 6

バリエーションにメタフィールドを紐づけるのは難しいかと思います。

メタオブジェクトを利用するなどいくつか代案はありますが

下記コードをliquidテンプレート内に挿入することで

特定のオプションがあった場合に、注釈をいれることは実現可能です。

  {% for option in product.options %}
    <div>
      {% if option == 'サイズ' %}
        <p>※サイズによって素材が異なる場合があります。</p>
      {% elsif option == 'カラー' %}
        <p>※カラーによって商品重量が異なります。</p>
      {% endif %}
    </div>
  {% endfor %}

 

伊藤佑真 フリーランスwebエンジニア
-shopifyアプリの開発をしています。
- 私の回答で解決しましたら、ぜひいいね、ベストソリューションの承認をお願いします。
- shopifyアプリやシステム開発のご相談はお気軽にDMにて
mr_front_lern
Shopify Partner
7 1 2

御指南ありがとうございます!

 

そうですよね、、、

でもLiquidの条件分岐で代替できる旨、

そしてコードまで、ありがとうございます。

 

こちらの案もバックアップとして使いたいと思います。

心強いコメントに感謝いたします。

 

メタオブジェクト

というものについて少し調べてみます。

 

mr_front_lern
Shopify Partner
7 1 2

追記:

最も理想形は、添付画像のように、

「各バリエーションに属した感じで注釈を表示」としたい感じです。

(※以下の画像はDevツールで手動でDOMを書き換えたイメージになります)

 

mr_front_lern_0-1703034320951.png

 

improv
Shopify Partner
38 12 6

成功

状況把握いたしました。

例えばDawnですと、main-product.liquid の

{%- for option in product.options_with_values -%} の中に下記コードを挿入すると

イメージ通りの表示が可能です。

    {% if option.name == 'サイズ' %}
      <p>※サイズによって素材が異なる場合があります。</p>
    {% elsif option.name == 'カラー' %}
      <p>※カラーによって商品重量が異なります。</p>
    {% endif %}

 

他テンプレートの場合も、バリエーションごとにinputを生成している部分のコードを

探してその中に、オプションの名前ごとに表示を変更する、という分岐を

書けば実現できます。

伊藤佑真 フリーランスwebエンジニア
-shopifyアプリの開発をしています。
- 私の回答で解決しましたら、ぜひいいね、ベストソリューションの承認をお願いします。
- shopifyアプリやシステム開発のご相談はお気軽にDMにて
mr_front_lern
Shopify Partner
7 1 2

続けてご指南いただきありがとうございます!

 

概ね、頂いた内容で実装できました!

 

より理想系にするため引き続きカスタムしますが、

考え方と記述法を知れたおかげで次に繋がりました。

 

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