カート内フォーム（cart.attributes）を条件で出し分けたい

日本語 ディスカッション 技術的なQ＆A
,

Topic summary

ユーザーがShopifyの「Craft」テーマ（Basicプラン）で、カート内アンケートフォーム（cart.attributes）の条件付き表示を実装したいと質問。

現状:

  • main-cart-items.liquidにアンケートフォームを設置済み
  • 講座参加方法（アーカイブ配信/リアルタイム配信）やお子様の年齢などを収集

要望:
商品のメタフィールド「アンケート」がtrueの場合のみフォームを表示したい

解決策（Qcoltd提供）:
</form>タグの前に以下のロジックを追加:

  • カート内全商品をループ処理
  • item.product.metafields.custom.form_view（メタフィールドのネームスペースとキーは環境に応じて変更）がtrueの商品が1つでもあれば、フラグを立てる
  • フラグがtrueの場合、アンケートフォームを表示

結果:
ユーザーは希望通りの設定ができたと報告し、解決済み。

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

テーマは「Craft」を使っています。

ShopifyのプランはBasicです。

現在、セクション→「main-cart-items.liquid」にて、以下の通りcart.attributesを使ってカート内でアンケートフォームを設定しております。

▼設定内容（挿入位置が分かるように前後のコードも載せています）

   {%- if item.variant.available and item.unit_price_measurement -%}
                        <div class="unit-price caption">
                          <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                          {{ item.unit_price | money }}
                          <span aria-hidden="true">/</span>
                          <span class="visually-hidden"
                            > {{ 'accessibility.unit_price_separator' | t }} </span
                          >
                          {%- if item.unit_price_measurement.reference_value != 1 -%}
                            {{- item.unit_price_measurement.reference_value -}}
                          {%- endif -%}
                          {{ item.unit_price_measurement.reference_unit }}
                        </div>
                      {%- endif -%}
                    </div>
                  </td>
                </tr>
              {%- endfor -%}
            </tbody>
          </table>
        {%- endif -%}
      </div>
    </div>

    <p class="visually-hidden" id="cart-live-region-text" aria-live="polite" role="status"></p>
    <p class="visually-hidden" id="shopping-cart-line-item-status" aria-live="polite" aria-hidden="true" role="status">
      {{ 'accessibility.loading' | t }}
    </p>   

<!--------------【始】カートにアンケートフォーム追記----------------------------------->
                            
<div style="border: #ff69b4 dotted 4px; font-size: 100%; padding: 15px;">
   <font size="-1">
                            <h3>【アンケート】</h3>
 <small><font color="#A9A9A9">以下アンケートに回答のうえ、ご注文ください</font></small><br>
                            
<p class="cart-attribute__field">
  <label for="">■この講座をお知りになったキッカケ・媒体を教えてください*</label><br>
  <small><font color="#A9A9A9">（例：Instagram、友人からの紹介、インターネットで〇〇と検索して見つけた、等…）</font></small><br>
  <input required class="required" id="" type="text" name="attributes[■この講座をお知りになったキッカケ・媒体を教えてください*]" value="{{ cart.attributes["■この講座をお知りになったキッカケ・媒体を教えてください*"] }}">
</p>          

 <p class="cart-attribute__field">
  <label for="">■お申込みの動機*</label><br>
    <small><font color="#A9A9A9">（例：Instagramの広告で知り、絵本と脳科学というところに興味があったので申し込んだ）</font></small><br>
  <input required class="required" id="" type="text" name="attributes[■お申込みの動機*]" value="{{ cart.attributes["■お申込みの動機*"] }}">
</p>

<p class="cart-attribute__field">
  <label for="">■お子様の年齢*</label><br>
    <small><font color="#A9A9A9">（例：3歳、5歳）</font></small><br>
  <input required class="required" id="" type="text" name="attributes[■お子様の年齢*]" value="{{ cart.attributes["■お子様の年齢*"] }}">
</p>

