ProductDetails TypeError: Cannot destructure property 'image' of 'product' as it is null. about ecommerce_sanity_stripe HOT 13 OPEN

My simple solution to fix this issue are as follows:

1. In HeroBanner.jsx remove alt="headphones"
   This should fix the error when you select shop now on the HeroBanner."

2. In Sanity make sure the Product slug name matches the Banner product name
   for example Product slug name is headphones (all lowercase) so the Banner product name should be headphones (all lowercase)

from ecommerce_sanity_stripe.

Hi, Like Brenda-FED says, in point 2 "Make sure the product [slug] name matches the Banner product name - right below your button text(Shop Now), find these options in your banner document under content. In addition, if you still get the error, I added the product in question, inside the product document, along with all it's details. This solved the problem for me!

from ecommerce_sanity_stripe.

to fix this make sure in sanity go the the banner product and you have to make sure that you have a Product with the slug name that is the same as your "Product" input in the Banner item.

from ecommerce_sanity_stripe.

I also have the same issue and after many tries, finally found the solution
copy this code and replace it in context component

const onAdd = (product, quantity) => {
    // check if product in the cart
    const checkProductInCart = cartItems.find((item) => item.id === product.id);
    foundProduct = cartItems.find((item) => item.id === product.id);
    let newCartItems = cartItems.filter((items) => items.id !== product.id);


    // update total quantity and total price when user click in add to cart
    setTotalQuantities((prevQuantities) => prevQuantities + quantity);
    setTotalPrice((prevPrice) => prevPrice + product.price * quantity);
    if (checkProductInCart) {
      const updateCartItems = cartItems.map((cardProduct,i,arr) => {
        if (cardProduct.id === product.id)
          return [
            ...newCartItems,
            { ...cardProduct, quantity: cardProduct.quantity + quantity },
          ];
      });
      setCartItems(updateCartItems[newCartItems.length]);
    } else {

      // copy product from props because we can't use it directly
      var copyProduct = JSON.parse(JSON.stringify(product));
      copyProduct.quantity = quantity;

      setCartItems([...cartItems, { ...copyProduct }]);
    }
    toast.success(
      `${Qty} ${product.title.substring(0, 18)} added to the cart.`
    );
    setQty(1);
  };

from ecommerce_sanity_stripe.

My simple solution to fix this issue are as follows:

1. In HeroBanner.jsx remove alt="headphones"
   This should fix the error when you select shop now on the HeroBanner."
2. In Sanity make sure the Product slug name matches the Banner product name
   for example Product slug name is headphones (all lowercase) so the Banner product name should be headphones (all lowercase)

This works for me. My banner product name before was "Sample", and then I changed it to the same slug from the products to "sample", and you can also see it in the URL; it's a big S, so it's different and wrong.

from ecommerce_sanity_stripe.

i done everything that is above but it still thow an error (((

from ecommerce_sanity_stripe.

If you have done everything above, try and restart the server. You can do this in two ways, 1 - stop the server and restart it or 2 - stop the whole program from running, close the editor. Restart your computer and then resume your programm, see if the changes you made take effect. With some code editors, changes can be delayed for one reason or the other.

from ecommerce_sanity_stripe.

@CTILET the problem also can be quotes. If you followed video and used simple quotes( ' ' ) in const productsQuery:
const productsQuery = '*[_type == "product"]' try use template literals in productsQuery:
const productsQuery = `*[_type` == "product"]`
It worked for me very well.

from ecommerce_sanity_stripe.

I had to make sure that in Sanity management , my product name matches exactly the slug. example:
product name: speaker | slug: speaker. If one of them has capital letter at the beginning and the other not, it is going to send error.

from ecommerce_sanity_stripe.

Thanks imueLx for the lights. I've been for 3 days trying to fix this. Your solution worked for me.

from ecommerce_sanity_stripe.

All the above didn't work for me, I just started a new project, had sanity setup beforehand, and then copied all my code from the previous folder to make the work simple.

from ecommerce_sanity_stripe.

All the above didn't work for me, I just started a new project, had sanity setup beforehand, and then copied all my code from the previous folder to make the work simple.

since your product names are all starting with small letters, use the code below to display them starting with caps in your pages
const YourComponent = () => {
const capitalizeFirstLetter = (str) => {
return str.charAt(0).toUpperCase() + str.slice(1);
};
return (

from ecommerce_sanity_stripe.

All the above didn't work for me, I just started a new project, had sanity setup beforehand, and then copied all my code from the previous folder to make the work simple.

since your product names are all starting with small letters, use the code below to display them starting with caps in your pages const YourComponent = () => { const capitalizeFirstLetter = (str) => { return str.charAt(0).toUpperCase() + str.slice(1); }; return (

<. > {capitalizeFirstLetter(item.name)} </. >
{/* Other details */}

))}

);
};

or create a component that capitalizes the first letter(the screenshot attached) then import it where you want to use for example after importing

from ecommerce_sanity_stripe.