如何增加/减少购物车中产品的数量？

Question

I have some difficulty implementing the logic to add or remove a product from my cart.

First of all at the level of my database:

• Each basket consists of: a basket ID, a product ID, a customer ID and a quantity.

This means that the user has in fact "several baskets" (One product = One basket)

BACK-END

Here is how I created my models / relation with sequelize:

 // Inside db.config.js db.paniers = sequelize.define('panier', { id: { type: Sequelize.INTEGER, primaryKey: true, autoIncrement: true, field: 'PAN_ID' }, userId: { type: Sequelize.INTEGER, references: { model: db.users, key: 'USE_ID' }, primaryKey: true, allowNull: false, field: 'USE_ID' }, produitId: { type: Sequelize.INTEGER, references: { model: db.produits, key: 'PRO_ID' }, primaryKey: true, allowNull: false, field: 'PRO_ID' }, quantite: { type: Sequelize.INTEGER, allowNull: false, field: 'PAN_QUANTITE' } }, { tableName: 'PANIER' });

Then for queries, two queries are made:

• One to display information about the cart (cart ID, product ID, product name, product price, product image, cart quantity)

• Another one to update the quantity.

Here is how I made my axios queries and the result under POSTMAN

 const APIURL = 'http://localhost:8090/api'; // Get the details of the cart export const getDetails = (userId) => axios.get(`${APIURL}/panier/details/${userId}`, { userId: userId, }); // Update the quantity of the cart export const updateQuantite = (produitId) => axios.put(`${APIURL}/panier/${produitId}`, { produitId: produitId, });

 // Result for the userId 1 (getDetails) { "PRO_ID": 1, "PRO_NOM": "Un immeuble", "PRO_PRIX": "1515", "PRO_URL": "58afa4f2-41b1-42f7-a371-6d267784c44e.jpg", "PAN_QUANTITE": 1, "PAN_ID": 1 }, { "PRO_ID": 2, "PRO_NOM": "Model", "PRO_PRIX": "102", "PRO_URL": "a76fbe76-a183-49fa-84ee-40d5da08b91f.png", "PAN_QUANTITE": 1, "PAN_ID": 2 }

And here are my two controllers managing his routes:

 // Display the informations of the basket exports.getDetails = (req, res) => { const queryResult = db.sequelize.query( 'SELECT P.PRO_ID, PRO_NOM, PRO_PRIX, PRO_URL, PA.PAN_QUANTITE, PA.PAN_ID\n' + 'FROM panier AS PA INNER JOIN produit AS P ON PA.PRO_ID = P.PRO_ID\n' + 'WHERE USE_ID =:id', { replacements: { id: req.params.userId }, type: QueryTypes.SELECT } ).then(panier => { res.json(panier); }).catch(err => res.status(400).send(err)); } // Modify the quantity of a basket exports.update = (req, res) => { Paniers.update({ quantite: req.body.quantite }, { where: { produitId: req.params.produitId } }).then(panier => { res.json(panier); }).catch(err => res.status(400).send(err)); }

FRONT-END

