[30 | メニューページ] << [ホーム] >> [32 | カートボタン]
「qrmenu_react/src/pages/Menu.js」ファイルを編集します。
記述編集 【QRMenu/qrmenu_react/src/pages/Menu.js】
import { Container, Row, Col } from 'react-bootstrap'; import { useParams } from 'react-router-dom'; import React, { useState, useEffect } from 'react'; import { fetchPlace } from '../apis'; import MenuList from '../components/MenuList'; const Menu = () => { const [ place, setPlace ] = useState({}); const [shoppingCart, setShoppingCart] = useState({}); const params = useParams(); const onFetchPlace = async () => { const json = await fetchPlace(params.id); console.log(json); if(json) { setPlace(json); } }; const onAddItemtoShoppingCart = (item) => { setShoppingCart({ ...shoppingCart, [item.id]:{ ...item, quantity: (shoppingCart[item.id]?.quantity || 0) + 1, } }); } useEffect(() => { onFetchPlace(); }, []); return ( <Container ClassName="mt-5 mb-5"> <Row className="justify-content-center"> <Col lg={8}> <MenuList place={place} shoppingCart={shoppingCart} onOrder={onAddItemtoShoppingCart} /> </Col> </Row> </Container> ) }; export default Menu;
「src/components/MenuList.js」ファイルを編集します。
記述編集 【QRMenu/qrmenu_react/src/components/MenuList.js】
import React from 'react'; import styled from 'styled-components'; import MenuItem from './MenuItem'; const Place = styled.div` text-align: center; img { border-radius: 5px; margin-bottom: 20px; margin-top: 20px; } `; const MenuList = ({ place, shoppingCart, onOrder }) => { return ( <> <Place> <img src={place.image} with={100} height={100} /> <h3><b>{place.name}</b></h3> </Place> {place?.categories ?.filter( (category) => category.menu_items.filter((i) => i.is_available).length ) .map((category) => ( <div key={category.id} className="mt-5"> <h4 className="mb-4"> <b>{category.name}</b> </h4> {category.menu_items .filter((item) => item.is_available) .map((item) => ( <MenuItem key={item.id} item={{ ...item, quantity: shoppingCart[item.id]?.quantity, }} onOrder={onOrder} /> )) } </div> )) } </> ) }; export default MenuList;
「src/components/MenuItem.js」ファイルを編集します。
記述編集 【Desktop/QRMenu/qrmenu_react/src/components/MenuItem.js】
import {Col, Button } from 'react-bootstrap'; import React from 'react'; import styled from 'styled-components'; import { BiEdit } from 'react-icons/bi'; import { AiOutlineDelete } from 'react-icons/ai'; const Container = styled.div` border-radius: 5px; background-color: white; margin-bottom: 30px; box-shadow: 1px 1px 8px rgba(0,0,0,0,1); display: flex; opacity: ${({active}) => (active ? 1 : 0.6)}; > div: first-child { width: 40%; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background-size: cover; } > div:last-child { padding: 15px 20px; min-height: 150px; } `; const MenuItem = ({ item, onEdit, onRemove, onOrder }) => ( <Container active={item.is_available}> <Col xs={5} style={{ backgroundImage: `url(${item.image})` }} /> <Col xs={7} className="d-flex flex-column justify-content-between w-100"> <div> <div className="d-flex justify-content-between align-items-center mb-2"> <h4 className="mb-2"> <b>{item.name}</b> </h4> <span> { onEdit ? ( <Button variant="link" onClick={onEdit}> <BiEdit size={20} /> </Button> ) : null } { onRemove ? ( <Button variant="link" onClick={onRemove}> <AiOutlineDelete size={20} color="red" /> </Button> ) : null } </span> </div> <p className="mb-4">{item.description}</p> </div> <div className="d-flex justify-content-between align-items-end"> <div> <h5 className="mb-0 text-standard"> <b>{item.price}円</b> </h5> {onOrder ? ( <Button variant="standard" className="mt-2" size="sm" onClick={() => onOrder(item)}> {!item.quantity ? "注文" : `追加注文(現在 ${item.quantity}個選択)`} </Button> ) : null} </div> {!item.is_available ? (<big className="text-danger">品切れ</big>) : null} </div> </Col> </Container> ); export default MenuItem;
注文ボタンが追加されました。
↓↓クリックして頂けると励みになります。
[30 | メニューページ] << [ホーム] >> [32 | カートボタン]