このドキュメントは公開準備中です(Beta)。
6. モバイルオーダー
商品詳細

商品詳細

商品詳細のボトムシート(お刺身盛り)

商品カードをタップすると、画面下からボトムシート形式の商品詳細が開きます。

表示内容

実機で確認できた表示項目は以下の通りです。

  • 商品画像(未登録の場合はプレースホルダーアイコンを表示。今回の検証商品には画像が登録されていなかったため実際の写真表示は未確認)
  • 商品名
  • 価格
  • 数量選択(-/1/+ のステッパー)
  • 「カートに追加 ¥○○○」ボタン(数量に応じて合計金額がリアルタイムで表示される)

詳細説明文・カロリー表示・アレルギー情報・調理時間目安・複数枚の画像スライドは、検証店舗の商品データには登録されていなかったため確認できませんでした。これらの項目欄が UI 上に存在するかどうかも含め未検証です。

オプション選択

商品にオプショングループ(サイズ・トッピング等)が紐付けられている場合、価格の下にオプション選択欄が表示されます。詳細は オプション選択 を参照してください。

数量とカート追加

  • ステッパー(-/+)で数量を変更すると、「カートに追加」ボタンの金額もその場で再計算される
  • 「カートに追加」を押すとボトムシートが閉じ、カート に商品が追加される(カート画面へは自動遷移せず、下部に表示されるフローティングの「カートを見る」ボタンから移動する)

閉じる

ボトムシート右上の「×」ボタン、または Esc キー相当の操作(背景タップ)で閉じられます。