{"id":468202,"date":"2024-10-18T08:05:16","date_gmt":"2024-10-18T08:05:16","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=468202"},"modified":"2026-02-23T06:23:10","modified_gmt":"2026-02-23T06:23:10","slug":"odoo-category-page-using-reactjs","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/","title":{"rendered":"How to build Odoo category page using ReactJS"},"content":{"rendered":"\n

Building an Odoo category page using React.js involves creating an Odoo headless eCommerce<\/a> solution that communicates with Odoo’s backend, typically via its Odoo REST API.<\/p>\n\n\n\n

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

Odoo Headless development<\/a> is a system that splits the frontend and backend of an Odoo e-commerce site, boosting its efficiency, speed, and user-friendliness<\/p>\n\n\n\n

This separation improves scalability by using the strengths of each part, leading to a better and more enjoyable user experience.<\/p>\n\n\n\n

Webkul Odoo REST API<\/a> offers a varient 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 \u2018category-list\u2019<\/strong> endpoint.<\/p>\n\n\n\n

Getting Start<\/h2>\n\n\n\n

We will guide you through this blog step-by-step that how to build a category page using\u00a0Odoo REST API<\/a>.<\/p>\n\n\n\n

    \n
  1. Install Tailwind CSS<\/a><\/li>\n\n\n\n
  2. Setup React Router<\/a><\/li>\n\n\n\n
  3. Configuring Odoo API<\/a><\/li>\n\n\n\n
  4. Building the Category Page Component<\/a><\/li>\n\n\n\n
  5. Integrating the Component<\/a><\/li>\n\n\n\n
  6. Running Your Application<\/a><\/li>\n<\/ol>\n\n\n\n

    Assumption:<\/strong>\u00a0We\u2019re familiar with Create React App,\u00a0and you have set up the React Application.<\/p>\n\n\n\n

    Note:<\/strong> We will set up the project with the name \u201codoo-category-page.<\/strong>\u201c<\/p>\n\n\n\n

    Step 1: Install Tailwind CSS<\/strong><\/strong><\/h2>\n\n\n\n

    You need to implement Tailwind CSS\u00a0for effective page UI design.<\/p>\n\n\n\n

    1. Install the tailwind CSS via npm<\/strong>: This command installs the tailwind CSS and Dev depencies. Run the following command:<\/p>\n\n\n\n

    npm install -D tailwindcss postcss autoprefixer<\/pre>\n\n\n\n
    2. Initialize Tailwind CSS<\/strong>: This command creates a configuration file for Tailwind CSS.<\/p>\n\n\n\n
    npx tailwindcss init -p<\/pre>\n\n\n\n
    3. Configure Tailwind<\/strong> CSS<\/strong>: Open <\/strong>the tailwind.config.js<\/code> <\/strong>file and Replace the content with the following configuration to set the purge paths for your files:<\/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       colors: {\n          primary: "#35979C",\n      },\n    },\n  },\n  plugins: [],\n}<\/pre>\n\n\n\n
    4. Import Tailwind CSS<\/strong>: In the src directory, open the\u00a0index.css<\/strong>\u00a0file and add the following lines to import Tailwind\u2019s\u00a0base<\/strong>,\u00a0components<\/strong>, and\u00a0utilities<\/strong>\u00a0styles.<\/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 2: Set up the React Router<\/h2>\n\n\n\n
    React Router is used to define multiple routes in the application, so you need to install the React Router library.<\/p>\n\n\n\n
    1. Install the React Router<\/strong>: Run the following command in your project directory.<\/p>\n\n\n\n
    npm install react-router-dom<\/pre>\n\n\n\n
    2. Mount React Router<\/strong>: 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 the category page and other pages like\u00a0the Odoo<\/strong> cart<\/strong><\/a>\u00a0and\u00a0Odoo<\/strong> product page<\/strong><\/a>.<\/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 } from "react-router-dom";\nimport Header from "..\/components\/Header";\nimport Footer from "..\/components\/Footer";\n\nconst Layout = () => {\n  return (\n    <>\n      {\/* You can add the Header Here *\/}\n      <Header \/>\n      <div className="container max-w-[74%] mx-auto min-h-[60vh]">\n        <Outlet \/>\n      <\/div>\n      {\/* You can add the Footer Here *\/}\n      <Footer \/>\n    <\/>\n  );\n};\n\nexport default Layout;<\/pre>\n\n\n\n
    Step 3: Configuring Odoo API<\/h2>\n\n\n\n
    1. Odoo Setup<\/strong>: Ensure you have access to your Odoo instance and the API authentication token.<\/p>\n\n\n\n
    const ODOO_URL = "Odoo_API_URL";\nconst Authenticate = "AUTH_TOKEN";<\/pre>\n\n\n\n
    2. Create an API Helper<\/strong>: Create a file named index.js<\/code> to handle API requests in the src\/fetcher directory.<\/p>\n\n\n\n
    const ODOO_URL = "Odoo_API_URL";\nconst Authenticate = "AUTH_TOKEN";\n\nconst callOdooApi = async ({ query, method = "GET", variables }) => {\n  try {\n    const response = await fetch(`${ODOO_URL}\/${query}`, {\n      method: method,\n      headers: {\n        "Content-Type": "application\/json",\n        Authenticate: Authenticate,\n      },\n      bosy: JSON.stringify({\n        ...(variables && variables),\n      }),\n    });\n    const body = await response.json();\n\n    if (body.errors) {\n      throw body.errors[0];\n    }\n    return {\n      status: response.status,\n      body,\n    };\n  } catch (e) {\n    console.log(e);\n  }\n};\n\nexport const fetchCategories = async () => {\n  const res = await callOdooApi({\n    query: "category-list",\n    method: "POST",\n  });\n\n  const result = res.body;\n  return { result };\n};\n\nexport const getCollectionProducts = async (category) => {\n  const handle = {\n    filter: { category_url: { eq: category } },\n    search: "",\n    pageSize: 12,\n    currentPage: 1,\n  };\n\n  const res = await callOdooApi({\n    query: "product-list",\n    method: "POST",\n    variables: {\n      ...handle,\n    },\n  });\n  const result = res.body;\n\n  return { result };\n};<\/pre>\n\n\n\n
    Step 4: Building the Category Page Component<\/h2>\n\n\n\n
    1. Create a Category Component<\/strong>: Create a new file Category.js<\/code> in the src\/pages\/shop\/category.js<\/p>\n\n\n\n
    import { useEffect, useState } from "react";\nimport { Link, useParams } from "react-router-dom";\nimport { fetchCategories, getCollectionProducts } from "..\/..\/..\/fetcher";\n\nconst Category = () => {\n  const { categorySlug } = useParams();\n  const [products, setProducts] = useState([]);\n  const [categories, setCategories] = useState([]);\n\n  useEffect(() => {\n    const fetchProducts = async () => {\n      const { result: categories } = await fetchCategories();\n      setCategories(categories);\n      const { result } = await getCollectionProducts(categorySlug);\n      setProducts(result);\n    };\n    fetchProducts();\n  }, [categorySlug]);\n\n  const itemList = products?.products;\n  const aggregations = products?.aggregations;\n  const categoryList = categories?.category;\n\n  return (\n    <div class="min-h-screen mt-20  flex">\n      <div className="min-w-[20%] p-4 bg-white border-r">\n        {Array.isArray(aggregations) &&\n          aggregations?.map((aggregation, index) =>\n            aggregation?.attribute_code !== "price" ? (\n              <div key={index}>\n                <h3 class="text-lg font-semibold mb-2">{aggregation?.label}<\/h3>\n                <div class="mb-4">\n                  {Array.isArray(aggregation?.options) &&\n                    aggregation?.options?.map((option, ind) => (\n                      <div class="flex items-center" key={ind}>\n                        <input\n                          type="checkbox"\n                          value={option.value}\n                          id={option?.label}\n                          class="mr-2"\n                        \/>\n                        <label for={option?.label}>{option?.label}<\/label>\n                      <\/div>\n                    ))}\n                <\/div>\n              <\/div>\n            ) : (\n              <div className="mb-2">\n                <h3 class="text-lg font-semibold mb-2">{aggregation?.label}<\/h3>\n                <div class="flex flex-col justify-between items-center">\n                  <div class="flex w-full justify-between">\n                    <span>${aggregation?.options?.min_price}<\/span>\n                    <span>${aggregation?.options?.max_price}<\/span>\n                  <\/div>\n                  <input\n                    type="range"\n                    min={aggregation?.options?.min_price}\n                    max={aggregation?.options?.max_price}\n                    class="w-full mt-2 text-primary bg-primary"\n                  \/>\n                <\/div>\n              <\/div>\n            )\n          )}\n      <\/div>\n\n      <div class="p-6 max-w-[80%]">\n        <div class="flex justify-between items-center mb-4">\n          <div>\n            <span class="text-sm text-gray-500">\n              Products \/ Default Category \/ Collections\n            <\/span>\n          <\/div>\n          <div class="flex items-center">\n            <input\n              type="text"\n              placeholder="Search..."\n              class="border rounded px-2 py-1 mr-4"\n            \/>\n            <select class="border bg-gray-100 rounded px-2 py-1 mr-4">\n              <option>Public Pricelist<\/option>\n            <\/select>\n            <select class="border rounded px-2 bg-gray-100 py-1">\n              <option>Sort By: Featured<\/option>\n              <option>Price: Low to High<\/option>\n              <option>Price: High to Low<\/option>\n            <\/select>\n          <\/div>\n        <\/div>\n        <div class="flex mb-6 overflow-x-scroll py-3 space-x-2">\n          {Array.isArray(categoryList) &&\n            categoryList?.map((cat, index) => (\n              <Link\n                to={`\/shop\/category\/${cat.url_key}`}\n                key={index}\n                class="bg-gray-100 text-sm px-4 py-2 rounded"\n              >\n                {cat?.name}\n              <\/Link>\n            ))}\n        <\/div>\n\n        <div class="grid grid-cols-4 gap-4">\n          {itemList?.items &&\n            Array.isArray(itemList?.items) &&\n            itemList?.items?.map((product, index) => (\n              <div key={index} class="bg-white p-4 rounded shadow">\n                <img\n                  src={product?.thumbnail?.name}\n                  alt={product?.name}\n                  class="mb-4 w-fit h-60"\n                \/>\n                <h4 class="font-semibold text-lg mb-2">{product?.name}<\/h4>\n                <p class="text-green-600 font-bold">\n                  ${product?.price_range.minimum_price?.regular_price?.value}\n                <\/p>\n              <\/div>\n            ))}\n        <\/div>\n      <\/div>\n    <\/div>\n  );\n};\n\nexport default Category;<\/pre>\n\n\n\n
    Step 5: Integrating the Component<\/h2>\n\n\n\n
    1. Update App.js<\/strong>: Import and render the Category<\/code>.js component in your App.js<\/code>.<\/p>\n\n\n\n
    import ".\/App.css";\nimport { BrowserRouter, Route, Routes } from "react-router-dom";\nimport Layout from ".\/pages\/Layout";\nimport NoPage from ".\/pages\/NoPage";\nimport Category from ".\/pages\/Shop\/Category";\n\nfunction App() {\n  return (\n    <BrowserRouter>\n      <Routes>\n        <Route path="\/" element={<Layout \/>}>\n          <Route index element={<h1> Render home page <\/h1>} \/>\n          <Route path="shop\/category\/:categorySlug" element={<Category \/>} \/>\n          <Route path="*" element={<NoPage \/>} \/>\n        <\/Route>\n      <\/Routes>\n    <\/BrowserRouter>\n  );\n}\n\nexport default App;<\/pre>\n\n\n\n
    Step 6: Running Your Application<\/h2>\n\n\n\n
    1. Start the Development Server<\/strong>: Run the following command to start your React app.<\/p>\n\n\n\n
    npm run start<\/pre>\n\n\n\n
    \"Terminal<\/figure>\n\n\n\n
    2. View in Browser<\/strong>: Open your browser and navigate to http:\/\/localhost:3000\/shop\/category\/desks-1<\/code> to see your category page in action.<\/p>\n\n\n\n
    \"Final<\/figure>\n\n\n\n
    Conclusion<\/strong><\/p>\n\n\n\n
    You\u2019ve successfully built a category page using React.js that fetches data from Odoo! This approach can be further enhanced with features like sorting and filtering to improve the user experience.<\/p>\n\n\n\n
    We will require the Webkul\u00a0Odoo REST APIs<\/a>\u00a0for\u00a0headless development services<\/a>\u00a0with Webkul, and you can also check out our Open Source\u00a0Odoo React headless eCommerce<\/a>\u00a0Application.<\/p>\n\n\n\n
    Webkul, an official Odoo partner and Odoo development company<\/a>, provides a wide range of development services, including SaaS solutions, data migrations, mobile app development, and more.<\/p>\n\n\n\n
    Thanks for reading this blog.<\/p>\n\n\n\n
    Happy Coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
    Building an Odoo category page using React.js involves creating an Odoo headless eCommerce solution that communicates with Odoo’s backend, typically via its Odoo REST API. Introduction Odoo Headless development is a system that splits the frontend and backend of an Odoo e-commerce site, boosting its efficiency, speed, and user-friendliness This separation improves scalability by using […]<\/a><\/p>\n","protected":false},"author":545,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2032,13575,2007,6357],"tags":[9224,14744,15269,1267,9272,6360],"class_list":["post-468202","post","type-post","status-publish","format-standard","hentry","category-e-commerce-2","category-next-js","category-odoo","category-react-js","tag-headless-ecommerce","tag-next-headless-theme","tag-next-js-2","tag-odoo","tag-odoo-website","tag-react-ecommerce"],"yoast_head":"\nHow to build Odoo category page using ReactJS - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Building an Odoo category page using React.js involves creating a headless eCommerce solution that communicates with Odoo's backend, typically via its Odoo REST API.\" \/>\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\/odoo-category-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 build Odoo category page using ReactJS - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Building an Odoo category page using React.js involves creating a headless eCommerce solution that communicates with Odoo's backend, typically via its Odoo REST API.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/odoo-category-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-10-18T08:05:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-23T06:23:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/10\/prompt.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\/odoo-category-page-using-reactjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/\"},\"author\":{\"name\":\"Abhishek Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9\"},\"headline\":\"How to build Odoo category page using ReactJS\",\"datePublished\":\"2024-10-18T08:05:16+00:00\",\"dateModified\":\"2026-02-23T06:23:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/\"},\"wordCount\":590,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/10\/prompt.webp\",\"keywords\":[\"headless ecommerce\",\"next headless theme\",\"next js\",\"odoo\",\"Odoo website\",\"react ecommerce\"],\"articleSection\":[\"E-commerce\",\"next js\",\"Odoo\",\"react js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/\",\"url\":\"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/\",\"name\":\"How to build Odoo category page using ReactJS - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/10\/prompt.webp\",\"datePublished\":\"2024-10-18T08:05:16+00:00\",\"dateModified\":\"2026-02-23T06:23:10+00:00\",\"description\":\"Building an Odoo category page using React.js involves creating a headless eCommerce solution that communicates with Odoo's backend, typically via its Odoo REST API.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/prompt.webp\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/prompt.webp\",\"width\":976,\"height\":440},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to build Odoo category 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 build Odoo category page using ReactJS - Webkul Blog","description":"Building an Odoo category page using React.js involves creating a headless eCommerce solution that communicates with Odoo's backend, typically via its Odoo REST API.","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\/odoo-category-page-using-reactjs\/","og_locale":"en_US","og_type":"article","og_title":"How to build Odoo category page using ReactJS - Webkul Blog","og_description":"Building an Odoo category page using React.js involves creating a headless eCommerce solution that communicates with Odoo's backend, typically via its Odoo REST API.","og_url":"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2024-10-18T08:05:16+00:00","article_modified_time":"2026-02-23T06:23:10+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/10\/prompt.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\/odoo-category-page-using-reactjs\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/"},"author":{"name":"Abhishek Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9"},"headline":"How to build Odoo category page using ReactJS","datePublished":"2024-10-18T08:05:16+00:00","dateModified":"2026-02-23T06:23:10+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/"},"wordCount":590,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/10\/prompt.webp","keywords":["headless ecommerce","next headless theme","next js","odoo","Odoo website","react ecommerce"],"articleSection":["E-commerce","next js","Odoo","react js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/","url":"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/","name":"How to build Odoo category page using ReactJS - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/10\/prompt.webp","datePublished":"2024-10-18T08:05:16+00:00","dateModified":"2026-02-23T06:23:10+00:00","description":"Building an Odoo category page using React.js involves creating a headless eCommerce solution that communicates with Odoo's backend, typically via its Odoo REST API.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/prompt.webp","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/prompt.webp","width":976,"height":440},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/odoo-category-page-using-reactjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to build Odoo category 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\/468202","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=468202"}],"version-history":[{"count":52,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/468202\/revisions"}],"predecessor-version":[{"id":517329,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/468202\/revisions\/517329"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=468202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=468202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=468202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}