This is how my information is displayed (Still under development, that's why it really doesn't look like anything ^^' )

This is where I get lost... Here is my shopping cart pagePage.js:

 import React, { useState, useEffect } from 'react'; import { Card, CardHeader, CardMedia, Grid, ButtonGroup, Button} from '@material-ui/core'; import PayPal from '../services/PayPal/paypal' import {getDetails, updateQuantite, getAllPanier, get} from '../services/API/panier' export default function PanierPage() { // Récupération des détails des paniers const [paniers, setPaniers] = useState([]) const getPaniersDetails = () => [ getDetails(JSON.parse(localStorage.getItem('User')).id).then(response => { setPaniers(response.data) console.log(response) }).catch(err => console.log(err)) ] const handleIncrement = (id) => { updateQuantite(id).then(response => { //??? }).catch(err => console.log(err)) } const handleDecrement = () => { } // Affichage des détails des paniers const paniersAffichage = paniers.map((panier) => ( <Grid container> <Card key={panier.PAN_ID}> <CardHeader title={panier.PRO_NOM}/> <CardMedia image={`http://localhost:8090/${panier.PRO_URL}`}/> <Button onClick={() => handleIncrement(panier.PRO_ID)}> + </Button> {panier.PAN_QUANTITE} <Button onClick={handleDecrement}> - </Button> </Card> </Grid> )); // Chargement des produits useEffect(() => { getPaniersDetails(); }, []) return ( <> <Grid> {paniersAffichage} </Grid> <PayPal/> </> ); }

For explanations:

• I get my basket information in 'getPaniersDetails' where I indicate the user id then I load it in my useEffect.

• basketsDisplay allows me to display the baskets of the user concerned.

• I give in each card the ID of the cart for the mapping, then I display the information... When clicking on "+" I want to increase my quantity, so I give it the product ID.

• handleIncrement will therefore handle this action, using 'updateQuantite'.

• This is where I block, I have the impression of mixing myself between my different IDs. Particularly between the cart ID of the table and the cart ID of my query (SELECT)

I'm sure it's something very simple to set up but in my head it seems complicated to me...

If I missed any important points tell me, I will do my best to change my post

Answer 1

Your object model doesn't make much sense.

I would change it to make it more dynamic.

If you instead have users, and they have a basket property, this approach makes more sense.

NOTE: The code below is a rough outline, but should give you an idea of how to do it.

interface Database {
    users: User[]; // Array of users.
}

interface User {
    id: number;
    username: string;
    passwordHash: string;
    baskets: Basket[];
}

interface Basket {
    id: number;
    items: Item[]; // array of items;
    date: string;
}

interface Item {
    id: number; // ID of the item.
    name: string;
    imgURL: string;
    description: string[];
    quantity: number;
}

Now if we want to receive and send data to the database, we would do so like this.

interface Basket {
    items: string[]; // list of item id's.
}

// You want to use a session token instead of the user id so noone but the user can access their basket. 
// Normaly baskets will be local to the browser or app and not sored on a servers database. 
// Only past orders should be stored. But in this example, we are storing the current basket too.
async function getBasket(sessionToken: string){
    return await axios.get(`${api.host}/basket`, { 
        headers: {
            Session-Token: sessionToken, // used to identify the user
            Content-Type: "application/json",
        }
    }).data;
}

// we send the basket object, which is just a list of IDs, and the session token.
async function setBasket(basket: Basket, sessionToken: string){
    return await axios.put(`${api.host}/basket`, { 
        headers: {
            Session-Token: sessionToken, // used to identify the user
            Content-Type: "application/json",
        }
    }).data;
}

Now on the server side, with express we can handle the requests.

To implement sessions with express, there is the npm module express-session which is a middleware for express. When the user logs in, they will be given a header that they will save as a cookie to use on their future requests. When they logout, the session is removed from your server and the cookie is deleted on the client.

For added security, you can set an expiration on the session. The user will have to re-login and get a new session.

// check the documentation to tune it to what you need.
app.use(session({
  secret: 'mySuperSecret',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true }
}))

app.get("/basket", async(req, res) => {
    // here we first check if the session exists.
    if(req.session.views){
        // if it does, then we return the list of baskets.
        const { baskets } = await getUser(req.session.userID);
        res.sendStatus(200).send([success: true, data: baskets]);
    }
    // if not, then we will return a 403 error.
    // we also send a response that matches the layout of the normal response.
    res.sendStatus(403).send([success: false, data: []]);
    
})

app.put("/basket", (req, res) => {
    // here we first check if the session exists.
    if(req.session.views){
        // if it does, then we add the basket to the user.
        addBasket(req.session.userID, basket)
            .then(res.sendStatus(204).send([success: true, data: []]))
    }
    // if not, then we will return a 403 error.
    // we also send a response that matches the layout of the normal response.
    res.sendStatus(403).send([success: false, data: []]);
})

If you have any question, just ask in the comment section. I will respond when I am free.