Build a Shopping Cart Using React js Laravel 11 & Stripe Payment Gateway Part 4

4 months ago admin Reactjs

In the fourth part of this tutorial, we will fetch and display all the products on the home page, and add the navbar menu so we can move between pages.

Add the home component

Inside the home component, we fetch all the products from the backend and send them to the product list component.

show or hide the code

                                                    
                                                                                                                import React, { useEffect, useState } from 'react'
import axios from 'axios'
import ProductList from './products/ProductList'

export default function Home() {
    const[products, setProducts] = useState([])

    useEffect(() => {
        const fetchAllProducts = async() => {
            try {
                const response = await axios.get('http://127.0.0.1:8000/api/products')
                setProducts(response.data.data)
            } catch (error) {
                console.log(error)
            }
        }
        fetchAllProducts()
    }, [])

    return (
        <ProductList products={products} />
    )
}

Add the product list component

Inside the product list component, we receive the products, loop through, and send each product to the product list item component.

show or hide the code

                                                        
                                                                                                                        import React from 'react'
import ProductListItem from './ProductListItem'

export default function ProductList({products}) {
  return (
    <div className="row my-4">
        {
            products.map(product => <ProductListItem 
                product={product} key={product.id }/>)
        }
    </div>
  )
}

Add the product list item component

Inside the product list item component, we receive the product, display the details, and add the add-to-cart functionality.

show or hide the code

                                                        
                                                                                                                        import React from 'react'
import { useDispatch } from 'react-redux'
import { addToCart } from '../../redux/slices/cartSlice'

export default function ProductListItem({product}) {
    const dispatch = useDispatch()

    return (
        <div className='col-md-4 mb-2'>
            <div className="card h-100">
                <img src={product.product_image} alt="Product Image" 
                    className='card-img-top' />
                <div className="card-body">
                    <h5 className="card-title">
                        {product.product_name} 
                    </h5>
                    <p className="card-text">
                        {product.product_desc} 
                    </p>
                    <p>
                        <span className="fw-bold text-danger">
                            ${product.product_price}    
                        </span> 
                    </p>
                    <button className="btn btn-dark"
                        onClick={() => dispatch(addToCart(product))}>
                        <i className="bi bi-cart-check"></i> add to cart
                    </button>
                </div>
            </div>
        </div>
    )
}

Add the header component

Inside the Header Component, we have the navigation menu.

show or hide the code

                                                        
                                                                                                                        import React from 'react'
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'

export default function Header() {
    const { cartItems } = useSelector(state => state.cart)
    return (
        <nav className="navbar navbar-expand-lg bg-body-tertiary">
            <div className="container-fluid">
                <Link className="navbar-brand" to="/">
                    <i className="bi bi-cart h1"></i>
                </Link>
                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav mx-auto mb-2 mb-lg-0">
                        <li className="nav-item">
                            <Link className="nav-link" to="/">
                                <i className="bi bi-house"></i> Home
                            </Link>
                        </li>
                        <li className="nav-item">
                            <Link className="nav-link" to="/cart">
                                <i className="bi bi-cart-check"></i> Cart ({cartItems.length})
                            </Link>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    )
}