Rendu ne fonctionne pas dans cart.html

**cdevl37** · 21/03/2024, 23h33

Bonsoir,

Je ne parviens pas à obtenir un rendu dans cart.html.

Le lien : https://jsfiddle.net/qvL46end/

Avez vous une idée du problème ?

main.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
// Products Array
const products = [
  {
    id: 1,
    title: "Autumn Hoodie",
    price: 264.9,
    image:
      "https://pangaia.com/cdn/shop/products/Recycled-Nylon-NW-Flwrdwn-Quilted-Collarless-Jacket-Cerulean-Blue-Female-1_bf4b2a54-8a7f-4174-bc49-8ef22b24bfdd.jpg?v=1666708230&width=1426",
  },
  {
    id: 2,
    title: "FUSION HOODIE",
    price: 295,
    image:
      "https://images.undiz.com/on/demandware.static/-/Sites-ZLIN-master/default/dw2264d914/merch/BTS/654206666_x.jpg?sw=1250",
  },
  {
    id: 3,
    title: "Chestnut Brown",
    price: 74.9,
    image:
      "https://pangaia.com/cdn/shop/products/Recycled-Cashmere-Core-Hoodie-Chestnut-Brown-Male-1.jpg?v=1663947464&width=1426",
  },
  {
    id: 4,
    title: "Nike Sportswear",
    price: 80,
    image:
      "https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/61734ec7-dad8-40f3-9b95-c7500939150a/sportswear-club-mens-french-terry-crew-neck-sweatshirt-tdFDRc.png",
  },
  {
    id: 5,
    title: "Champion BASIC",
    price: 48.99,
    image:
      "https://img01.ztat.net/article/spp-media-p1/7067458719b744fe81ffee62d3d0b912/abad421e7d8e47f08a2abc1c6ffe07dc.jpg?imwidth=1800",
  },
  {
    id: 6,
    title: "Cotton Hoodie",
    price: 395,
    image:
      "https://pangaia.com/cdn/shop/files/Reclaim-3.0-Hoodie-Reclaim-Jade-Womens-3.jpg?v=1693398673&width=1426",
  },
  {
    id: 7,
    title: "CLASSIC CREWNECK",
    price: 48.99,
    image:
      "https://img01.ztat.net/article/spp-media-p1/10cea44041564f81ac585fc6c8978907/c4c32dbc45dd4dbc9d15087c846538f2.jpg?imwidth=1800",
  },
  {
    id: 8,
    title: "TAPE HOODED",
    price: 79.99,
    image:
      "https://img01.ztat.net/article/spp-media-p1/d391f90be278469ebfdff731800cfccc/6d2101bd672f4e059501f01fe726f315.jpg?imwidth=1800",
  },
];
 
 
// Get the products list and elements
const productList = document.getElementById('productList');
const cartItemsElement = document.getElementById('cartItems');
const cartTotalElement = document.getElementById('cartTotal');
 
// Store Cart Items In Local Storage
let cart = JSON.parse(localStorage.getItem('cart')) || [];
 
function renderProducts() {
  productList.innerHTML = products
    .map(
      (product) => `
      <div class="product">
                <img src="${product.image}" alt="${product.title}" class="product-img" />
                <div class="product-info">
                    <h2 class="product-title">${product.title}</h2>
                    <p class="product-price">$${product.price.toFixed(2)}</p>
                    <a class="add-to-cart" data-id="${product.id}">Add to cart</a>
                </div>
            </div>
    `
    )
    .join("");
}
 
// Render Proucts On Cart Page
function renderCartItems() {
  cartItemsElement.innerHTML = cart
    .map(
      (item) => `
      <div class="cart-item">
      <img src="${item.image}" alt="${item.title}" />
      <div class="cart-item-info">
          <h2 class="cart-item-title">${item.title}</h2>
          <input 
          class="cart-item-quantity" 
          type="number" 
          name="" 
          min="1" 
          value="${item.quantity}" 
          data-id="${item.id}"
          />
      </div>
      <h2 class="cart-item-price">${item.price}</h2>
      <button class="remove-from-cart" data-id="${item.id}">Remove</button>
      </div>
      `
    )
    .join("");
}
 
