How to make Magento 2 cart page using ReactJS

Learn how to build a Magento 2 cart page using ReactJs in a headless development environment.

1. Introduction

2. Setting Up Your Cart Page With ReactJs

3. Creating Your Cart Page with ReactJs

4. Creating Your Cart Page with ReactJs

5. Conclusion

By leverage of Magento 2 and headless architecture, By integrating Magento 2 backend with React, allowing for a more flexible and dynamic user experience and the full potential of headless commerce.

Introduction

Creating a cart page in React for your Magento 2 store can significantly influence whether a user decides to buy your product or move on.

For product page setup you can check out our another blog on How To Create Magento 2 Product Page In Reactjs.

This guide will take you through the process of building an efficient and user-friendly cart page, featuring code examples and detailed explanations.

And, In this blog you are going to know about Magento 2 React Development.

You’ll gain valuable insights into React.js development along the way.

You’ll learn how to fetch data from Magento 2 GraphQL API, manage state, and design a responsive layout that enhances the overall shopping experience.

Setting Up Your Cart Page with ReactJs

1. Create Your ReactJs Project:

Open your terminal and run the following command to create a new React.Js Project

npx create-react-app my-magento-store
cd my-magento-store

2. Navigate to root directory:

cd my-magento-store

3. Install Necessary Packages In Your ReactJs:

As, I created this with Tailwind, Eslint, React router dom, TypeScript so:

// typescript and eslint
npm install -D typescript eslint

// tailwind css
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// react router
npm install react-router-dom

Creating Your Cart Page with ReactJs

1. Set Up GraphQL Queries:

As we are using Magento 2 GraphQl API. So lets, create a file for your GraphQL queries. This keeps your code organized.

mkdir src/components/cart
touch src/components/cart/queries.ts

export const GET_CART = `
    query ($cartId: String!) {
  cart(cart_id: $cartId) {
    id
    total_quantity
    applied_coupons {
      code
    }
    items {
      cartItemId: uid
      quantity
      product {
        name
        sku
        stock_status
        description {
          html
        }
        url_key
        name
        thumbnail {
          id: url
          url
          label
        }
      }

      prices {
        price {
          currency
          value
        }
        row_total {
          currency
          value
        }
        row_total_including_tax {
          currency
          value
        }
        total_item_discount {
          currency
          value
        }
        discounts {
          label
          amount {
            currency
            value
          }
        }
      }
    }
    shipping_addresses {
      country {
        code
        label
      }
      region {
        code
        region_id
        label
      }
      available_shipping_methods {
        amount {
          currency
          value
        }
        available
        carrier_code
        carrier_title
        error_message
        method_code
        method_title
      }
      selected_shipping_method {
        amount {
          currency
          value
        }
        carrier_title
        carrier_code
        method_code
      }
    }
    prices {
      applied_taxes {
        amount {
          currency
          value
        }
        label
      }
      discounts {
        amount {
          currency
          value
        }
        label
      }
      grand_total {
        currency
        value
      }
      subtotal_excluding_tax {
        currency
        value
      }
    }
  }
}
`;

export const CREATE_EMPTY_CART_MUTATION = `
  mutation {
    createEmptyCart
  }
`;

export const UPDATE_CART_MUTATION = `
      mutation UpdateCartItem($cartId: String!, $cartItems:[CartItemUpdateInput]!) {
        updateCartItems(input: { cart_id: $cartId, cart_items:$cartItems }) {
          cart {
            id
            items {
              id
              quantity
            }
          }
        }
      }
    `;

export const DELETE_CART_MUTATION = `
    mutation DeleteCartItem($cartId: String!, $itemId: ID!) {
      removeItemFromCart(input: { cart_id: $cartId, cart_item_uid: $itemId }) {
        cart {
          id
          items {
            id
            quantity
          }
        }
      }
    }
  `;

export const APPLY_COUPON_MUTATION = `
        mutation ApplyCoupon($cartId: String!, $couponCode: String!) {
          applyCouponToCart(input: { cart_id: $cartId, coupon_code: $couponCode }) {
            cart {
              id
              applied_coupons {
                code
              }
            }
          }
        }
      `;

export const REMOVE_COUPON_MUTATION = `
        mutation RemoveCoupon($cartId: String!) {
          removeCouponFromCart(input: { cart_id: $cartId}) {
            cart {
              id
              applied_coupons {
                code
              }
            }
          }
        }
      `;

