How to Show the Total Number of Items in Customer Shopping Carts
Tags: react, material, codenewbie, codesandbox
Published: 2021-11-30 19:59:27

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.

``` javascript
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";

export default function CartCounter(props) {
  return (
    <>
      <ShoppingCartIcon
        style={{ fontSize: "48px", color: `${props.cartstyle.color}` }}
      />
    </>
  );
}
```

### App.js

``` javascript
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](https://codesandbox.io/s/number-of-items-in-a-cart-xzdsw?file=/src/App.js:0-351)

#### 2. Now comes the part of adding Icon
We will use material [icon](https://mui.com/components/material-icons/) 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.

``` javascript
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.
``` javascript
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](https://xzdsw.csb.app/)
[source code](https://codesandbox.io/s/number-of-items-in-a-cart-xzdsw?file=/src/App.js:0-351)
![Cart Counter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60tyvoa7iq0zlkg2gtaa.png)