現在、添付URLのページのように「カートに追加」ボタン下のチェックボックスの実装を考えております。
https://antry.co.jp/collections/sofas/products/gi0117718003
＜実装したい内容＞
①「カートに追加」下チェックボックスの実装
②チェックボックスにチェックを入れると、「カートに追加」ボタンを押下できるようになる。
調べてもなかなか実装方法が見つからず、もし知見等ございましたらご教授いただけますと幸いでございます。
宜しくお願い致します。
JavaScriptの実装が可能であることを前提にお伝えしてしまいますが、
下記の手順ではいかがでしょうか？
(また、以前、Prestigeについてのご質問があったので、Prestigeを前提にしています。と言っても、私自身はPrestigeを購入していないのでコードを細かく見られるわけではないのですが。)
- 「カートに追加」ボタンのbutton要素に"disabled"を追加する。また、"ProductForm__AddToCart"というCSS Classを外しておく。
- チェックボックスのDOMにonclickイベントを設定する。
- チェックボックスのonclickイベントで、チェックボックスがcheckedかどうかを判定し、checkedであれば、「カートに追加」ボタンの"disabled"を除去し、CSS Classに"ProductForm__AddToCart"を追加する。
- 同様に、チェックボックスのonclickイベント、チェックボックスがcheckedではない時に、「カートに追加」ボタンに、"disabled"を追加し、CSS Classから"ProductForm__AddToCart"を除去する処理も作成する。
ご参考まで。
(キュー田辺)