Show Added To Cart Product with Price Calculation React Redux Saga

 

 

 

Show Added To Cart Product with Price Calculation

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of Show Added To Cart Product with Price Calculation in redux saga and set result. Actually we are making some project like E-commerce where we can implement searchbar, product add to cart, remove from cart, empty cart, cart section after adding some product and product section and a lot of things, So, don't worry i'm not going to leave you alone.

 

 

React

Certainly, Reactjs is a JavaScript library developed by Facenook for building user interfaces. It allows developers to create reusable UI components and effciently manage the state of their applications. Here are some key aspects of Reactjs.


Component-Based Architecture: ReactJS follows a component-based architecture, where the user interface is divided into small, reusable components. Components encapsulate their own logic, state, and rendering, making it easier to build and maintain complex user interfaces.



Virtual DOM: ReactJS uses a virtual representation of the DOM (Document Object Model), known as the Virtual DOM. When the state of a component changes, React updates the Virtual DOM.



JSX: JSX is a syntax extension for JavaScript used in React. It allows developers to write HTML-like code within JavaScript, making it easier to describe the structure and appearance of components. JSX code is transpiled to regular JavaScript using tools like Babel before being executed in the browser.


Hooks: React introduced Hooks in version 16.8 as a way to use state and other React features in functional components. Hooks allow developers to write reusable logic and manage state within functional components without the need for class components. The most commonly used hooks are useState for managing state and useEffect for handling side effects such as fetching data or subscribing to events.


React Router: React Router is a popular routing library for React applications. It enables developers to create single-page applications with multiple views and handles routing between different components based on the URL.


State Management: React provides a flexible ecosystem of state management solutions. While React's built-in state management (useState ) is suitable for managing local component state, more complex applications may benefit from additional state management libraries like Redux. These libraries help manage global application state and provide predictable ways to update and access the state.


ReactJS has gained widespread popularity due to its performance, reusability, and declarative approach to building user interfaces. It has large community.

 

Topic we will cover -

# Get Data from redux

# Make Table to show cart product

# Add style to Page

# Show price and discount

 

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/09/get-data-in-component-from-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-to-cart-with-id-react-redux-saga.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/add-routing-and-make-cart-page.html

 

Get Data from redux

 

 Here, we gonna first try to fetch data from cart and after that we will show output as a cart length and price calculation but before that we will make a const cartData = useSelector hook and get a state of data (cartdata) that which we have added inside the cart.

const cartDataa = useSelector((state) => state.cartData);

# NOTE - i know you must be getting confused, so you must see our previous blog. 

 

 

JSON File (Product.json - json-server product.json)

 

 

{
    "products": [
      {
        "id": 1,
        "name": "IQOO Z7 Pro 5G",
        "color": "blue",
        "price": 23999,
        "category": "mobile",
        "brand": "IQOO",
        "photo": "https://m.media-amazon.com/images/I/61Id6WJDWqL._SX679_.jpg"
      
      },
      {
        "id": 2,
        "name": "iQOO Neo 7 5G",
        "color": "blue",
        "price": 27999,
        "category": "mobile",
        "brand": "IQOO",
        "photo": "https://m.media-amazon.com/images/I/41xfzQ2MeAL._SX300_SY300_QL70_FMwebp_.jpg"
      
      },
      {
        "id": 3,
        "name": "iQOO 9 SE",
        "color": "blue",
        "price": 23999,
        "category": "mobile",
        "brand": "IQOO",
        "photo": "https://m.media-amazon.com/images/I/618gFHEnXUL._SX679_.jpg"
      
      },
      {
        "id": 4,
        "name": "Vivo T2x 5G",
        "color": "blue",
        "price": 18050,
        "category": "mobile",
        "brand": "Vivo",
        "photo": "https://m.media-amazon.com/images/I/71ehbISi-zL._SL1500_.jpg"
      
      },
      {
        "id": 5,
        "name": "TECNO Spark 9",
        "color": "gray",
        "price": 6999,
        "category": "mobile",
        "brand": "TECHNO",
        "photo": "https://m.media-amazon.com/images/I/9185sX9EGFL._SL1500_.jpg"
      
      },
      {
        "id": 6,
        "name": "IKALL Z19 Pro",
        "color": "blue",
        "price": 8799,
        "category": "mobile",
        "brand": "IKALL",
        "photo": "https://m.media-amazon.com/images/I/51m4O+mhvOL._SL1000_.jpg"
      
      }
    
    ]
  }

Now you can also check the length of cart items using cartData.length.

 <span>{cartDataa.length}</span> >

 

 

 

 

After that we will use map() function for getting data from cart that the product which the user has added to the cart.

{
cartDataa.map((item) =>
            <tr className="" key={item.id}>
           
           <td>{item.name}</td>
           <td>{item.color}</td>
           <td>{item.price}</td>
           <td>{item.category}</td>
           <td>{item.brand}</td>
         </tr>
        
  )}

 

 

 Before writing the whole code here, we will console of cart price that user has added to the cart.

     let amount = cartDataa.map(item=>item.price).reduce((prev, next)=>prev+next)
console.log(amount)
 

 

 

 
1) cartDataa: It seems that cartDataa is an array containing objects representing items in a shopping cart. Each object is expected to have a property named price.


