{"id":465097,"date":"2024-09-26T13:13:14","date_gmt":"2024-09-26T13:13:14","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=465097"},"modified":"2024-10-24T06:01:35","modified_gmt":"2024-10-24T06:01:35","slug":"magento-2-cart-page-using-reactjs","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/magento-2-cart-page-using-reactjs\/","title":{"rendered":"How to make Magento 2 cart page using ReactJS"},"content":{"rendered":"\n

Learn how to build a Magento 2 cart page using ReactJs in a headless development environment<\/a>.<\/p>\n\n\n\n

1. Introduction<\/a><\/p>\n\n\n\n

2. Setting Up Your Cart Page With ReactJs<\/a><\/p>\n\n\n\n

3. Creating Your Cart Page with ReactJs<\/a><\/p>\n\n\n\n

4. Creating Your Cart Page with ReactJs<\/a><\/p>\n\n\n\n

5. Conclusion<\/a><\/p>\n\n\n\n

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

Introduction<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

For product page setup you can check out our another blog on How To Create Magento 2 Product Page In Reactjs<\/strong><\/a>.<\/p>\n\n\n\n

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

And, In this blog you are going to know about Magento 2 React Development<\/a>.<\/p>\n\n\n\n

You\u2019ll gain valuable insights into React.js development<\/a> along the way.<\/p>\n\n\n\n

You\u2019ll learn how to fetch data from Magento 2 GraphQL API, manage state, and design a responsive layout that enhances the overall shopping experience.<\/p>\n\n\n\n

Setting Up Your Cart Page with ReactJs<\/h2>\n\n\n\n

1. Create Your ReactJs Project:<\/strong><\/h4>\n\n\n\n

Open your terminal and run the following command to create a new React.Js<\/a> Project<\/p>\n\n\n\n

npx create-react-app my-magento-store\ncd my-magento-store<\/pre>\n\n\n\n
2. Navigate to root directory:<\/h4>\n\n\n\n
cd my-magento-store<\/pre>\n\n\n\n
3. Install Necessary Packages In Your ReactJs<\/strong>:<\/h4>\n\n\n\n
As, I created this with Tailwind, Eslint, React router dom, TypeScript so:<\/p>\n\n\n\n
\/\/ typescript and eslint\nnpm install -D typescript eslint\n\n\/\/ tailwind css\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n\n\/\/ react router\nnpm install react-router-dom<\/pre>\n\n\n\n
Creating Your Cart Page with ReactJs<\/h2>\n\n\n\n
1. Set Up GraphQL Queries:<\/strong><\/h4>\n\n\n\n
As we are using Magento 2 GraphQl<\/a> API. So lets, create a file for your GraphQL queries. This keeps your code organized.<\/p>\n\n\n\n
mkdir src\/components\/cart\ntouch src\/components\/cart\/queries.ts<\/pre>\n\n\n\n
export const GET_CART = `\n    query ($cartId: String!) {\n  cart(cart_id: $cartId) {\n    id\n    total_quantity\n    applied_coupons {\n      code\n    }\n    items {\n      cartItemId: uid\n      quantity\n      product {\n        name\n        sku\n        stock_status\n        description {\n          html\n        }\n        url_key\n        name\n        thumbnail {\n          id: url\n          url\n          label\n        }\n      }\n\n      prices {\n        price {\n          currency\n          value\n        }\n        row_total {\n          currency\n          value\n        }\n        row_total_including_tax {\n          currency\n          value\n        }\n        total_item_discount {\n          currency\n          value\n        }\n        discounts {\n          label\n          amount {\n            currency\n            value\n          }\n        }\n      }\n    }\n    shipping_addresses {\n      country {\n        code\n        label\n      }\n      region {\n        code\n        region_id\n        label\n      }\n      available_shipping_methods {\n        amount {\n          currency\n          value\n        }\n        available\n        carrier_code\n        carrier_title\n        error_message\n        method_code\n        method_title\n      }\n      selected_shipping_method {\n        amount {\n          currency\n          value\n        }\n        carrier_title\n        carrier_code\n        method_code\n      }\n    }\n    prices {\n      applied_taxes {\n        amount {\n          currency\n          value\n        }\n        label\n      }\n      discounts {\n        amount {\n          currency\n          value\n        }\n        label\n      }\n      grand_total {\n        currency\n        value\n      }\n      subtotal_excluding_tax {\n        currency\n        value\n      }\n    }\n  }\n}\n`;\n\nexport const CREATE_EMPTY_CART_MUTATION = `\n  mutation {\n    createEmptyCart\n  }\n`;\n\nexport const UPDATE_CART_MUTATION = `\n      mutation UpdateCartItem($cartId: String!, $cartItems:[CartItemUpdateInput]!) {\n        updateCartItems(input: { cart_id: $cartId, cart_items:$cartItems }) {\n          cart {\n            id\n            items {\n              id\n              quantity\n            }\n          }\n        }\n      }\n    `;\n\nexport const DELETE_CART_MUTATION = `\n    mutation DeleteCartItem($cartId: String!, $itemId: ID!) {\n      removeItemFromCart(input: { cart_id: $cartId, cart_item_uid: $itemId }) {\n        cart {\n          id\n          items {\n            id\n            quantity\n          }\n        }\n      }\n    }\n  `;\n\nexport const APPLY_COUPON_MUTATION = `\n        mutation ApplyCoupon($cartId: String!, $couponCode: String!) {\n          applyCouponToCart(input: { cart_id: $cartId, coupon_code: $couponCode }) {\n            cart {\n              id\n              applied_coupons {\n                code\n              }\n            }\n          }\n        }\n      `;\n\nexport const REMOVE_COUPON_MUTATION = `\n        mutation RemoveCoupon($cartId: String!) {\n          removeCouponFromCart(input: { cart_id: $cartId}) {\n            cart {\n              id\n              applied_coupons {\n                code\n              }\n            }\n          }\n        }\n      `;<\/pre>\n\n\n\n
2. Created a fetch handler in reactjs:<\/h4>\n\n\n\n
For reusability created a fetch handler function in file called FetchHandler.ts.<\/p>\n\n\n\n
\/\/ src\/component\/cart\/FetchHandler.ts\n\nexport interface GraphQLResponse<T> {\n  data: T;\n  errors?: Array<{ message: string }>;\n}\n\nexport const fetchGraphQL = <T>(query: string, variables: Record<string, any> = {}): Promise<T> => {\n  return fetch(YOUR_MAGENTO_ENDPOINT, {\n    method: "POST",\n    headers: {\n      "Content-Type": "application\/json",\n    },\n    body: JSON.stringify({ query, variables }),\n  })\n    .then((response) => response.json())\n    .then((result: GraphQLResponse<T>) => {\n      if (result.errors) {\n        throw new Error(result.errors.map((err) => err.message).join(", "));\n      }\n      return result.data;\n    });\n};<\/pre>\n\n\n\n
3. Some custom hooks to manage cart :<\/h4>\n\n\n\n
Here, I managed things by creating custom hooks according to their functionality in cart.ts<\/p>\n\n\n\n
\/\/custom-hooks to manage cart functionalities\n\nimport { useEffect, useState } from "react";\nimport { fetchGraphQL } from ".\/FetchHandler";\nimport {\n  APPLY_COUPON_MUTATION,\n  CREATE_EMPTY_CART_MUTATION,\n  DELETE_CART_MUTATION,\n  GET_CART,\n  REMOVE_COUPON_MUTATION,\n  UPDATE_CART_MUTATION,\n} from ".\/queries";\ninterface CreateCartResponse {\n  createEmptyCart: string;\n}\n\nexport default function useCheckoutQuoteFetch() {\n  const [cartId, setCartId] = useState<string | null>(() => {\n    return localStorage.getItem("cartId") || null;\n  });\n  const savedItems = localStorage.getItem("cartItems");\n  const [items, setItems] = useState<any>(() => {\n    return savedItems ? JSON.parse(savedItems) : [];\n  });\n\n  const createCart = async () => {\n    fetchGraphQL<CreateCartResponse>(CREATE_EMPTY_CART_MUTATION)\n      .then((data) => {\n        if (data.createEmptyCart) {\n          localStorage.setItem("cartId", data.createEmptyCart);\n          setCartId(data.createEmptyCart);\n        }\n      })\n      .catch((error) => {\n        console.error("Error creating cart:", error.message);\n      });\n  };\n  useEffect(() => {\n    if (!cartId) {\n      createCart();\n    }\n  });\n\n  const getCart = async () => {\n    const variables = {\n      cartId: cartId,\n    };\n\n    fetchGraphQL<{ cart: { id: string; items: Array<{ id: string; quantity: number }> } }>(GET_CART, variables)\n      .then((response) => {\n        const cart = response?.cart;\n        console.log(cart);\n        if (cart) {\n          localStorage.setItem("cartItems", JSON.stringify(cart));\n          setItems(cart);\n        }\n      })\n      .catch((error) => {\n        console.error("Error adding item to cart:", error.message);\n      });\n  };\n  useEffect(() => {\n    getCart();\n  }, []);\n  useEffect(() => {\n    localStorage.setItem("cartItems", JSON.stringify(items));\n  }, [items]);\n\n  return { cartId, items, getCart };\n}\nexport const useUpdateCartItem = () => {\n  const [cartId, setCartId] = useState<string | null>(() => {\n    return localStorage.getItem("cartId") || null;\n  });\n\n  const updateCartItem = async (itemId: string, quantity: string) => {\n    const variables = {\n      cartId,\n      cartItems: [{ cart_item_uid: itemId, quantity: quantity }],\n    };\n\n    return fetchGraphQL<{ updateCartItem: { cart: any } }>(UPDATE_CART_MUTATION, variables)\n      .then((data) => {\n        return data.updateCartItem.cart;\n      })\n      .catch((err) => {\n        console.error("Error updating cart item:", (err as Error).message);\n      });\n  };\n\n  return { cartId, setCartId, updateCartItem };\n};\n\nexport const useDeleteCartItem = () => {\n  const [cartId, setCartId] = useState<string | null>(() => {\n    return localStorage.getItem("cartId") || null;\n  });\n  const { getCart } = useCheckoutQuoteFetch();\n\n  const deleteCartItem = (itemId: string) => {\n    const variables = {\n      cartId,\n      itemId,\n    };\n\n    return fetchGraphQL<{ removeItemFromCart: { cart: any } }>(DELETE_CART_MUTATION, variables)\n      .then((data) => {\n        getCart();\n        return data.removeItemFromCart.cart;\n      })\n      .catch((err) => {\n        console.error("Error deleting cart item:", (err as Error).message);\n      });\n  };\n\n  return { cartId, setCartId, deleteCartItem };\n};\n\nexport const useApplyCoupon = () => {\n  const [cartId, setCartId] = useState<string | null>(() => {\n    return localStorage.getItem("cartId") || null;\n  });\n  const { getCart } = useCheckoutQuoteFetch();\n\n  const applyCoupon = (couponCode: string) => {\n    const variables = {\n      cartId,\n      couponCode,\n    };\n\n    return fetchGraphQL<{ applyCouponToCart: { cart: any } }>(APPLY_COUPON_MUTATION, variables)\n      .then((data) => {\n        getCart();\n        return data.applyCouponToCart.cart;\n      })\n      .catch((err) => {\n        console.error("Error applying coupon:", (err as Error).message);\n      });\n  };\n\n  return { cartId, setCartId, applyCoupon };\n};\nexport const useRemoveCoupon = () => {\n  const [cartId, setCartId] = useState<string | null>(() => {\n    return localStorage.getItem("cartId") || null;\n  });\n  const { getCart } = useCheckoutQuoteFetch();\n\n  const removeCoupon = () => {\n\n    const variables = {\n      cartId,\n    };\n\n    return fetchGraphQL<{ removeCouponFromCart: { cart: any } }>(REMOVE_COUPON_MUTATION, variables)\n      .then((data) => {\n        getCart();\n        return data.removeCouponFromCart.cart;\n      })\n      .catch((err) => {\n        console.error("Error removing coupon:", (err as Error).message);\n      });\n  };\n\n  return { cartId, setCartId, removeCoupon };\n};<\/pre>\n\n\n\n
\"desktop<\/figure>\n\n\n\n
<\/p>\n\n\n\n
\n
\n
\"mobile<\/figure>\n<\/div>\n\n\n\n
\n
\"mobile<\/figure>\n<\/div>\n<\/div>\n\n\n\n
4. Cart Page UI Component :<\/h4>\n\n\n\n
In this component, I have successfully managed the shopping cart UI and its associated functionalities. <\/p>\n\n\n\n
It integrates various features to provide a seamless and comprehensive shopping cart experience for users.<\/p>\n\n\n\n
import React, { useEffect, useState } from "react";\nimport UpdateCartForm from ".\/CartUpdate";\nimport useCheckoutQuoteFetch, { useDeleteCartItem, useUpdateCartItem } from ".\/cart";\nimport ApplyCoupon from ".\/ApplyCoupon";\nexport const formatPrice = (value: number, currency: string) => {\n  return value?.toLocaleString("en-US", {\n    style: "currency",\n    currency,\n  });\n};\nexport default function Cart() {\n  useCheckoutQuoteFetch();\n  const [items, setItems] = useState(() => {\n    const cartQuote = localStorage.getItem("cartItems");\n    return JSON.parse(cartQuote || "{}").items || [];\n  });\n  const [cartData, setCartData] = useState(() => {\n    const cartQuote = localStorage.getItem("cartItems");\n    return JSON.parse(cartQuote || "{}");\n  });\n\n  useEffect(() => {\n    const handleStorageChange = () => {\n      const cartQuote = localStorage.getItem("cartItems");\n      const cartData = JSON.parse(cartQuote || "{}") || [];\n      setItems(cartData.items || []);\n      setCartData(cartData);\n    };\n\n    handleStorageChange();\n\n    window.addEventListener("storage", handleStorageChange);\n\n    return () => {\n      window.removeEventListener("storage", handleStorageChange);\n    };\n  });\n  const [itemData, setItemData] = useState({ qty: "", id: "" });\n  const { updateCartItem } = useUpdateCartItem();\n  const handleSubmit = async (event: React.FormEvent) => {\n    event.preventDefault();\n    updateCartItem(itemData.id, itemData.qty)\n      .then((updatedCart) => {\n        console.log("Updated cart:", updatedCart);\n      })\n      .catch((error) => {\n        console.error("Failed to update cart item:", error);\n      });\n  };\n  const { deleteCartItem } = useDeleteCartItem();\n\n  const handleDelete = (itemId: string) => {\n    deleteCartItem(itemId)\n      .then((deleteCartItem) => {\n        console.log("Updated cart after deletion:", deleteCartItem);\n      })\n      .catch((error) => {\n        console.error("Failed to delete cart item:", error);\n      });\n  };\n  const prices = cartData?.prices;\n  const selectedMethod = cartData?.shipping_addresses?.[0]?.selected_shipping_method;\n  return (\n<div className="container mx-auto">\n      <h1 className="px-4 mt-4 mb-10 text-5xl md:px-0 font-extralight">Shopping Cart<\/h1>\n      <div className="grid gap-16 md:grid-cols-12">\n        <div className="order-2 -mt-10 md:mt-0 md:col-span-8 md:order-1">\n          <form onSubmit={handleSubmit} className="divide-y">\n            <div className="hidden p-3 mt-6 text-sm font-medium md:flex columns-2">\n              <p className="w-full">Item<\/p>\n              <div className="flex items-center justify-between w-full">\n                <p className="ml-9 md:ml-0">Price<\/p>\n                <p className="ml-9 md:ml-0">Qty<\/p>\n                <p className="ml-9 md:ml-0">Subtotal<\/p>\n              <\/div>\n            <\/div>\n            {items.map((item: any) => (\n              <div key={item?.cartItemId} className="px-4 py-6 md:px-2">\n                <div className="md:columns-2">\n                  <div className="flex gap-4">\n                    <img\n                      src={item?.product?.thumbnail?.url}\n                      alt=""\n                      className="object-cover object-center w-16 h-16 md:w-40 md:h-48"\n                    \/>\n                    <h2 className="text-lg font-light md:text-xl">{item?.product?.name}<\/h2>\n                  <\/div>\n                  <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">\n                    <div className="flex flex-col gap-2">\n                      <p className="text-sm font-medium md:hidden">Price<\/p>\n                      <p>{formatPrice(item?.prices?.price?.value, item?.prices?.price?.currency)}<\/p>\n                    <\/div>\n                    <div className="flex flex-col gap-2">\n                      <p className="text-sm font-medium md:hidden">Qty<\/p>\n                      <UpdateCartForm itemId={item?.cartItemId} qty={item?.quantity} setItemData={setItemData} \/>\n                    <\/div>{" "}\n                    <div className="flex flex-col gap-2">\n                      <p className="text-sm font-medium md:hidden">Subtotal<\/p>\n                      <p>{formatPrice(item?.prices?.row_total?.value, item?.prices?.row_total?.currency)}<\/p>\n                    <\/div>\n                  <\/div>\n                <\/div>{" "}\n                <div className="flex items-center gap-4 ml-auto max-w-fit">\n                  <svg\n                    className="w-5 h-5 text-black"\n                    fill="none"\n                    strokeWidth={2}\n                    stroke="currentColor"\n                    viewBox="0 0 24 24"\n                    xmlns="http:\/\/www.w3.org\/2000\/svg"\n                    aria-hidden="true"\n                  >\n                    <path\n                      strokeLinecap="round"\n                      strokeLinejoin="round"\n                      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"\n                    \/>\n                  <\/svg>\n                  <button type="button" className="bg-transparent" onClick={() => handleDelete(item?.cartItemId)}>\n                    <svg\n                      className="w-5 h-5 text-black"\n                      fill="none"\n                      strokeWidth={3}\n                      stroke="currentColor"\n                      viewBox="0 0 24 24"\n                      xmlns="http:\/\/www.w3.org\/2000\/svg"\n                      aria-hidden="true"\n                    >\n                      <path\n                        strokeLinecap="round"\n                        strokeLinejoin="round"\n                        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"\n                      \/>\n                    <\/svg>\n                  <\/button>\n                <\/div>\n              <\/div>\n            ))}\n            <div className="flex justify-center py-6 md:justify-end md:my-6 border-y border-y-slate-300 md:border-y-0">\n              <button type="submit" className="px-4 py-2 text-sm border border-solid border-neutral-300 bg-neutral-200">\n                Update Shopping Cart\n              <\/button>\n            <\/div>\n          <\/form>\n          <div className="py-3 mb-10 md:py-0 border-y border-y-slate-300 md:border-y-0">\n            <ApplyCoupon \/>\n          <\/div>\n        <\/div>\n        <div className="order-1 w-full p-6 md:col-span-4 md:order-2 bg-neutral-100 max-h-fit">\n          <div className="flex flex-col divide-y divide-slate-300">\n            <p className="pb-4 text-2xl font-extralight">Summary<\/p>\n            <div className="flex flex-col gap-4 py-4 text-sm font-light">\n              <div className="flex items-center justify-between">\n                <p>Subtotal<\/p>\n                <p>{formatPrice(prices?.subtotal_excluding_tax?.value, prices?.subtotal_excluding_tax?.currency)}<\/p>\n              <\/div>\n              {prices?.discounts.length > 0 && (\n                <div className="flex items-center justify-between">\n                  <p>Discount({cartData?.applied_coupons?.[0]?.code || "Free"})<\/p>\n                  {prices?.discounts?.map((item: { amount: { value: number; currency: string } }, index: number) => (\n                    <p key={index}>{formatPrice(item?.amount?.value, item?.amount?.currency)}<\/p>\n                  ))}\n                <\/div>\n              )}\n              {selectedMethod && (\n                <div className="flex items-center justify-between">\n                  <p>Shipping({selectedMethod?.carrier_title})<\/p>\n                  <p>{formatPrice(selectedMethod?.amount?.value, selectedMethod?.amount?.currency)}<\/p>\n                <\/div>\n              )}\n            <\/div>\n            <div className="flex items-center justify-between py-4 font-medium">\n              <p>Order Total<\/p>\n              <p>{formatPrice(prices?.grand_total?.value, prices?.grand_total?.currency)}<\/p>\n            <\/div>\n            <div className="flex flex-col items-center w-full">\n              <button className="w-full px-8 py-4 my-6 font-medium text-white bg-sky-600 hover:bg-sky-700">\n                Process To Checkout\n              <\/button>\n              <p className="text-sm font-normal text-sky-500">Check Out with Multiple Addresses<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  );\n}<\/pre>\n\n\n\n
5. Update Cart Item<\/h4>\n\n\n\n
In this component, I have effectively managed the functionalities related to update item quantity. <\/p>\n\n\n\n
import React, { useState } from "react";\n\ninterface UpdateCartFormProps {\n  itemId: string;\n  setItemData: any;\n  qty: number;\n}\n\nconst UpdateCartForm: React.FC<UpdateCartFormProps> = ({ itemId, setItemData, qty }) => {\n  const [quantity, setQuantity] = useState<string>(`${qty}` || "1");\n  const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setQuantity(e.target.value);\n    setItemData({ qty: e.target.value, id: itemId });\n  };\n  return (\n    <>\n      <input\n        className="w-16 p-2 text-sm font-normal text-center border"\n        defaultValue={qty}\n        type="text"\n        value={quantity}\n        onChange={(e) => changeHandler(e)}\n        min="1"\n        required\n      \/>\n    <\/>\n  );\n};\n\nexport default UpdateCartForm;<\/pre>\n\n\n\n
6. Coupon Handler:<\/h4>\n\n\n\n
In this component, I have effectively managed the functionalities related to applying and removing discounts. <\/p>\n\n\n\n
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.<\/p>\n\n\n\n
import React, { useState } from "react";\nimport { ChevronDownIcon } from "..\/Header";\nimport { useApplyCoupon, useRemoveCoupon } from ".\/cart";\n\nexport default function ApplyCoupon() {\n  const [viewCoupun, setViewCoupon] = useState(false);\n  const { applyCoupon } = useApplyCoupon();\n  const cartQuote = localStorage.getItem("cartItems");\n  const cartData = JSON.parse(cartQuote || "") || [];\n  const [code, setCode] = useState(cartData?.applied_coupons?.[0]?.code || "");\n  const handleSubmit = () => {\n    applyCoupon(code)\n      .then((coupon) => {\n        console.log("Updated cart after applying coupon:", coupon);\n      })\n      .catch((error) => {\n        console.error("Failed to apply coupon:", error);\n      });\n  };\n  const { removeCoupon } = useRemoveCoupon();\n  const handleRemove = () => {\n    removeCoupon()\n      .then((coupon) => {\n        setCode("");\n        console.log("Updated cart after removing coupon:", coupon);\n      })\n      .catch((error) => {\n        console.error("Failed to remove coupon:", error);\n      });\n  };\n  const appliedCoupon = cartData?.applied_coupons?.length > 0 ? true : false;\n  return (\n    <div className="px-4 md:px-0">\n      <p className="flex items-center justify-between gap-4 text-sm md:max-w-fit md:text-base text-sky-500">\n        Apply Discount Code{" "}\n        <ChevronDownIcon\n          onClick={() => setViewCoupon(!viewCoupun)}\n          className={`w-4 h-4 ${viewCoupun ? "rotate-180" : "-rotate-0"}`}\n        \/>\n      <\/p>\n      {viewCoupun && (\n        <div className="flex items-center justify-between my-2 mb-6 border md:mb-0 border-slate-300 md:max-w-fit">\n          <input\n            type="text"\n            className="px-3 max-w-44 focus:outline-0"\n            value={code}\n            onChange={(e) => setCode(e.target.value)}\n          \/>\n          <button\n            type="button"\n            className="px-3 py-1.5 text-sm bg-neutral-200"\n            onClick={appliedCoupon ? handleRemove : handleSubmit}\n          >\n            {appliedCoupon ? "Cancel Coupon" : "Apply Coupon"}\n          <\/button>\n        <\/div>\n      )}\n    <\/div>\n  );\n}<\/pre>\n\n\n\n
7. Set Up Routes<\/h4>\n\n\n\n
Set your app.tsx in src according to your routing structure like this:<\/p>\n\n\n\n
import React from "react";\nimport ".\/App.css";\nimport { Route, Routes } from "react-router-dom";\nimport Cart from ".\/component\/Cart\/Cart";\nimport Header from ".\/component\/Header";\n\nfunction App() {\n  return (\n    <div>\n      <Header \/>\n      <Routes>\n        <Route path="\/cart" Component={Cart} \/>\n        {\/* Other routes *\/}\n      <\/Routes>\n    <\/div>\n  );\n}\n\nexport default App;<\/pre>\n\n\n\n
Run Your ReactJs Application:<\/strong><\/h2>\n\n\n\n
Finally, run your ReactJs app to see your cart page in action:<\/p>\n\n\n\n
npm start<\/pre>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
In this blog, we explored how to create a robust shopping cart page using React in conjunction with the Magento API. <\/p>\n\n\n\n
We covered essential functionalities, including managing cart items, applying and removing coupons, and dynamically updating the cart based on user interactions.<\/p>\n\n\n\n
Key takeaways include:<\/p>\n\n\n\n