मैं एक ईकॉमर्स साइट बना रहा हूं। अभी, मैं एक एपीआई से आइटम खींच रहा हूं और उन्हें ("शॉप" घटक) प्रदर्शित कर रहा हूं। मैं क्लिक किए गए आइटम पर अधिक विवरण/सूचना के साथ किसी आइटम पृष्ठ ("आइटम" घटक) पर जाने के लिए किसी आइटम पर क्लिक कर सकता हूं। जब मैं "शॉपिंग कार्ट में जोड़ें" बटन ("आइटम" घटक में) पर क्लिक करता हूं, तो क्लिक किया गया आइटम शॉपिंग कार्ट स्क्रीन ("कार्ट" घटक) में प्रदर्शित होता है।

आइटम को एक पृष्ठ से दूसरे पृष्ठ पर ले जाने के लिए, मैं रिएक्ट राउटर ("ऐप" घटक देखें) का उपयोग कर रहा हूं, और विशिष्ट पैरामीटर प्रदर्शित करने के लिए <Link /> का उपयोग कर रहा हूं। मैं आइटम आईडी (और मात्रा) पास करने के लिए पैरामीटर का उपयोग करता हूं ताकि मैं उस विशिष्ट आइटम के लिए एपीआई को कॉल कर सकूं।

यह एक आइटम के लिए काम करता है, लेकिन शॉपिंग कार्ट में एक से अधिक आइटम प्रदर्शित करने की अनुमति देने के लिए मैं अपना कोड कैसे समायोजित करूं?

किसी भी प्रतिक्रिया की बहुत सराहना करते हैं।

ऐप घटक:

import React, { useState } from 'react';
import './App.css';
import Nav from './Nav';
import Shop from './Components/Shop';
import Info from './Components/Info';
import Cart from './Components/Cart';
import Item from './Components/Item';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';

function App() {
    return (
      <Router>
        <div className="App">
          <Nav />

          <Route path="/" exact component={Shop} />
          <Route path="/Info" component={Info} />
          <Route path="/Cart/:id/:qty" component={Cart} />
          <Route path="/Item/:item" component={Item} />

        </div>
      </Router>
    )
}

export default App;

दुकान घटक:

import React, { useState, useEffect } from 'react';
import './../App.css';
import * as ReactBootStrap from 'react-bootstrap';
import {Link} from 'react-router-dom';

function Shop() {

const [products, setProducts] = useState([]);
const [filterProducts, setFilteredProducts] = useState([]);
const [item, setItem] = useState('');
const [currentSort, setCurrentSort] = useState('');
const [loading, setLoading] = useState(false);

useEffect(async () => {
  fetchItems();
}, [])

const fetchItems = async () => {
  const data = await fetch('https://fakestoreapi.com/products');
  const items = await data.json();
  setProducts(items)
  setLoading(true)
}
function priceUSD(change){
  return change.toFixed(2)
}

useEffect(() => {
  const filteredItems = products.filter((a) => {
    if (item === '') {return a} else {return a.category === item}
  });
  setFilteredProducts(filteredItems);
}, [item, products])

 useEffect(() => {
  if (currentSort === '') {
    return
  }
  const sortedItems = filterProducts.sort((a, b) => {
    return currentSort === 'ASE' ? a.price - b.price : b.price - a.price
  });
  setFilteredProducts([...sortedItems]);
}, [currentSort])

    return (
        <div>
          <div className="itemSort">
            <p onClick={() => setItem("")}>All items</p>
            <p onClick={() => setItem("men clothing")}>Men clothing</p>
            <p onClick={() => setItem("women clothing")}>Women clothing</p>
            <p onClick={() => setItem("jewelery")}>Jewelery</p>
            <p onClick={() => setItem("electronics")}>Electronics</p>
          </div>

          <div className="itemSort">
            <p>Order by price</p>
            <p onClick={() => setCurrentSort('DESC')}>Highest</p>
            <p onClick={() => setCurrentSort('ASE')}>Lowest</p>
          </div>

            <div className="gridContainer">
              {loading ?
                          (filterProducts.map((a, index) => (
                            <Link to={`/Item/${a.id}`}>
                              <div key={index} className="productStyle">
                                <img src={a.image} className="productImage"></img>
                                <p>{a.title}</p>
                                <p>${priceUSD(a.price)}</p>
                              </div>
                            </Link>
                        )))  : (<ReactBootStrap.Spinner className="spinner" animation="border" />)
                        }
            </div>
        </div>
    )
}

export default Shop;

आइटम घटक:

import React, { useState, useEffect } from 'react';
import {Link} from 'react-router-dom';
import './../App.css';
import * as ReactBootStrap from 'react-bootstrap';

