npm i method-override

• 安裝套件

// app.js

const methodOverride = require('method-override')
app.use(methodOverride('_method'))

路由建立

// routes/index.js

router.post('/cartItem/:id/add', cartController.addCartItem)
router.post('/cartItem/:id/sub', cartController.subCartItem)
router.delete('/cartItem/:id', cartController.deleteCartItem)

新增 controller

// controllers/cartController.js

// 增加商品數量
  addCartItem: async (req, res) => {
    try {
      const cartItem = await CartItem.findByPk(req.params.id)
      cartItem.update({
        quantity: cartItem.quantity + 1
      })
      return res.redirect('back')
    } catch (e) {
      console.log(e)
    }
  },
  // 減少商品數量
  subCartItem: async (req, res) => {
    try {
      const cartItem = await CartItem.findByPk(req.params.id)
      cartItem.update({
        quantity: cartItem.quantity - 1 >= 1 ? cartItem.quantity - 1 : 1
      })
      return res.redirect('back')
    } catch (e) {
      console.log(e)
    }
  },
  // 刪除商品
  deleteCartItem: async (req, res) => {
    try {
      const cartItem = await CartItem.findByPk(req.params.id)
      cartItem.destroy()
      return res.redirect('back')
    } catch (e) {
      console.log(e)
    }
  }

// controllers/productController.js

// 取所有產品
  getProducts: async (req, res) => {
    try {
      const products = await Product.findAndCountAll({ offset: 0, limit: 3 })
      let cart = await Cart.findByPk(req.session.cartId, {
        include: 'items'
      })
      cart = cart || { items: [] }
      const totalPrice = cart.items.length > 0 ? cart.items.map(d => d.price * d.CartItem.quantity).reduce((a, b) => a + b) : 0
      return res.render('products', { products, cart, totalPrice })
    } catch (e) {
      console.log(e)
    }
  }

// views/products.hbs

<nav class="col-md-3 d-none d-md-block bg-light sidebar">
        <div class="sidebar-sticky">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    {{#each cart.items}}
                        <div class="row no-gutters">
                            <div class="col-md-4" style="display: flex;align-items: center;">
                                <img src="{{this.dataValues.image}}" class="card-img" alt="...">
                            </div>
                            <div class="col-md-8">
                                <div class="card-body">
                                    <h5 class="card-title">{{this.dataValues.name}}</h5>
                                    <p>${{this.dataValues.price}}</p>
                                    <div class="btn-group">
                                        <form action="/cartItem/{{this.CartItem.dataValues.id}}/add" method="POST">
                                            <button type="submit" class="btn btn-sm btn-outline-secondary">+</button>
                                        </form>
                                        <span style="margin: 0 20px;">{{this.CartItem.dataValues.quantity}}</span>
                                        <form action="/cartItem/{{this.CartItem.dataValues.id}}/sub" method="POST">
                                            <button type="submit" class="btn btn-sm btn-outline-secondary">-</button>
                                        </form>

                                        <form action="/cartItem/{{this.CartItem.dataValues.id}}?_method=DELETE" method="POST">
                                            <button type="submit" class="btn btn-link">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>

                                    </div>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </li>
            </ul>
            <hr>
            <li class="list-group-item">
                Total: ${{totalPrice}}
                <a href="/cart"><button class="btn btn-primary">Go to Cart</button></a>
            </li>

        </div>
    </nav>