Sweet! If you would like to expand on this tutorial, I think we the people would love to see you implement a dynamic navbar, so the user can add new categories from sanity, and perhaps a search function?
Great tutorial, thanks for what you doing! It's well explained in detail and an easy-to-follow tutorial. You just earned yourself a subscriber. :) More tutorials like this, please. Stay safe.
Thanks for your efforts best tutor on youtube you explain every thing in detail and simple words for begainers understand properly thanks again Subscribed you Love From India
Hey @@janmarshalcoding I implemented the 'clearCart()' method upon a successful payment on localhost. It works and the cart is emptied when I return to the store. But when I use the live server -vercel- for testing the cart still shows the items in it, even after a successful test transaction. Do I have to be on "LIVE" mode and NOT on "TEST" on Stripe for it to work? Best regards, Jorge
Hey Gorge, I haven't tried clearCart, but will try to reproduce it later tonight and will come back with my results. So cool that you try to tackle problems you face yourself, most just complain 🤌🏻👍🏻. Also to clarify, you mean emptying the cart works on localhost with clearCart() but not in production using vercel?
Thank you so much for this video, I've learnt a lot but when i add a second product to the cart, it just increases the quantity of the previously added product. I can only seem to add one product, every other thing i add just increases the quantity of the product that's already there
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server. for both CheckNow and AddToBag :(
Hey bro , Thank you for the awesome tutorial , I'm a beginner in JS and I'm starting using your tutorials, however in this one , when I wanted to config sanity I noticed that they completely changed their project in their latest update and made a standalone studio and whatnot, How can I continue? Can this project be done without sanity ? I am more keen to create my own admin dashboard and database for the project.
I'm having the same issue right now "TypeError: Cannot read properties of undefined (reading 'dispatch')" it shows that the error is coming from the "const {cartCount}= useShoppingCart();" part
Were you able to solve it? The same thing happens to me in Navbar.tsx ' ⨯ node_modules eact-redux\es\hooks\useDispatch.js (18:0) @ useDispatch ⨯ TypeError: Cannot read properties of undefined (reading 'dispatch') in the navigation bar (./app/components/NavBar.tsx:38:99) zero
Thanks for this great tutorial man. i am just having this one issue export const dynamic = "force-dynamic"; its updating in local server from live studio but it is not updating the live website. and my head hurts now seriously help me out
Hi Jan any idea how to remove the old images i have been following the tutorial up to 1.04 however when i try to replace the images the old ones stay. Please help..
Thanks for this project Mr Jan. Please I'm getting an error whenever i try to fetch my hero images @58.40 minutes. the error says: Error: Dataset not found - Dataset "production" not found for project ID. kindly help because I'm stuck. Thank you
Hey, sorry for that. When I created this video, I was still learning this whole RU-vid thing haha. If you look at the intro it's funny enough shot in 720p, but I thought it was 4k hahaha. All my new videos are produced 10x better.
I got an error at 1:20:30 TypeError: Cannot read properties of null (reading 'default'), maybe i did something wrong but if you are getting the same error i solved it adding a 5 instead of a 4 to [_type == "product"][0...5]
Thanks for ur video. Can u help me: why I can't see the price including sale percent inside my shopping cart? for example, newest page have sale price, when I click category - same, but when inside my cart can c only normal price without sale. How I can fix it ? Thanks
Will you please make an e-commerce website using Remix which includes pagination, infinite scrolling، image optimization, uploading images , authentication with credentials and also with Google.
The explanation and the contents are good. But imagine if you're building an application for a client. Creating the price ID from Stripe and adding it to the sanity is a bit annoying.
Tried following this but use-shopping-cart dependencies are not well managed. I used pnpm for this project, it kept complaining about that package. Thanks a lot for this tutorial. Appreciate
Nice video! Could this be deployed for real world use? I'm just thinking about how it would work if you had customers - there isn't a register/login/user account area so would they be able to see previous orders etc?
Thanks, well, it can be deployed for real world use, but I would definitely NOT recommend it. This ecommerce store is very "basic" and as you already mentioned features like account are not implemented. Also, I would not really recommend using stripe for Ecommerce for various reasons. Therefore, my recommendation is either you invest a lot of time and create a custom ecommerce storefront or just use Shopify, which makes it like 1000x easier.
Hope you can help Jan. At 1:14 when the interface.ts file is created and the line const data = await getData(); changes to const data: simplifiedProduct[ ] = await getData(); I get an error 'const' declarations must be initialized. Do you know whats going on here?
After setting up my sanity studio with the initial data it worked, but whenever i make a change and publish it, it still shows me my previous data in my next app. I even had to delete some data in the studio but the changes are not reflected in the next app
Do you know why I cant query into my sanity studio? its saying "Cannot read properties of null (reading 'image1')". When I console log it out its saying that my query is null like its just not returning any data my code looks the same as yours. Thank you
Got it resolved. First check the query if it has any value reflected as "null" on the vision page. Update the sanity content page with valid value. Then go to lib folder, sanity.ts change the useCdn as false.
Hello Jan first amazing project and tutorial but I have a error can you help me to fix : Unhandled Runtime Error Error: Cannot read properties of null (reading images') Source app \product\[slug]\page.tsx (39:37) @ images 37. 38 39 ‹div className="mx-auto max-w-screen-xl px-4 md:px-8"> ‹div className="grid gap-8 md:grid-cols-2"> «ImageGallery images={data. images} /> C 40 4.1 42 Show collapsed frames ‹div className="md:py-8".› ‹div className="mb-2 md: mb-3">
Hello Jan! First of all, great tutorial, thank you! Great explanations on every aspect. Subscribed! However I'm facing hydration error when I wrap my entire DOM with the CartProvider: Error: Hydration failed because the initial UI does not match what was rendered on the server. I don't see this happening on the video while following you along. Could you help me fix this? Thanks!
Hey Pasztor 👋, I appreciate it, thank you. So to clarify when you don't add the cart provider you get the hydration warning but if you don't, you don't get one? Could you also test if you get a hydration warning in the incognito tab?
@@janmarshalcoding Thanks for the quick response! Yes, I've already tested in incognito, but the issue seems to come after the fact that we are trying to embed a server component inside a Client component which CartProvider is.
So without seeing your code, I can't definitely say where the error comes from. I personally dont think that there is a error with the cartprovider since i did not have any problems with hydration but rather with html element nesting or not closing tags. Now there to things we can do, you can check your code against my in my GitHub and learn how to debug code (the preferable way...) Or even tough I don't like offering this, you can send me your code by email, and I will try to look at it when I have the time.
Thanks, Jan for this wonderful video tutorial, I have learned a lot. However I am getting this error message when I click on the checkout button in the console: "IntegrationError: No such plan: '4c2f6f9d-31dd.......'". I have checked online to resolve the error but haven't gotten an answer yet. Please can you help?
Hey, please check two things: have you enabled the client only integration and did you use the price Id? In stripe there are two id’s and you need the price id
Ok so the error tells you that such ID does not exist, this is also correct since as you already mentioned the stripe id starts with price_. So going from that I'm pretty sure you are passing the wrong id to your AddToBag component. It seems to me that instead of the price_id you are passing the id of the product to stripe, which is generated by sanity. Thats why stripe is throwing a error since id that you pass is not equivalent to the stripe price_id. Based on this, Please check your props
Do you know how I can use revalidatePath with sanity webhook instead of force-dynamic all the ssg pages? I can't find an example online with app router
Well, you could do that, but I surely would not do that... I would rather delete force-dynamic and add the following: export const revalidate = 3600 // revalidate the data at most every hour then change the seconds to what ever you prefer...
@@janmarshalcoding But what if I need almost instant revalidation but have thousands of routes. What is the actual cost of this data refetching, say if I have 1000 dynamic routes, it gets rebuilt 1000 times every minute, do you know if there is a limit on Vercel?
Are you still experiencing this issue? you can try referencing the image as a url in your groq query e.g "image": image.asset -> url or you can access the first image url if you set it as an array in sanity e.g "image": image.asset[0].url
I'm getting this error on my lib/sanity.ts file: Value of type 'typeof ImageUrlBuilder' is not callable. Did you mean to include 'new'?ts(2348), the line is const builder = ImageUrlBuilder(client); can someone help me?
use this code. it will fix your mentioned issue. ========================================= import imageUrlBuilder from '@sanity/image-url' const builder = imageUrlBuilder(client)
Really cool, but what's the incentive for developers to build e-commerce websites (or people with no coding experience who want to set up a ecommerce website) when you have sites like Shopify and Squarespace thay have this already?
Well, the question is what do you need… Something not all too complex with groundbreaking design, then Shopify and its alternatives are fully ok. I mean, Gymshark scaled with Shopify to a multi Billion Company. But if you want 100% control over your store or can't use Shopify (certain Countries are Sanctioned/Banned), you don't really have a choice but to build the store manually.
@@lastspoil5547 ahh yeah i see the problem, changed a few things and therefore the slug is incorrect... This is the link, will update the description: janmarshal.com/courses/next-js-14-e-commerce-website-with-stripe-and-sanity-io-full-stack-tutorial-2023
@@janmarshalcodingthank you. Do you think you can make a short video for your channel showing us the proper way to download, install, and run this source for beginners? I don’t understand if source code is the completed code base or more of a starter template for tutorials.
it the 8th minutes of video, I find this is another kind of tutorials watching from second monitor and coding in first monitor to show like I am a developer, I think better to try record a video that shows real development life, it is not realistic at all. by the way All my respect to what you are going to do and teach what you can but it's not really the way
With all my respect, this is a free tutorial... I understand your concern, but at the end of the day, RU-vid is not my job and i don't get any money from this. Anyway... I think it's great if there is more content on RU-vid, so i highly encourage you to create your own videos, so others can learn. Thanks and good luck