2. Created a fetch handler in reactjs:

For reusability created a fetch handler function in file called FetchHandler.ts.

// src/component/cart/FetchHandler.ts

export interface GraphQLResponse<T> {
  data: T;
  errors?: Array<{ message: string }>;
}

export const fetchGraphQL = <T>(query: string, variables: Record<string, any> = {}): Promise<T> => {
  return fetch(YOUR_MAGENTO_ENDPOINT, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ query, variables }),
  })
    .then((response) => response.json())
    .then((result: GraphQLResponse<T>) => {
      if (result.errors) {
        throw new Error(result.errors.map((err) => err.message).join(", "));
      }
      return result.data;
    });
};

3. Some custom hooks to manage cart :

Here, I managed things by creating custom hooks according to their functionality in cart.ts

//custom-hooks to manage cart functionalities

import { useEffect, useState } from "react";
import { fetchGraphQL } from "./FetchHandler";
import {
  APPLY_COUPON_MUTATION,
  CREATE_EMPTY_CART_MUTATION,
  DELETE_CART_MUTATION,
  GET_CART,
  REMOVE_COUPON_MUTATION,
  UPDATE_CART_MUTATION,
} from "./queries";
interface CreateCartResponse {
  createEmptyCart: string;
}

export default function useCheckoutQuoteFetch() {
  const [cartId, setCartId] = useState<string | null>(() => {
    return localStorage.getItem("cartId") || null;
  });
  const savedItems = localStorage.getItem("cartItems");
  const [items, setItems] = useState<any>(() => {
    return savedItems ? JSON.parse(savedItems) : [];
  });

  const createCart = async () => {
    fetchGraphQL<CreateCartResponse>(CREATE_EMPTY_CART_MUTATION)
      .then((data) => {
        if (data.createEmptyCart) {
          localStorage.setItem("cartId", data.createEmptyCart);
          setCartId(data.createEmptyCart);
        }
      })
      .catch((error) => {
        console.error("Error creating cart:", error.message);
      });
  };
  useEffect(() => {
    if (!cartId) {
      createCart();
    }
  });

  const getCart = async () => {
    const variables = {
      cartId: cartId,
    };

    fetchGraphQL<{ cart: { id: string; items: Array<{ id: string; quantity: number }> } }>(GET_CART, variables)
      .then((response) => {
        const cart = response?.cart;
        console.log(cart);
        if (cart) {
          localStorage.setItem("cartItems", JSON.stringify(cart));
          setItems(cart);
        }
      })
      .catch((error) => {
        console.error("Error adding item to cart:", error.message);
      });
  };
  useEffect(() => {
    getCart();
  }, []);
  useEffect(() => {
    localStorage.setItem("cartItems", JSON.stringify(items));
  }, [items]);

  return { cartId, items, getCart };
}
export const useUpdateCartItem = () => {
  const [cartId, setCartId] = useState<string | null>(() => {
    return localStorage.getItem("cartId") || null;
  });

  const updateCartItem = async (itemId: string, quantity: string) => {
    const variables = {
      cartId,
      cartItems: [{ cart_item_uid: itemId, quantity: quantity }],
    };

    return fetchGraphQL<{ updateCartItem: { cart: any } }>(UPDATE_CART_MUTATION, variables)
      .then((data) => {
        return data.updateCartItem.cart;
      })
      .catch((err) => {
        console.error("Error updating cart item:", (err as Error).message);
      });
  };

  return { cartId, setCartId, updateCartItem };
};

export const useDeleteCartItem = () => {
  const [cartId, setCartId] = useState<string | null>(() => {
    return localStorage.getItem("cartId") || null;
  });
  const { getCart } = useCheckoutQuoteFetch();

  const deleteCartItem = (itemId: string) => {
    const variables = {
      cartId,
      itemId,
    };

    return fetchGraphQL<{ removeItemFromCart: { cart: any } }>(DELETE_CART_MUTATION, variables)
      .then((data) => {
        getCart();
        return data.removeItemFromCart.cart;
      })
      .catch((err) => {
        console.error("Error deleting cart item:", (err as Error).message);
      });
  };

  return { cartId, setCartId, deleteCartItem };
};

