FROM CACHE - jp_header
解決済

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

n_ogawa3
遊覧客
17 0 5

テーマは「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"
                            >&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</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の時にアンケートフォームを表示)

 

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

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

 

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

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

 

1 件の受理された解決策

Qcoltd
Shopify Partner
1024 416 393

成功

@n_ogawa3

 

商品のメタフィールドの「アンケート」がtrueの時にアンケートフォームを表示したい件ですが、
下記のようなコードを</form>の前に追記いただけましたら、
カートに追加された商品でメタフィールドの「アンケート」が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 %}

 

ご参考まで
(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1024 416 393

成功

@n_ogawa3

 

商品のメタフィールドの「アンケート」がtrueの時にアンケートフォームを表示したい件ですが、
下記のようなコードを</form>の前に追記いただけましたら、
カートに追加された商品でメタフィールドの「アンケート」が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 %}

 

ご参考まで
(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
n_ogawa3
遊覧客
17 0 5

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

 

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

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