iT邦幫忙

2022 iThome 鐵人賽

DAY 23
1
Software Development

.NET Core與React組合開發技系列 第 23

.NET Core與React組合開發技_第23天_要求 - 每個session只能存有一個購物車

  • 分享至 

  • xImage
  •  

購物車的記憶機制使我們挑選商品添加時會不停往上累積
而目前每次將商品添加到購物車時,都會創建一個全新空的購物車,有點怪怪的。

可以安全地假設我們想讓我們的客戶建立一個包含很多物品的購物車,而不僅僅是一個,所以
我們需要以某種方式知道他們是否已經有一個購物車,然後找到它並向其中
添加物品(如果它存在)或創建一個,如果這是他們的第一個項目。

大致作法思維:

  • 當用戶將商品添加到購物車時,我們將在其瀏覽器的本地存儲中查找 sessionId
  • 然後,我們會將找到的任何 sessionId 作為HTTP請求的一部分發送到我們的 API
  • 在 API 方法中,我們將查找具有該 sessionId 的現有購物車
  • 如果有 sessionId 並且我們可以找到購物車,我們將更新現有的購物車
  • 如果請求中沒有 sessionId,或者我們找不到購物車,我們將創建一個新的
  • 無論哪種方式,API 調用都將返回 sessionId(新創建的購物車或現有購物車的)並返回到 React 應用中,將相應地更新存儲在本地存儲中的 sessionId

https://ithelp.ithome.com.tw/upload/images/20221004/20107452e567M5wDq4.png

import React, { Component } from 'react';

export default class Cart extends Component {

    state = { items: [] }

    componentDidMount() {
        this.setState({ items: [{ productId: 1, name: 't-shirt', quantity: 1, price: 100 }] });
    }

    render() {
        return <table className='table table-striped table-bordered'>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>
            </thead>
            {this.state.items.map(item =>
                <tr key={item.productId}>
                    <td>{item.name}</td>
                    <td>{item.quantity}</td>
                    <td>{item.price}</td>
                </tr>
            )}
        </table>
    }

}


上一篇
.NET Core與React組合開發技_第22天_將商品添加到購物車
下一篇
.NET Core與React組合開發技_第24天_將商品添加到購物車API
系列文
.NET Core與React組合開發技30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言