export const useApplyCoupon = () => {
  const [cartId, setCartId] = useState<string | null>(() => {
    return localStorage.getItem("cartId") || null;
  });
  const { getCart } = useCheckoutQuoteFetch();

  const applyCoupon = (couponCode: string) => {
    const variables = {
      cartId,
      couponCode,
    };

    return fetchGraphQL<{ applyCouponToCart: { cart: any } }>(APPLY_COUPON_MUTATION, variables)
      .then((data) => {
        getCart();
        return data.applyCouponToCart.cart;
      })
      .catch((err) => {
        console.error("Error applying coupon:", (err as Error).message);
      });
  };

  return { cartId, setCartId, applyCoupon };
};
export const useRemoveCoupon = () => {
  const [cartId, setCartId] = useState<string | null>(() => {
    return localStorage.getItem("cartId") || null;
  });
  const { getCart } = useCheckoutQuoteFetch();

  const removeCoupon = () => {

    const variables = {
      cartId,
    };

    return fetchGraphQL<{ removeCouponFromCart: { cart: any } }>(REMOVE_COUPON_MUTATION, variables)
      .then((data) => {
        getCart();
        return data.removeCouponFromCart.cart;
      })
      .catch((err) => {
        console.error("Error removing coupon:", (err as Error).message);
      });
  };

  return { cartId, setCartId, removeCoupon };
};

4. Cart Page UI Component :

In this component, I have successfully managed the shopping cart UI and its associated functionalities.

It integrates various features to provide a seamless and comprehensive shopping cart experience for users.

