Creating a Webshop with NextJS – Part 8: A Step-by-Step Guide

The key insight here is that using local storage to store the items in a webshop can lead to disappearing products when the page is reloaded. To fix this, creating a custom hook to handle local storage for storing, removing, and retrieving the items is crucial. By using the hook, we can ensure that the products remain in the cart even after the page is reloaded. It’s like having a magic pocket that keeps your items safe and sound, ready for you whenever you come back 👜🪄.

Recap of Previous Video 🎬

In the previous video, we created the product page, but encountered an issue where the products disappeared upon page reload. In this video, we will fix this problem by creating a new folder called Hooks and implementing a new hook called useStorage.

Implementing useStorage Hook 🛠️

Firstly, within the new Hooks folder, we create a new hook called useStorage.ts. This hook contains three functions: storeCard to store card items, removeCard to remove card items, and getCards to retrieve card items from the local storage.

// useStorage.ts

const useStorage = () => {
  // Implementation of storeCard, removeCard, and getCards functions
}

Now, let’s fix the error related to different product types by creating a new component called cardItem.tsx, which returns an interface product as a product card item.

Creating cardItem Component 🛒

We create a new file called cardItem.tsx, where we define and return an empty product.

// cardItem.tsx

const cardItem = (product: Product) => {
  return ...
}

Implementing Local Storage 📦

We ensure that the useStorage hook is working properly and all the card items are saved in the local storage.

// Implementation of Local Storage

After that, we debug the code and ensure that all the products are being displayed properly.

Fixing Multiple Item Bug 🐞

Upon testing, we find a bug related to adding multiple items to the cart. We fix this by checking if the item ID is the same and incrementing the quantity accordingly.

Conclusion

In this video, we demonstrated how to implement the useStorage hook to store and manage card items, and also fixed a bug related to adding multiple items to the cart. Thank you for watching!

Key Takeaways

• Use hooks like useStorage to manage and store data efficiently.
• Debugging is an essential part of the development process.
• Incrementing quantity of items based on their IDs can help in managing duplicate items in the cart.

FAQ

Q: How can we ensure that card items are saved in the local storage?
A: By using the useStorage hook, card items can be efficiently stored in the local storage.

Q: What is the importance of using different product types?
A: Using different product types helps in categorizing and differentiating between various items in the webshop.

Thank you for watching! Don’t forget to like, subscribe, and hit the bell icon for notifications on new videos. See you next time! 👋🎥