function Item(props) {
  const [product, setProduct] = useState([]);
  const [loading, setLoading] = useState(false);
  const [quantity, setQuantity] = useState(1);
  const [cost, setCost] = useState([]);

  useEffect(async () => {
    fetchItems();
  }, [])

  const itemId = props.match.params.item;
  const fetchItems = async () => {
    const data = await fetch('https://fakestoreapi.com/products/' + itemId);
    const items = await data.json();
    setProduct(items)
    setLoading(true)
    setCost(items.price)
  }

  function priceUSD(change){
    return change.toFixed(2)
  }

  useEffect(() => {
    const newCost = quantity * product.price;
    setCost(priceUSD(newCost))
  }, [quantity])

    return (
      <div className="App">
        <h2>Item</h2>
        <div className="gridContainer">
          {loading ?
                      (<div key={itemId} className="productStyle">
                            <img src={product.image} className="productImage"></img>
                            <p>{product.title}</p>
                            <p>{product.description}}</p>
                            <p>${priceUSD(product.price)}</p>

                            <div className="quantity">
                              <button className="btn minus-btn" type="button"
                                onClick={quantity > 1 ? () => setQuantity(quantity - 1) : null}>-</button>
                              <input type="text" id="quantity" placeholder={quantity}/>
                              <button className="btn plus-btn" type="button"
                                onClick={() => setQuantity(quantity + 1)}>+</button>
                            </div>

                            <Link to={`/Cart/${itemId}/${quantity}`}>
                              <button type="button">
                                Add to shopping cart ${cost}
                              </button>
                            </Link>

                          </div>
                      ): (<ReactBootStrap.Spinner className="spinner" animation="border" />)
                    }
        </div>
      </div>
    );
}

export default Item;

कार्ट घटक:

import React, { useState, useEffect } from 'react';
import './../App.css';
import * as ReactBootStrap from 'react-bootstrap';

function Cart(props) {

    const [cart, setCart] = useState([]);
    const [quantity, setQuantity] = useState([]);
    const [loading, setLoading] = useState(false);

  useEffect(async () => {
  fetchItems();
}, [])

const itemId = props.match.params.id;
const itemQuantity = props.match.params.qty;
const fetchItems = async () => {
  const data = await fetch('https://fakestoreapi.com/products/' + itemId);
  const items = await data.json();
  setCart(items)
  setQuantity(itemQuantity)
  setLoading(true)
}

function price(qty){
  const newPrice = qty * cart.price;
  return newPrice
}

    return (
      <div>
        {loading ? (
          <div className="productStyle">
            <img src={cart.image} className="productImage"></img>
            <p>{cart.title}</p>

            <div className="quantity">
              <button className="btn minus-btn" type="button"
                onClick={quantity > 1 ? () => setQuantity(quantity - 1) : null}>-</button>
              <input type="text" id="quantity" placeholder={quantity}/>
              <button className="btn plus-btn" type="button"
                onClick={() => setQuantity(quantity + 1)}>+</button>
            </div>

            <p>${price(quantity)}</p>



          </div>
        ) : (<ReactBootStrap.Spinner className="spinner" animation="border" />)}
      </div>
    );
}

export default Cart;
0
Alex 25 जिंदा 2021, 07:30
आप अपने शॉपिंग कार्ट को कहां बनाए रख रहे हैं? जैसे यदि कोई ग्राहक ब्राउज़र टैब को रीफ़्रेश करता है, तो आप कार्ट को कहाँ से पुनः लोड कर रहे हैं?
 – 
Cully
25 जिंदा 2021, 07:34

1 उत्तर

सबसे बढ़िया उत्तर

यह बेहतर है कि आप कार्ट आइटम को localStorage

ऐसा करने पर, जब उपयोगकर्ता टैब को रीफ्रेश करता है, तब भी ऐप स्थानीय स्टोरेज से डेटा लोड कर सकता है।

उदाहरण :-

  • ब्राउज़र में स्थायी डेटा।
localStorage.setItem('my-app-cart-items', cartItems);
  • ब्राउज़र से डेटा पुनर्प्राप्त करना।
const cartItems = localStorage.setItem('my-app-cart-items');
  • ब्राउज़र से डेटा हटाना
localStorage.removeItem('my-app-cart-items');
1
Prateek Thapa 26 जिंदा 2021, 07:46
बहुत धन्यवाद, क्या यह मुझे कार्ट में एकाधिक आइटम जोड़ने और संग्रहीत करने की अनुमति देगा, ताकि मैं कार्ट में एकाधिक क्लिक किए गए आइटम प्रदर्शित कर सकूं? क्या मैं स्थानीय संग्रहण से आइटम निकाल सकता/सकती हूं? फिर से धन्यवाद।
 – 
Alex
25 जिंदा 2021, 20:00
हाँ यकीन है आप कर सकते हैं। मैंने कोड अपडेट किया है। उपरोक्त उत्तर में localStorage पर भी दस्तावेज़ीकरण की जाँच करें।
 – 
Prateek Thapa
26 जिंदा 2021, 07:46