import React, { useEffect, useState } from "react";
import UpdateCartForm from "./CartUpdate";
import useCheckoutQuoteFetch, { useDeleteCartItem, useUpdateCartItem } from "./cart";
import ApplyCoupon from "./ApplyCoupon";
export const formatPrice = (value: number, currency: string) => {
  return value?.toLocaleString("en-US", {
    style: "currency",
    currency,
  });
};
export default function Cart() {
  useCheckoutQuoteFetch();
  const [items, setItems] = useState(() => {
    const cartQuote = localStorage.getItem("cartItems");
    return JSON.parse(cartQuote || "{}").items || [];
  });
  const [cartData, setCartData] = useState(() => {
    const cartQuote = localStorage.getItem("cartItems");
    return JSON.parse(cartQuote || "{}");
  });

  useEffect(() => {
    const handleStorageChange = () => {
      const cartQuote = localStorage.getItem("cartItems");
      const cartData = JSON.parse(cartQuote || "{}") || [];
      setItems(cartData.items || []);
      setCartData(cartData);
    };

    handleStorageChange();

    window.addEventListener("storage", handleStorageChange);

    return () => {
      window.removeEventListener("storage", handleStorageChange);
    };
  });
  const [itemData, setItemData] = useState({ qty: "", id: "" });
  const { updateCartItem } = useUpdateCartItem();
  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    updateCartItem(itemData.id, itemData.qty)
      .then((updatedCart) => {
        console.log("Updated cart:", updatedCart);
      })
      .catch((error) => {
        console.error("Failed to update cart item:", error);
      });
  };
  const { deleteCartItem } = useDeleteCartItem();

  const handleDelete = (itemId: string) => {
    deleteCartItem(itemId)
      .then((deleteCartItem) => {
        console.log("Updated cart after deletion:", deleteCartItem);
      })
      .catch((error) => {
        console.error("Failed to delete cart item:", error);
      });
  };
  const prices = cartData?.prices;
  const selectedMethod = cartData?.shipping_addresses?.[0]?.selected_shipping_method;
  return (
<div className="container mx-auto">
      <h1 className="px-4 mt-4 mb-10 text-5xl md:px-0 font-extralight">Shopping Cart</h1>
      <div className="grid gap-16 md:grid-cols-12">
        <div className="order-2 -mt-10 md:mt-0 md:col-span-8 md:order-1">
          <form onSubmit={handleSubmit} className="divide-y">
            <div className="hidden p-3 mt-6 text-sm font-medium md:flex columns-2">
              <p className="w-full">Item</p>
              <div className="flex items-center justify-between w-full">
                <p className="ml-9 md:ml-0">Price</p>
                <p className="ml-9 md:ml-0">Qty</p>
                <p className="ml-9 md:ml-0">Subtotal</p>
              </div>
            </div>
            {items.map((item: any) => (
              <div key={item?.cartItemId} className="px-4 py-6 md:px-2">
                <div className="md:columns-2">
                  <div className="flex gap-4">
                    <img
                      src={item?.product?.thumbnail?.url}
                      alt=""
                      className="object-cover object-center w-16 h-16 md:w-40 md:h-48"
                    />
                    <h2 className="text-lg font-light md:text-xl">{item?.product?.name}</h2>
                  </div>
                  <div className="flex items-center justify-between w-full gap-4 text-lg font-medium max-w-72 md:max-w-full md:text-xl">
                    <div className="flex flex-col gap-2">
                      <p className="text-sm font-medium md:hidden">Price</p>
                      <p>{formatPrice(item?.prices?.price?.value, item?.prices?.price?.currency)}</p>
                    </div>
                    <div className="flex flex-col gap-2">
                      <p className="text-sm font-medium md:hidden">Qty</p>
                      <UpdateCartForm itemId={item?.cartItemId} qty={item?.quantity} setItemData={setItemData} />
                    </div>{" "}
                    <div className="flex flex-col gap-2">
                      <p className="text-sm font-medium md:hidden">Subtotal</p>
                      <p>{formatPrice(item?.prices?.row_total?.value, item?.prices?.row_total?.currency)}</p>
                    </div>
                  </div>
                </div>{" "}
                <div className="flex items-center gap-4 ml-auto max-w-fit">
                  <svg
                    className="w-5 h-5 text-black"
                    fill="none"
                    strokeWidth={2}
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                    aria-hidden="true"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
                    />
                  </svg>
                  <button type="button" className="bg-transparent" onClick={() => handleDelete(item?.cartItemId)}>
                    <svg
                      className="w-5 h-5 text-black"
                      fill="none"
                      strokeWidth={3}
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                      xmlns="http://www.w3.org/2000/svg"
                      aria-hidden="true"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
                      />
                    </svg>
                  </button>
                </div>
              </div>
            ))}
            <div className="flex justify-center py-6 md:justify-end md:my-6 border-y border-y-slate-300 md:border-y-0">
              <button type="submit" className="px-4 py-2 text-sm border border-solid border-neutral-300 bg-neutral-200">
                Update Shopping Cart
              </button>
            </div>
          </form>
          <div className="py-3 mb-10 md:py-0 border-y border-y-slate-300 md:border-y-0">
            <ApplyCoupon />
          </div>
        </div>
        <div className="order-1 w-full p-6 md:col-span-4 md:order-2 bg-neutral-100 max-h-fit">
          <div className="flex flex-col divide-y divide-slate-300">
            <p className="pb-4 text-2xl font-extralight">Summary</p>
            <div className="flex flex-col gap-4 py-4 text-sm font-light">
              <div className="flex items-center justify-between">
                <p>Subtotal</p>
                <p>{formatPrice(prices?.subtotal_excluding_tax?.value, prices?.subtotal_excluding_tax?.currency)}</p>
              </div>
              {prices?.discounts.length > 0 && (
                <div className="flex items-center justify-between">
                  <p>Discount({cartData?.applied_coupons?.[0]?.code || "Free"})</p>
                  {prices?.discounts?.map((item: { amount: { value: number; currency: string } }, index: number) => (
                    <p key={index}>{formatPrice(item?.amount?.value, item?.amount?.currency)}</p>
                  ))}
                </div>
              )}
              {selectedMethod && (
                <div className="flex items-center justify-between">
                  <p>Shipping({selectedMethod?.carrier_title})</p>
                  <p>{formatPrice(selectedMethod?.amount?.value, selectedMethod?.amount?.currency)}</p>
                </div>
              )}
            </div>
            <div className="flex items-center justify-between py-4 font-medium">
              <p>Order Total</p>
              <p>{formatPrice(prices?.grand_total?.value, prices?.grand_total?.currency)}</p>
            </div>
            <div className="flex flex-col items-center w-full">
              <button className="w-full px-8 py-4 my-6 font-medium text-white bg-sky-600 hover:bg-sky-700">
                Process To Checkout
              </button>
              <p className="text-sm font-normal text-sky-500">Check Out with Multiple Addresses</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

5. Update Cart Item

In this component, I have effectively managed the functionalities related to update item quantity.

import React, { useState } from "react";

interface UpdateCartFormProps {
  itemId: string;
  setItemData: any;
  qty: number;
}

const UpdateCartForm: React.FC<UpdateCartFormProps> = ({ itemId, setItemData, qty }) => {
  const [quantity, setQuantity] = useState<string>(`${qty}` || "1");
  const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuantity(e.target.value);
    setItemData({ qty: e.target.value, id: itemId });
  };
  return (
    <>
      <input
        className="w-16 p-2 text-sm font-normal text-center border"
        defaultValue={qty}
        type="text"
        value={quantity}
        onChange={(e) => changeHandler(e)}
        min="1"
        required
      />
    </>
  );
};