<p class="cart-attribute__field">
  <label>■講座の参加方法*</label><br>
     <small><font color="#A9A9A9">※マンツーマンコースをお申込みの場合はリアルタイムを選択ください。追って先生と日程を調整いただきます。</font></small><br>
  <input required class="required" type="radio" style="accent-color:#FF0066;" name="attributes[■講座の参加方法*]" value="リアルタイム配信での受講を希望"{% if cart.attributes["■講座の参加方法*"] == "リアルタイム配信での受講を希望" %} checked{% endif %}> <span>リアルタイム配信での受講を希望</span><br>
  <input required class="required" type="radio" style="accent-color:#FF0066;" name="attributes[■講座の参加方法*]" value="アーカイブ配信での受講を希望"{% if cart.attributes["■講座の参加方法*"] == "アーカイブ配信での受講を希望" %} checked{% endif %}> <span>アーカイブ配信での受講を希望</span><br>
</p>                            

<p class="cart-attribute__field">
  <label for="">■お悩み、事前質問(任意)</label><br>
  <small><font color="#A9A9A9">****先生に聞いてほしいお悩みやご質問がありましたら、こちらにご入力ください。<br>
※いただきましたご質問は、できるだけ絵本講座内でお答えしますが、時間の関係で回答できない場合がございますのでご了承ください。</font></small><br>
  <textarea id="" name="attributes[■お悩み、事前質問(任意)]">{{ cart.attributes["■お悩み、事前質問(任意)"] }}</textarea>
</p>

<p class="cart-attribute__field">
  <p>■マンツーマンコース希望日(任意)</p>
  <small><font color="#A9A9A9">マンツーマンコースをお申込みの場合、ご希望の日時を第3希望（最大第5希望）まで入力ください。<br>
※10時～15時の間の2時間程度(例：1/10(水)AM11～13時)<br>
※ご予約状況を確認したうえ先生よりご連絡いたします。</font></small><br>
   <p class="cart-attribute__field">
  <label for="1">・第1希望</label>
  <input id="1" type="text" name="attributes[マンツーマン・第1希望]" value="{{ cart.attributes["・第1希望"] }}"></p>
  <p class="cart-attribute__field">
  <label for="1">・第2希望</label>
  <input id="1" type="text" name="attributes[マンツーマン・第2希望]" value="{{ cart.attributes["・第2希望"] }}"></p>
 <p class="cart-attribute__field">
  <label for="1">・第3希望</label>
  <input id="1" type="text" name="attributes[マンツーマン・第3希望]" value="{{ cart.attributes["・第3希望"] }}"></p>
  <p class="cart-attribute__field">
  <label for="1">・第4希望</label>
  <input id="1" type="text" name="attributes[マンツーマン・第4希望]" value="{{ cart.attributes["・第4希望"] }}"></p>
  <p class="cart-attribute__field">
  <label for="1">・第5希望</label>
  <input id="1" type="text" name="attributes[マンツーマン・第5希望]" value="{{ cart.attributes["・第5希望"] }}"></p>
   </p>
   </font>
</div>
    
{% endcase %}                          
<!---------【終】カートにアンケートフォーム追記-------------------------------------->

                            
  </form>
</cart-items>

{% schema %}

このアンケートフォームを条件を指定して、表示・非表示を切り分けたいのですが、うまくいきません。

（例：商品のメタフィールドの「アンケート」がtrueの時にアンケートフォームを表示）

条件は、商品名でもコレクションでもメタフィールドでもタグでも何でもいいです。

何かしらの条件を付けて出し分ければと思います！

すみませんが、どなたか教えていただけると助かります。

よろしくお願いいたします。

2

@n_ogawa3 様

商品のメタフィールドの「アンケート」がtrueの時にアンケートフォームを表示したい件ですが、
下記のようなコードをの前に追記いただけましたら、
カートに追加された商品でメタフィールドの「アンケート」がtrueの商品が含まれていた場合、
アンケートを表示することが可能かと思います。

サンプルコード

下記コード内『item.product.metafields.custom.form_view』の『custom.form_view』部分は、
メタフィールドを作成した際のネームスペースとキーに変更ください。

{% assign FormViews = false %}
{% for item in cart.items %}
  {% if item.product.metafields.custom.form_view == true %}
    {% assign FormViews = true %}
  {% endif %}
{% endfor %}
{% if FormViews == true %}
  アンケートのコードを追記
{% endif %}

ご参考まで
（キュー小坂）

1 Like
3

早速のお返事ありがとうございました。

希望通り設定することができました！

とても丁寧に教えていただきありがとうございました。

1 Like