写真4枚を添えて注文できる商品ページに。

写真4枚・形の選択・コメントを添えて注文できるよう、オーダー商品のページを改修しました。通常サイズを選ぶ購入方法もあるため、選んだ注文方法に応じて入力欄を切り替える必要がありました。

スマートフォンでは入力が長くなりがちです。項目を開閉できるようにし、写真を添付できたかどうかも画面上で分かるようにしました。

注文方法ごとの入力欄、写真アップロード、形の選択、コメント欄を実装しました。画像はブラウザ側でサイズを調整し、添付容量をチェック。アップロード後は添付したことが分かる表示に切り替えます。

追加オプションは商品の選択肢に連動させ、価格や在庫の切り替えには既存の機能を利用しました。必要な入力を飛ばして注文しないよう、購入ボタンの表示も注文方法ごとに調整しています。

テスト注文を行い、写真・選択内容・コメントが注文情報に残ることを確認しました。通常サイズでの購入と、写真を使う注文の両方で、商品ページからカートまでの操作を確認しています。

公開後には、添付済み表示の大きさ、カート内の写真の順番、スマートフォンの購入ボタンも調整しました。