// Check if on cart page
if (window.location.pathname.includes('cart.html')) {
  renderCartItems();
} else {
  renderProducts();
}
 
renderProducts();
renderCartItems();

cart.html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<body>
    <header>
        <div class="nav container">
            <i class="bx bx-menu" id="menu-icon"></i>
            <a href="index.html" class="logo">Quick Sale</a>
            <div class="navbar">
                <a href="#" class="nav-link">Woman</a>
                <a href="#" class="nav-link">Man</a>
                <a href="#" class="nav-link">Kids</a>
                <a href="#" class="nav-link">Accessories</a>
            </div>
            <a href="cart.html">
                <i class='bx bx-shopping-bag' id="cart-icon" data-quantity="0"></i>
            </a>
        </div>
    </header>
    <!-- Cart -->
    <section class="cart-container container">
        <a href="index.html" class="back-homepage">
            <i class='bx bx-chevron-left'></i>
            <span>Back To Home</span>
        </a>
        <h2 class="cart-s-title">Shopping Cart</h2>
        <div class="cart-box">
            <div class="cart-data">
                <div id="cartItems"></div>
            </div>
            <div class="cart-t">
                <div id="cartTotal"></div>
                <a href="#" class="checkout-btn">Checkout</a>
            </div>
        </div>
    </section>
    <!-- Link To JS -->
    <script src="js/main.js"></script>
</body>
 
</html>

**ASCIIDEFOND** · 22/03/2024, 09h44

Salut cdevl37,

Dans la console une erreur apparait

Uncaught TypeError: productList is null

**cdevl37** · 22/03/2024, 12h18

Oui en effet et je dois faire quoi ? ( car c'est un tuto que je suis en ligne ).

Merci à vous

**Doksuri** · 22/03/2024, 13h20

Rajouter l'élement productList dans le html ?

tu fais un const productList = document.getElementById('productList'); dans ton JS, mais dans le HTML que tu as fournis, il n'existe rien avec l'id productList

**cdevl37** · 22/03/2024, 13h24

Merci à vous de votre aide, je rajoute l'id ici ? productList.innerHTML = products.

Je suis novice et je suis un tuto en ligne et nous sommes plusieurs être bloqué sur ce problème.

**Doksuri** · 22/03/2024, 14h56

document.getElementById('productList') va aller chercher dans le HTML, un element qui a pour id "productList"
par exemple : <div id="productList">quelque chose</div>
si l'element HTML n'existe pas, JS ne peut pas le trouver

**cdevl37** · 22/03/2024, 15h22

Merci à vous pour les infos je comprend le soucis mes de la à le mettre en pratique c'est une autre affaire.

En concret dans ma fonction je dois indiquer ou le <div id="productList"> ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Get the products list and elements
const productList = document.getElementById('productList');
const cartItemsElement = document.getElementById('cartItems');
const cartTotalElement = document.getElementById('cartTotal');
 
// Store Cart Items In Local Storage
let cart = JSON.parse(localStorage.getItem('cart')) || [];
 
function renderProducts() {
  productList.innerHTML = products
    .map(
      (product) => `
      <div class="product">
                <img src="${product.image}" alt="${product.title}" class="product-img" />
                <div class="product-info">
                    <h2 class="product-title">${product.title}</h2>
                    <p class="product-price">$${product.price.toFixed(2)}</p>
                    <a class="add-to-cart" data-id="${product.id}">Add to cart</a>
                </div>
            </div>
    `
    )
    .join("");
}

**SpaceFrog** · 29/03/2024, 09h33

Dans le code HTML de la page, dans le body ...
Si l'élément n'existe pas sur la page

Rendu ne fonctionne pas dans cart.html

JavaScript

Discussions similaires

Partager

Partager