FROM CACHE - jp_header

チェックボックスの実装について

is_green
観光客
12 0 4

現在、添付URLのページのように「カートに追加」ボタン下のチェックボックスの実装を考えております。

https://antry.co.jp/collections/sofas/products/gi0117718003

 

<実装したい内容>

①「カートに追加」下チェックボックスの実装

②チェックボックスにチェックを入れると、「カートに追加」ボタンを押下できるようになる。

 

調べてもなかなか実装方法が見つからず、もし知見等ございましたらご教授いただけますと幸いでございます。

宜しくお願い致します。

1件の返信1

Qcoltd
Shopify Partner
1022 415 391

JavaScriptの実装が可能であることを前提にお伝えしてしまいますが、

下記の手順ではいかがでしょうか?

(また、以前、Prestigeについてのご質問があったので、Prestigeを前提にしています。と言っても、私自身はPrestigeを購入していないのでコードを細かく見られるわけではないのですが。)

 

  1. 「カートに追加」ボタンのbutton要素に"disabled"を追加する。また、"ProductForm__AddToCart"というCSS Classを外しておく。
  2. チェックボックスのDOMにonclickイベントを設定する。
  3. チェックボックスのonclickイベントで、チェックボックスがcheckedかどうかを判定し、checkedであれば、「カートに追加」ボタンの"disabled"を除去し、CSS Classに"ProductForm__AddToCart"を追加する。
  4.  同様に、チェックボックスのonclickイベント、チェックボックスがcheckedではない時に、「カートに追加」ボタンに、"disabled"を追加し、CSS Classから"ProductForm__AddToCart"を除去する処理も作成する。

 

ご参考まで。

(キュー田辺)

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