{"id":464915,"date":"2024-09-26T11:17:47","date_gmt":"2024-09-26T11:17:47","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=464915"},"modified":"2026-02-23T07:00:14","modified_gmt":"2026-02-23T07:00:14","slug":"create-odoo-cart-page-using-reactjs","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/","title":{"rendered":"How to create Odoo cart page using ReactJS"},"content":{"rendered":"\n

To create a cart page for an Odoo-based headless eCommerce<\/a> app using ReactJS. Below is a high-level overview to develop cart page and example code snippets to guide you through the process.<\/p>\n\n\n\n

First, add the product to the cart from the Odoo product page<\/a> for a seamless shopping experience.<\/p>\n\n\n\n

Introduction<\/h3>\n\n\n\n

Odoo offers a range of API endpoints that allow you to perform different actions like \u2018products\u2019<\/strong>, \u2018category-list\u2019,<\/strong> and \u2018cart\u2019<\/strong> but we\u2019ll work with the \u2018cart\u2019<\/strong> endpoint.<\/p>\n\n\n\n

Basically, the Odoo API is normally the Rest API which provides the Odoo headless eCommerce<\/a> services and serves as the bridge between your application and the Odoo<\/a> Platform.<\/p>\n\n\n\n

Getting Start<\/h3>\n\n\n\n

We will guide you through this blog step-by-step that how to create product page using Odoo API<\/a>.<\/p>\n\n\n\n

    \n
  1. Setup ReactJs Project<\/a><\/li>\n\n\n\n
  2. Setup Tailwind CSS<\/a><\/li>\n\n\n\n
  3. Setup React Router<\/a><\/li>\n\n\n\n
  4. Create Cart Page<\/a><\/li>\n\n\n\n
  5. Mount Cart Page<\/a><\/li>\n\n\n\n
  6. Run React App<\/a><\/li>\n<\/ol>\n\n\n\n

    Step 1. Set Up your ReactJs Project<\/h3>\n\n\n\n

    First, you need a solid foundation for your React application. Use Create React App to bootstrap your project easily. This tool configures everything you need to start building a React app.<\/p>\n\n\n\n

    Open your terminal and type below the command.<\/p>\n\n\n\n

    npx create-react-app odoo-cart-page<\/pre>\n\n\n\n
    Navigate the Project Directory.<\/h4>\n\n\n\n
    After the setup is complete, navigate into your project folder:<\/p>\n\n\n\n
    cd odoo-cart-page<\/pre>\n\n\n\n
    Step 2: Setup Tailwind CSS<\/strong><\/h3>\n\n\n\n
    You need to implement the Tailwind CSS<\/a> to effective cart page design and its Dev dependencies. Use the following command: <\/p>\n\n\n\n
    npm install -D tailwindcss postcss autoprefixer<\/pre>\n\n\n\n
    Run the following command to generate the tailwind.config.js<\/strong><\/code> and postcss.config.js<\/strong><\/code> files:<\/p>\n\n\n\n
    npx tailwindcss init -p<\/pre>\n\n\n\n
    Configure Tailwind CSS<\/strong><\/h4>\n\n\n\n
    Open tailwind.config.js<\/code> <\/strong>and update the content<\/code> array to include paths to your template files. This allows Tailwind to purge unused styles in production:<\/p>\n\n\n\n
    \/** @type {import('tailwindcss').Config} *\/\nmodule.exports = {\n  content: [\n    ".\/src\/**\/*.{js,jsx,ts,tsx}", \/\/ Adjust if needed\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}<\/pre>\n\n\n\n
    In the src directory, open the index.css<\/strong> file and add the following lines to import tailwind\u2019s base, components, and utilities styles:<\/p>\n\n\n\n
    @tailwind base;\n@tailwind components;\n@tailwind utilities;<\/pre>\n\n\n\n
    Over all setup the project, and you can see the final folder structure.<\/p>\n\n\n\n
    .\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 App.js\n\u2502   \u251c\u2500\u2500 App.css\n\u2502   \u251c\u2500\u2500 App.test.js\n|   \u251c\u2500\u2500 index.js\n|   \u251c\u2500\u2500 index.css\n\u2502   \u2514\u2500\u2500 logo.svg\n\u251c\u2500\u2500 public\/\n\u2502   \u251c\u2500\u2500 index.html\n\u2502   \u251c\u2500\u2500 logo.svg\n\u2502   \u251c\u2500\u2500 robots.txt\n\u2502   \u2514\u2500\u2500 manifest.json\n\u251c\u2500\u2500 package-lock.json\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 tailwind.config.js\n\u2514\u2500\u2500 README.md<\/pre>\n\n\n\n
    Step 3: Setup the React Router<\/h3>\n\n\n\n
    React Router is used to define multiple routes in the application, so you need to install the react router library. Run the following command in your project directory.<\/p>\n\n\n\n
    npm install react-router-dom<\/pre>\n\n\n\n
    Open App.js<\/strong><\/code> File and replace the code to import BrowserRouter<\/strong>, Route<\/strong><\/code>, and Routes<\/strong><\/code> for displaying the router component.<\/p>\n\n\n\n
    import ".\/App.css";\nimport { BrowserRouter, Route, Routes } from "react-router-dom";\nimport Layout from ".\/pages\/Layout";\n\nfunction App() {\n  return (\n    <>\n      <BrowserRouter>\n        <Routes>\n          <Route path="\/" element={<Layout \/>}>\n            <Route index element={<h1> Render home page <\/h1>} \/>\n          <\/Route>\n        <\/Routes>\n      <\/BrowserRouter>\n    <\/>\n  );\n}\n\nexport default App;<\/pre>\n\n\n\n
    After this you can create the layout for cart page and other pages like Home<\/strong> and product page<\/strong>. <\/p>\n\n\n\n
    We\u2019ll start by creating a file named Layout.js<\/code> in the src\/pages<\/code> folder. <\/p>\n\n\n\n
    import { Outlet, Link } from "react-router-dom";\n\nconst Layout = () => {\n  return (\n    <>\n       {\/* You can add the Header Here *\/}\n      <div className="container mx-auto min-h-[50vh]">\n        <Outlet \/>\n      <\/div>\n      {\/* You can add the Footer Here *\/}\n    <\/>\n  );\n};\n\nexport default Layout;<\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    Step 4: Create the Cart Page Component<\/strong><\/h3>\n\n\n\n
    We\u2019ll start by creating a file named Cart.js<\/code> in the src\/pages<\/code> folder.<\/p>\n\n\n\n
    This component in React displays the product details, including the image, description, quantity, and total price. Users can choose to proceed to checkout or continue shopping.<\/p>\n\n\n\n
    import { useEffect, useState } from "react";\nimport { Link } from "react-router-dom";\n\nconst Cart = () => {\n  const [cart, setCart] = useState();\n  const oddApi="<Odoo-API-Domain>";\n  const authenticate ="<API-Authenticate-Key>";\n  const cartId = "<Cart-Id>";\n\n  const postData = () => {\n    fetch(`${odooAPI}`, {\n      method: "GET",\n      headers: {\n        "Content-Type": "application\/json; charset=utf-8",\n        Authenticate: authenticate,\n        cartid: cartId,\n      },\n    })\n      .then((response) => {\n        if (!response.ok) {\n          throw new Error("Network response was not ok");\n        }\n        return response.json();\n      })\n      .then((data) => {\n        console.log("Response Data:", data);\n        setCart(data);\n      })\n      .catch((error) => {\n        console.error("Response Error:", error);\n      });\n  };\n\n  useEffect(() => {\n    postData();\n  }, []);\n  const cartData = cart?.customerCart?.items;\n  const prices = cart?.customerCart?.prices;\n  const stepperCls =\n    "flex w-full items-center text-teal-600 after:inline-block after:h-0.5 after:w-full after:border after:border-b after:border-gray-200 after:content-['']";\n  const stepCls =\n    "flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-solid border-gray-200";\n  return (\n    <div>\n      <ol className="mx-auto flex max-w-[86%] items-center py-6">\n        <li className={stepperCls}>\n          <span className={stepCls}>\n            <div className="h-2.5 w-2.5 rounded-full bg-teal-600"><\/div>\n          <\/span>\n        <\/li>\n        <li className={stepperCls}>\n          <span className={stepCls}>\n            <div className="h-2.5 w-2.5 rounded-full bg-white"><\/div>\n          <\/span>\n        <\/li>\n\n        <li className={stepperCls}>\n          <span className={stepCls}>\n            <div className="h-2.5 w-2.5 rounded-full bg-white"><\/div>\n          <\/span>\n        <\/li>\n      <\/ol>\n      <div className="mx-auto max-w-[86%] pb-8">\n        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">\n          <div className="lg:col-span-2">\n            <table className="w-full border-collapse text-left">\n              <thead>\n                <tr className="border-b">\n                  <th className="pb-2">Product<\/th>\n                  <th className="pb-2">Quantity<\/th>\n                  <th className="pb-2">Price<\/th>\n                <\/tr>\n              <\/thead>\n              <tbody>\n                {Array.isArray(cartData) &&\n                  cartData.length > 0 &&\n                  cartData.map((value, index) => (\n                    <tr key={index} className="border-b">\n                      <td className="flex items-start py-2">\n                        <img\n                          src={value?.product?.thumbnail.url}\n                          alt="Warranty"\n                          className="mr-4 h-16 w-16"\n                        \/>\n                        <div>\n                          <div className="line-clamp-2 font-semibold text-teal-700">\n                            {value.product.name}\n                          <\/div>\n                          <p className="line-clamp-2 text-sm text-gray-600">\n                            {value.product.short_description}\n                          <\/p>\n                        <\/div>\n                      <\/td>\n                      <td className="py-2">\n                        <div className="flex items-center">\n                          <button className="rounded border px-4 py-0.5">\n                            -\n                          <\/button>\n                          <span className="mx-2">{value?.quantity}<\/span>\n                          <button className="rounded border px-4 py-0.5">\n                            +\n                          <\/button>\n                        <\/div>\n                      <\/td>\n                      <td className="py-2 text-right">\n                        ${value?.product?.prices?.price?.value.toFixed(2)}\n                      <\/td>\n                    <\/tr>\n                  ))}\n              <\/tbody>\n            <\/table>\n            <div className="flex justify-between gap-2">\n              <button className="mt-6 rounded bg-gray-700 px-6 py-2 text-white shadow-lg">\n                <Link to="shop"> Continue Shopping<\/Link>\n              <\/button>\n              <button className="mt-6 rounded bg-teal-700 px-6 py-2 text-white shadow-lg">\n                <Link to="checkout"> Proceed to Checkout<\/Link>\n              <\/button>\n            <\/div>\n          <\/div>\n\n          <div className="max-h-fit rounded border bg-white p-6 shadow-sm lg:col-span-1">\n            <h3 className="mb-4 text-lg font-semibold">Order Total<\/h3>\n            <div className="mb-2 flex justify-between">\n              <span>Subtotal:<\/span>\n              <span>${prices?.subtotal_excluding_tax?.value.toFixed(2)}<\/span>\n            <\/div>\n            {Array.isArray(prices?.applied_taxes) &&\n              prices?.applied_taxes.length > 0 &&\n              prices?.applied_taxes.map((price, index) => (\n                <div key={index} className="mb-2 flex justify-between">\n                  <span>Taxes:<\/span>\n                  <span>${price?.value.toFixed(2)}<\/span>\n                <\/div>\n              ))}\n\n            <div className="flex justify-between border-t py-2 text-lg font-semibold">\n              <span>Total:<\/span>\n              <span>${prices?.grand_total?.value.toFixed(2)}<\/span>\n            <\/div>\n\n            <div className="mt-4">\n              <a href="#" className="text-sm text-teal-700 underline">\n                Discount code or gift card\n              <\/a>\n            <\/div>\n            <button className="mt-4 w-full rounded bg-teal-700 px-6 py-3 text-white shadow-lg">\n              <Link to="checkout"> Proceed to Checkout<\/Link>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  );\n};\n\nexport default Cart;<\/pre>\n\n\n\n
    Step 5: Mount Cart Page.<\/strong><\/h3>\n\n\n\n
    Open App.js<\/strong><\/code> File and Mention the component in the routes to navigate and displaying the cart page.<\/p>\n\n\n\n
    import ".\/App.css";\nimport { BrowserRouter, Route, Routes } from "react-router-dom";\nimport Layout from ".\/pages\/Layout";\nimport Cart from ".\/pages\/Shop\/Cart";\n\nfunction App() {\n  return (\n    <>\n      <BrowserRouter>\n        <Routes>\n          <Route path="\/" element={<Layout \/>}>\n            <Route index element={<h1> Render home page <\/h1>} \/>\n            <Route path="shop\/cart" element={<Cart \/>} \/>\n          <\/Route>\n        <\/Routes>\n      <\/BrowserRouter>\n    <\/>\n  );\n}<\/pre>\n\n\n\n
    Step 6: Run your React app.<\/h3>\n\n\n\n
    Run the following command to see the cart page in the terminal, and then check the React app in your browser.<\/p>\n\n\n\n
    npm run start<\/pre>\n\n\n\n
    \"The<\/figure>\n\n\n\n
    Note:-<\/strong> Navigate the cart page at http:\/\/localhost:3000\/shop\/cart<\/p>\n\n\n\n
    \"The<\/figure>\n\n\n\n
    \"Mobile<\/figure>\n\n\n\n
    Conclusion<\/h3>\n\n\n\n
    Congratulations! You\u2019ve successfully learn how to create an odoo Cart page in React JS<\/a>.<\/p>\n\n\n\n
    Start your Headless Development<\/a> with Webkul. Webkul an odoo partner & odoo development company<\/a> offers all kinds of development services including SAAS, Migrations, mobile app, and more.<\/p>\n\n\n\n
    Thanks for reading this blog.<\/p>\n\n\n\n
    Hope this blog helped you to better understand how to create an odoo Cart page in React Js.<\/p>\n\n\n\n
    Happy Coding!!<\/p>\n","protected":false},"excerpt":{"rendered":"
    To create a cart page for an Odoo-based headless eCommerce app using ReactJS. Below is a high-level overview to develop cart page and example code snippets to guide you through the process. First, add the product to the cart from the Odoo product page for a seamless shopping experience. Introduction Odoo offers a range of […]<\/a><\/p>\n","protected":false},"author":545,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2007,6357],"tags":[14744,15269,1267,9272,6360,6359,590],"class_list":["post-464915","post","type-post","status-publish","format-standard","hentry","category-odoo","category-react-js","tag-next-headless-theme","tag-next-js-2","tag-odoo","tag-odoo-website","tag-react-ecommerce","tag-react-js","tag-webkul"],"yoast_head":"\nHow to create Odoo cart page using ReactJS - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Creating a cart page for an Odoo-based application using ReactJS in a headless eCommerce. Below is a high-level overview to develop Cart Page\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create Odoo cart page using ReactJS - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Creating a cart page for an Odoo-based application using ReactJS in a headless eCommerce. Below is a high-level overview to develop Cart Page\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-26T11:17:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-23T07:00:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/09\/termina.webp\" \/>\n<meta name=\"author\" content=\"Abhishek Kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abhishek Kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/\"},\"author\":{\"name\":\"Abhishek Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9\"},\"headline\":\"How to create Odoo cart page using ReactJS\",\"datePublished\":\"2024-09-26T11:17:47+00:00\",\"dateModified\":\"2026-02-23T07:00:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/\"},\"wordCount\":575,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/09\/termina.webp\",\"keywords\":[\"next headless theme\",\"next js\",\"odoo\",\"Odoo website\",\"react ecommerce\",\"react js\",\"webkul\"],\"articleSection\":[\"Odoo\",\"react js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/\",\"url\":\"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/\",\"name\":\"How to create Odoo cart page using ReactJS - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/09\/termina.webp\",\"datePublished\":\"2024-09-26T11:17:47+00:00\",\"dateModified\":\"2026-02-23T07:00:14+00:00\",\"description\":\"Creating a cart page for an Odoo-based application using ReactJS in a headless eCommerce. Below is a high-level overview to develop Cart Page\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/termina.webp\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/termina.webp\",\"width\":1129,\"height\":599},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create Odoo cart page using ReactJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9\",\"name\":\"Abhishek Kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5dab3b6807a6aa05fa5ad733392108c9f4ca765e4051f2e20687e10133f461e5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5dab3b6807a6aa05fa5ad733392108c9f4ca765e4051f2e20687e10133f461e5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Abhishek Kumar\"},\"description\":\"Abhishek Kumar, a skilled software engineer, specializes in crafting immersive digital experiences. With a focus on frontend development, he excels in creating headless themes . Proficient in JavaScript and next.js, Abhishek's expertise adds a unique and dynamic dimension to any project, ensuring a seamless and engaging user journey.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/abhishekkumar-mg121\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create Odoo cart page using ReactJS - Webkul Blog","description":"Creating a cart page for an Odoo-based application using ReactJS in a headless eCommerce. Below is a high-level overview to develop Cart Page","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/","og_locale":"en_US","og_type":"article","og_title":"How to create Odoo cart page using ReactJS - Webkul Blog","og_description":"Creating a cart page for an Odoo-based application using ReactJS in a headless eCommerce. Below is a high-level overview to develop Cart Page","og_url":"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2024-09-26T11:17:47+00:00","article_modified_time":"2026-02-23T07:00:14+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/09\/termina.webp","type":"","width":"","height":""}],"author":"Abhishek Kumar","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Abhishek Kumar","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/"},"author":{"name":"Abhishek Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9"},"headline":"How to create Odoo cart page using ReactJS","datePublished":"2024-09-26T11:17:47+00:00","dateModified":"2026-02-23T07:00:14+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/"},"wordCount":575,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/09\/termina.webp","keywords":["next headless theme","next js","odoo","Odoo website","react ecommerce","react js","webkul"],"articleSection":["Odoo","react js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/","url":"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/","name":"How to create Odoo cart page using ReactJS - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/09\/termina.webp","datePublished":"2024-09-26T11:17:47+00:00","dateModified":"2026-02-23T07:00:14+00:00","description":"Creating a cart page for an Odoo-based application using ReactJS in a headless eCommerce. Below is a high-level overview to develop Cart Page","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/termina.webp","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/termina.webp","width":1129,"height":599},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/create-odoo-cart-page-using-reactjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create Odoo cart page using ReactJS"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9","name":"Abhishek Kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5dab3b6807a6aa05fa5ad733392108c9f4ca765e4051f2e20687e10133f461e5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dab3b6807a6aa05fa5ad733392108c9f4ca765e4051f2e20687e10133f461e5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Abhishek Kumar"},"description":"Abhishek Kumar, a skilled software engineer, specializes in crafting immersive digital experiences. With a focus on frontend development, he excels in creating headless themes . Proficient in JavaScript and next.js, Abhishek's expertise adds a unique and dynamic dimension to any project, ensuring a seamless and engaging user journey.","url":"https:\/\/webkul.com\/blog\/author\/abhishekkumar-mg121\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/464915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/545"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=464915"}],"version-history":[{"count":61,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/464915\/revisions"}],"predecessor-version":[{"id":527557,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/464915\/revisions\/527557"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=464915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=464915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=464915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}