Kevin Powell - Community•9mo ago

Changed the hardcoded Data on my ecommerce site to fakestore API but now having trouble pushing data

https://github.com/callum-laing/shopping-site I encountered this issue before but my experience/knowledge with React isn't good enough to figure this out anymore, and I'm at the point where I'd just like to get it working so I can move on to something else 😅 I'm not getting any errors when I try testing lines/functions in the console, you click "add to cart" and it's like nothing happens, literally, so I'm not sure where the missing piece of the puzzle is... I tried putting this into a codesandbox but it wasn't playing ball, so apologies that i only have my github repo to work with.

6 Replies

Gashy•9mo ago

To my understanding you have a URL passing some parameters to the cart page, but from the looks of it the cart page isnt looking for that respected data. Are you trying to do a post request instead?

CDLOP•9mo ago

I did think the cart page was fetching the data, no?

const CartComponent = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const storedItems = JSON.parse(localStorage.getItem("items")) || [];
        const products = storedItems.map((item) => JSON.parse(item.product));
        setItems(products);
      } catch (error) {
        console.error("Error fetching items:", error);
      }
    };

    fetchData();
  }, []);

const CartComponent = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const storedItems = JSON.parse(localStorage.getItem("items")) || [];
        const products = storedItems.map((item) => JSON.parse(item.product));
        setItems(products);
      } catch (error) {
        console.error("Error fetching items:", error);
      }
    };

    fetchData();
  }, []);

I googled the hell out of this so it coud be a miss-match of various answers that I've maybe missed a tweak somewhere

Gashy•9mo ago

From your link its passing two queries, id and product

            href={{
              pathname: "/cart",
              query: {
                id: product.id,
                product: JSON.stringify(product),
              },
            }}

            href={{
              pathname: "/cart",
              query: {
                id: product.id,
                product: JSON.stringify(product),
              },
            }}

Because from what you posted above it's looking for a local storage object, which I dont think that link would be doing in its process What you probably want is a post request or a function to add the item to a data object that holds your basket, and then direct the user to the cart page And on the cart page you just loop through the items in that data, or display an empty cart

CDLOP•9mo ago

That makes sense when I read it, I'd have to figure out how to code that

Gashy•9mo ago

Its been a few years since ive used react but you can call functions using their version of event handlers

<button onClick={yourFunctionHere}>
  Click me
</button>

<button onClick={yourFunctionHere}>
  Click me
</button>

then you could have something like

yourFunctionHere(productId) {
 const storedCartData = localStorage.getItem('cart') ?? [];
 // perform a check to see if the product already exist in the cart - add or increment product accordingly
 // update local storage with new data
 // direct user to cart
}

yourFunctionHere(productId) {
 const storedCartData = localStorage.getItem('cart') ?? [];
 // perform a check to see if the product already exist in the cart - add or increment product accordingly
 // update local storage with new data
 // direct user to cart
}

CDLOP•9mo ago

I can try that, thanks mate, I'll give it a go tomorrow before I sod off for the easter weekend lol

Gaming

Programming

Changed the hardcoded Data on my ecommerce site to fakestore API but now having trouble pushing data