DEV Community

Cover image for How to Show the Total Number of Items in Customer Shopping Carts
Siddhesh Mungekar
Siddhesh Mungekar

Posted on

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}` }}
      />
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

final output here
source code
Cart Counter

Discussion (0)