export default UpdateCartForm;

6. Coupon Handler:

In this component, I have effectively managed the functionalities related to applying and removing discounts.

This includes seamless integration of features that allow users to enter discount codes, view applied coupons, and easily toggle their application status, enhancing the overall shopping experience.

import React, { useState } from "react";
import { ChevronDownIcon } from "../Header";
import { useApplyCoupon, useRemoveCoupon } from "./cart";

export default function ApplyCoupon() {
  const [viewCoupun, setViewCoupon] = useState(false);
  const { applyCoupon } = useApplyCoupon();
  const cartQuote = localStorage.getItem("cartItems");
  const cartData = JSON.parse(cartQuote || "") || [];
  const [code, setCode] = useState(cartData?.applied_coupons?.[0]?.code || "");
  const handleSubmit = () => {
    applyCoupon(code)
      .then((coupon) => {
        console.log("Updated cart after applying coupon:", coupon);
      })
      .catch((error) => {
        console.error("Failed to apply coupon:", error);
      });
  };
  const { removeCoupon } = useRemoveCoupon();
  const handleRemove = () => {
    removeCoupon()
      .then((coupon) => {
        setCode("");
        console.log("Updated cart after removing coupon:", coupon);
      })
      .catch((error) => {
        console.error("Failed to remove coupon:", error);
      });
  };
  const appliedCoupon = cartData?.applied_coupons?.length > 0 ? true : false;
  return (
    <div className="px-4 md:px-0">
      <p className="flex items-center justify-between gap-4 text-sm md:max-w-fit md:text-base text-sky-500">
        Apply Discount Code{" "}
        <ChevronDownIcon
          onClick={() => setViewCoupon(!viewCoupun)}
          className={`w-4 h-4 ${viewCoupun ? "rotate-180" : "-rotate-0"}`}
        />
      </p>
      {viewCoupun && (
        <div className="flex items-center justify-between my-2 mb-6 border md:mb-0 border-slate-300 md:max-w-fit">
          <input
            type="text"
            className="px-3 max-w-44 focus:outline-0"
            value={code}
            onChange={(e) => setCode(e.target.value)}
          />
          <button
            type="button"
            className="px-3 py-1.5 text-sm bg-neutral-200"
            onClick={appliedCoupon ? handleRemove : handleSubmit}
          >
            {appliedCoupon ? "Cancel Coupon" : "Apply Coupon"}
          </button>
        </div>
      )}
    </div>
  );
}

7. Set Up Routes

Set your app.tsx in src according to your routing structure like this:

import React from "react";
import "./App.css";
import { Route, Routes } from "react-router-dom";
import Cart from "./component/Cart/Cart";
import Header from "./component/Header";

function App() {
  return (
    <div>
      <Header />
      <Routes>
        <Route path="/cart" Component={Cart} />
        {/* Other routes */}
      </Routes>
    </div>
  );
}

export default App;

Run Your ReactJs Application:

Finally, run your ReactJs app to see your cart page in action:

npm start

Conclusion

In this blog, we explored how to create a robust shopping cart page using React in conjunction with the Magento API.

We covered essential functionalities, including managing cart items, applying and removing coupons, and dynamically updating the cart based on user interactions.

Key takeaways include:

• State Management: Leveraging React’s state hooks to manage cart data ensures a seamless user experience.
• GraphQL Integration: Utilizing Magento 2 GraphQL API for fetching and updating cart information allows for efficient data handling and flexibility in managing cart operations.
• User Interactions: Implementing custom hooks and components enhances the functionality of the shopping cart, allowing for features like item updates and coupon management.
• Local Storage: Managing cart data in local storage enables persistence, ensuring users don’t lose their cart items upon page refresh.

By following these principles and utilizing the components, developers can create an engaging and efficient shopping cart experience.

That integrates smoothly with Magento 2 powerful e-commerce capabilities.

With this foundation, you can further expand features, improve performance, and refine the user interface to meet specific business needs.