FROM CACHE - jp_header

特集コレクションに数量セレクタを設置したい【Dawn】

解決済
しょっぱいマン
観光客
12 0 1

初心者です。テーマはDawnです。購入までのステップを少なくするために、トップページに特集コレクションというセクションを追加し、あらかじめ作った全商品を商品一覧で表示するようにしました。「クイック追加」ボタンを有効にするという項目にチェックを入れて購入ボタンは表示できるのですが数量セレクタがありません。

数量セレクタを追加する方法はないでしょうか?

1 件の受理された解決策

ベストソリューション
株式会社フルバランス
Shopify Partner
792 240 439

成功

しょっぱいマンさま

 

はじめまして、フルバランスの渡邉です。

ご質問を確認いたしました。

 

クイック追加で数量も編集できると便利ですよね。


一例ですが、下記のコードをクイック追加のform内(card-product.liquidの149行目あたりから)に追加するとセレクタが表示されるかと存じます。

 

<quantity-input class="quantity">
   <button class="quantity__button no-js-hidden" name="minus" type="button">
     <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
      {% render 'icon-minus' %}
    </button>
    <input class="quantity__input"
            type="number"
            name="quantity"
            id="Quantity-{{ section.id }}"
            min="1"
            value="1"
            form="{{ product_form_id }}">
    <button class="quantity__button no-js-hidden" name="plus" type="button">
    <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
   {% render 'icon-plus' %}
  </button>
</quantity-input>

 



例えば以下に追加すると、
スクリーンショット 2022-09-21 10.00.59.png

 

下記のように表示されます。

スクリーンショット 2022-09-21 9.53.47.png

ご参考になりましたでしょうか。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 渡邉

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ECの技術・実務・成長、お悩みのことがあれば、気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

元の投稿で解決策を見る

2件の返信2
株式会社フルバランス
Shopify Partner
792 240 439

成功

しょっぱいマンさま

 

はじめまして、フルバランスの渡邉です。

ご質問を確認いたしました。

 

クイック追加で数量も編集できると便利ですよね。


一例ですが、下記のコードをクイック追加のform内(card-product.liquidの149行目あたりから)に追加するとセレクタが表示されるかと存じます。

 

<quantity-input class="quantity">
   <button class="quantity__button no-js-hidden" name="minus" type="button">
     <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
      {% render 'icon-minus' %}
    </button>
    <input class="quantity__input"
            type="number"
            name="quantity"
            id="Quantity-{{ section.id }}"
            min="1"
            value="1"
            form="{{ product_form_id }}">
    <button class="quantity__button no-js-hidden" name="plus" type="button">
    <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
   {% render 'icon-plus' %}
  </button>
</quantity-input>

 



例えば以下に追加すると、
スクリーンショット 2022-09-21 10.00.59.png

 

下記のように表示されます。

スクリーンショット 2022-09-21 9.53.47.png

ご参考になりましたでしょうか。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 渡邉

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ECの技術・実務・成長、お悩みのことがあれば、気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
しょっぱいマン
観光客
12 0 1

フルバランス 渡邉さま

 

いつもお世話になっております。

 

素晴らしい!やりたかったことが実現できました!

いつもわかりやすい説明ありがとうございます。

 

ベストアンサーとさせていただきました。