How to Show the Total Number of Items in Customer Shopping Carts

I was surfing on the web in the search of Cart Icon which has Count on it. I did not find any easy way of doing that, so here is my attempt to achieve it through React using basic CSS properties.
Dependencies
  • @mui/icons-material
  • @mui/material
  • @mui/styles
  • 1. We will start by creating CartCounter component in our react app.
    CartCounter component is a functional component which takes props object as a parameter. The object passed has following properties
  • size : number of items in a cart.
  • color : color for the Icon and digit.
  • circleBg : backgroundColor for circle.
  • import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
    
    export default function CartCounter(props) {
      return (
        <>
          <ShoppingCartIcon
            style={{ fontSize: "48px", color: `${props.cartstyle.color}` }}
          />
        </>
      );
    }
    App.js
    import CartCounter from "./CartCounter";
    import "./styles.css";
    
    export default function App() {
      return (
        <div className="App">
          <h1>Number Of Items in A Cart</h1>
          <div style={{ paddingTop: "1rem" }}>
    
            <CartCounter
              cartstyle={{ 
                  size: 3, 
                  color: "#000", 
                  circleBg: "#ff6161"
                }}
            />
    
          </div>
        </div>
      );
    }
    If anyone want to checkout the code, can see on
    codesandbox
    2. Now comes the part of adding Icon
    We will use material icon for that.
    Inside CartCounter.js use ShoppingCartIcon from @mui/icons-material/ShoppingCart. Set fontSize and color received from parent App.js as per your need.
    import Circle from "./Circle.js";
    import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
    
    export default function CartCounter(props) {
      return (
        //putting position: "relative" on the parent
        //makes anything inside of it with position: "absolute" relative to parent.
        <div style={{ position: "relative" }}>
          <ShoppingCartIcon
            style={{
              fontSize: "48px",
              color: `${props.cartstyle.color}`
            }}
          />
          <Circle cartstyle={props.cartstyle} />
        </div>
      );
    }
    3. Now comes the part of positioning Circle.
    Create separate Circle.js for maintaining modularity and pass props to it.
    I have explained code using comments. That's the way of programmer to make code understand.
    import React from "react";
    //using makeStyles api to link
    //style sheet with a function component
    //using the hook pattern
    import { makeStyles } from "@mui/styles";
    
    const useStyles = makeStyles({
      circle: {
        //defining circle
        height: "20px",
        width: "20px",
        borderRadius: "40%",
        //postion absolute helps to put
        //element relative to containing unit
        position: "absolute",
        //adjusting positon of circle
        bottom: "39px",
        left: "17px",
    
        padding: "2px",
        fontWeight: "bold"
      }
    });
    
    const Circle = (props) => {
      const classes = useStyles();
      return (
        <div>
          <div
            //  In order to apply props received, we have used style property
            style={{
              backgroundColor: `${props.cartstyle.circleBg}`,
              color: `${props.cartstyle.color}`,
              border: `solid ${props.cartstyle.color}`
            }}
            className={classes.circle}
          >
            <span>{props.cartstyle.size}</span>
          </div>
        </div>
      );
    };
    export default Circle;
    final output here
    source code
    Cart Counter

    23

    This website collects cookies to deliver better user experience

    How to Show the Total Number of Items in Customer Shopping Carts