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;