こんにちは、竹内です。
引き続き「Magento2 新・標準デザインテーマの解説」、各ページ・要素のデザインや機能についてもう少し詳しくご紹介していきます。
今回は「商品詳細」ページのデザインについてです。
Magento2 商品詳細画面
上の画像は左から順に、PC、タブレット、スマホサイズの商品詳細ページです。
オプションリスト
色やサイズといった複数のバリエーションを持つ商品は、オプションリストから購入したいものを選択することができます。
オプションリスト
Magento1.9では、このオプションリストはプルダウンやラジオボタンといったフォーム要素で選択肢が表示されていましたが、Magento2では、オプションリストはCSSで装飾されたボタンのようなデザインになりました。
色の選択は実際の色を表示することでイメージしやすくなり、より選択しやすくなりました。
また、選択した色が、メイン商品画像もそれに応じたものに変更されるため、検討が容易になりました。
「カートに入れる」ボタン
カートに商品を入れた場合の挙動
カートボタンをクリックしたとき、Magento1.9では毎回ショッピングカートページに遷移しましたが、Magento2ではページ遷移せず、そのままショッピングを継続できるようになっています。
商品をカートにいれると、ヘッダーのミニカートの数量表示が変化します。
商品情報タブ
商品情報タブ：（上）PC、タブレット幅（下）スマホ幅
商品詳細、追加情報のタブ表示はMagento1.9から変わっていません。
PCではタブ表示、タブレット・スマホではアコーディオンナビになっているため、コンパクトなページレイアウトになっています。
レビュー
レビュー一覧とレビュー投稿
Magento1.9では、投稿された商品のレビューは商品詳細ページで閲覧できましたが、レビュー投稿は別ページに遷移する必要がありました。
Magento2ではレビュー投稿フォームもページ内のタブに格納され、ページ遷移することなくレビューを投稿できるようになりました。
関連商品
関連商品
関連商品はMagento1.9ではカートボタンの下に表示されていましたが、Magento2では商品情報タブの下に移動しています。