Regrouper des articles en localStorage

Version imprimable

Bonsoir,

je suis débutante en javascript et je dois créer un panier avec des articles qui se regroupent par id.
Ma dernière fonction ne marche pas .. :bug:

Je vous joins ci-dessous mon code. quelqu'un peut-il m'éclairer svp ??

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function setCart(cart){
    localStorage.setItem('cart',JSON.stringify(cart))
}
 
function getCart(){
    let cart=[];
    let result= localStorage.getItem('cart');
    if(result){ cart=JSON.parse(result);
 
    }
    return cart;
}
function addProduct(product_ID,quantity,color){
let line={'product_ID':product_ID,'color':color,'quantity':quantity}
let cart=getCart();
cart.push(line);
setCart(cart);
}
function groupBy(product_ID){
  let foundline= line.find(p=>p.id==product_ID);
  if(foundline !=undefined){
    foundline.quantity++;
  }
 
  setCart(cart);
}

Bonjour,

Je pense qu'il faut prendre en considération la couleur aussi, car il pourrait bien y avoir des produits avec le même id mais avec des couleurs différentes.

Si je modifies seulement la fonction groupBy comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function groupBy(product_ID) {
  return getCart().reduce((groups, item) => {
    let final = (groups[item.product_ID] || []),
      sameIdAndColor = final.findIndex(elem =>
        elem.product_ID == item.product_ID &&
        elem.color == item.color);
    if (sameIdAndColor==-1) final.push(item);
    else final[sameIdAndColor].quantity += item.quantity;
    groups[item.product_ID] = final;
    return groups;
  }, {});
}

Ajouter des produits avec des couleurs différentes :

Code:

1
2
3
4
5
addProduct(1, 5, "blue");
addProduct(2, 5, "green");
addProduct(1, 2, "blue");
addProduct(2, 3, "black");
addProduct(1, 5, 'orange');

Appel à la fonction de regroupement :

Code:

1
2
3
//le paramètre "product_ID" de la fonction n'est plus utilisé, tu peux le supprimer à moins que si tu veux que la même fonction gère le regroupement par couleur par exemple...
let groupedById = groupBy();
console.log("original Cart :", getCart(), ", grouped By ID Cart :", groupedById);

Résultat :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
/* original Cart : */
[
    {
        "product_ID": 1,
        "color": "blue",
        "quantity": 5
    },
    {
        "product_ID": 2,
        "color": "green",
        "quantity": 5
    },
    {
        "product_ID": 1,
        "color": "blue",
        "quantity": 2
    },
    {
        "product_ID": 2,
        "color": "black",
        "quantity": 3
    },
    {
        "product_ID": 1,
        "color": "orange",
        "quantity": 5
    }
]
/* grouped By ID Cart :*/
{
    "1": [
        {
            "product_ID": 1,
            "color": "blue",
            "quantity": 7
        },
        {
            "product_ID": 1,
            "color": "orange",
            "quantity": 5
        }
    ],
    "2": [
        {
            "product_ID": 2,
            "color": "green",
            "quantity": 5
        },
        {
            "product_ID": 2,
            "color": "black",
            "quantity": 3
        }
    ]
}

20/07/2022, 17h55
alizia20

Bonjour,

Merci d'avoir pris le temps de m'aider ! cependant, quand je regarde dans le localstorage ca marche pas.

je pense que je verrrai ca avec mon prof.
20/07/2022, 18h12
Toufik83

Bonjour,

Je vous rappelle que j'ai testé le code avant de le poster, il est fonctionnel à moins que tu as fait une erreur...
20/07/2022, 18h37
alizia20

Mais je n'en doutais pas.

En fouillant un peu plus, je vois que le code fonctionne bien dans la console mais pas dans le localstorage..
je comprend pas pourquoi ca n'affiche pas la même chose
20/07/2022, 18h53
Toufik83

L'objet enregistré dans localStorage ne change pas, c'est la variable groupedById qui récupère les éléments regroupés par id.

Comme ça tu gardes la structure originale du tableau dans localStorage.
21/07/2022, 10h14
alizia20

Ok je comprend mieux.
Merci de partager votre savoir.