2) .map() Method: The map method is used to create a new array by extracting the price property from each object in the cartDataa array.
        cartDataa.map(item => item.price) creates an array of prices.


3) .reduce() Method: The reduce method is then used to calculate the sum of all the prices in the newly created array.
        (prev, next) => prev + next is a callback function that takes two parameters (prev and next) and returns their sum. The reduce method applies this function cumulatively to the elements of the array, resulting in the sum of all prices.


4) amount Variable: The result of the reduce operation, which is the total sum of prices, is stored in the variable amount.

5) console.log(amount): The console.log statement is used to log the calculated amount to the console, which can be useful for debugging or understanding the value.

 

 

Make Table to show cart product

 

 

 <div>
       <div className="text-center mx-auto max-w-[1240px] ">
       <h1 className="text-blue uppercase underline font-bold first-letter:text-[red] pb-4 pt-4 cursor-pointer" onClick={() => navigate('/')}>Product List</h1>
           <span>{cartDataa.length}</span> 
       </div>

      <div className="max-w-[1420px] mx-auto  ">
        <div className="grid lg:grid-cols-2 ml-6 mr-6 gap-10   ">
          <div className="">
            <table className="border-2 shadow-sm  bg-white ">
              <tr className="text-white bg-blue-500 text-left w-full">
                <th className="w-36" >Name</th>
                <th className="w-36">Color</th>
                <th className="w-36">Price</th>
                <th className="w-36">Category</th>
                <th className="w-36">Brand</th>
              </tr>
              
          {
            cartDataa.map((item) =>
            <tr className="" key={item.id}>
           
           <td>{item.name}</td>
           <td>{item.color}</td>
           <td>{item.price}</td>
           <td>{item.category}</td>
           <td>{item.brand}</td>
         </tr>
        
          )}
             
             
            </table>
          </div>

          <div className="text-right  ">
            <h1 className="border-2 text-center font-semibold text-white bg-blue-500  ">Order Summary</h1>
           <div className="flex flex-col justify-center">
         <p className="font-semibold mx-auto mt-2">
          Have Coupan ?
         </p>
         <div className=" mx-auto m-4">
          <input type=""
          className="rounded mb-2 p-2 mr-4 text-slate-600"
          placeholder="Coupan Code"
          />
          <button className=" bg-black text-white p-4 rounded">
                Apply
              </button>
         </div>
         <div className="flex shadow-md  ">
              <div className="mx-auto px-8 py-4">
                <div className="md:flex justify-between mb-5 ">
                  <span className="font-semibold text-sm uppercase">
                    Total Price
                  </span>
                 <span className="font-semibold text-sm pl-28">{amount}</span> 
                  
                 
                </div>
                <div className="md:flex justify-between  mb-5">
                  <span className="font-semibold text-sm uppercase">
                    Discount
                  </span>
                   <span className="font-semibold text-sm">{amount/10}</span> 
                </div>
                <div className="md:flex justify-between  mb-5">
                  <span className="font-semibold text-sm uppercase">Total</span>
                   <span className="font-semibold text-sm">{amount-(amount/10)}</span> 
                </div>
                
                <div className="border-t mt-8">
                  <div className="flex font-semibold justify-between py-6 text-sm uppercase">
                    <span>Total cost</span>
                   <span>{amount-(amount/10)}</span> 
                  </div>
                  <button className="bg-indigo-500 font-semibold hover:bg-indigo-600 py-3 text-sm text-white uppercase w-full">
                    Checkout
                  </button>
                </div>
              </div>
            </div>
           </div>

          </div>
        </div>
      </div>

    </div>

 

 

1) HTML Structure: The outermost element is a <div> that wraps the entire content.

2) Header Section: Inside the outer <div>, there's a header section with a title "Product List" that also displays the number of items in the cart (cartDataa.length). The title is a clickable element that triggers a navigation to the root path ('/') when clicked.

3) Product List Section: Following the header, there is a section for displaying a list of products in a grid layout (lg:grid-cols-2 for large screens, 2 columns). The product information is displayed in a table with columns for "Name," "Color," "Price," "Category," and "Brand."
        The product data is dynamically rendered using the map function to iterate through the cartDataa array and display each product's details in a table row (<tr>).

4) Order Summary Section: On the right side of the page, there is an order summary section.
        It includes an input field for entering a coupon code and a button to apply the coupon.
        Below that, there's a section displaying the total price, discount, and the final total. The values seem to be dynamic and are being calculated based on the amount variable.
        Finally, there's a checkout button.

5) Styling: The styling is done using Tailwind CSS classes, which are utility classes for styling in a functional way.
        Classes like text-blue, uppercase, underline, font-bold, mx-auto, etc., are used to style various elements.

6) Dynamic Content: The content is dynamic and depends on the data in the cartDataa array and the amount variable, which is used to calculate the total price, discount, and final total.

7) Event Handling: The title "Product List" has an onClick event that navigates to the root path ('/') when clicked.

8) React Component Structure: The code suggests the usage of React components as it utilizes JSX syntax, and the dynamic content and event handling are typical in React applications.

 

 

 

 

 

 

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE  

 

Disclaimer