[Shopify]まとめ買い商品「一括カート追加」♪ディスカウント商品をメタオブジェクトでデータベース化してバンドル的なセクション（メタオブジェクト対応） #110

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

メタオブジェクトにデータ化した商品一覧を選択して表示させて、複数選択して一括でカートに追加できるセクションを作成。ディスカウントでXとYをまとめて購入すれば２０％OFFみたいなキャンペーンなどでお役立ち。

商品ページやTOP、ブログなどいろんなところに挿入できるので購入チャンスは増えるかも。

ベーステーマ：Dawn 
※他のテーマでも挿入できると思いますがレイアウト崩れるかもしれないのでその場合はご自身で調整してね

✔️今回のゴール

複数選択してカートに追加できる！

💡デフォルトの商品が選択されていない状態ではカートに追加するボタンは無効。

💡商品が選択されるとカート追加ボタンが有効になる。

🔸CMSの特徴

まとめ買いメタオブジェクトのセクションを選択

メタオブジェクトの下記の項目を指定
・タイプ
・ハンドル
・キー

・見出し
・説明文

・商品表示数（PC/SP)
・コンテンツ横幅
・コンテンツのボーダーカラー
・商品選択時のボーダーカラー
・セクション上下余白

✔️設定手順

事前準備　メタオブジェクトの設定

❶設定＞カスタムデータ＞メタオブジェクト

・名前：なんでもOK
・キー：なんでもOK
・コンテンツ：商品
・「リスト」を選択

❷コンテンツ＞メタオブジェクト＞上記で作成したエントリー元を選択

・商品選択
・ハンドル名：なんでもOK

次はセクションを追加します。

【ご注意】
※返金&サポート&コメント返信はしておりません。
※現時点の最新のDawnテーマをベースに作成してます。
※コードのみのご紹介で解説などはしておりません。
※2023.11時点のコードです。メンテナンスは今後する予定はありません。
※環境やバージョンによりレイアウト崩れることもありますので適当にCSSで調整していただければと思います。（メンバーシップでコメント頂いた場合は修正します）