{"id":464053,"date":"2024-09-25T13:02:20","date_gmt":"2024-09-25T13:02:20","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=464053"},"modified":"2026-02-23T07:18:57","modified_gmt":"2026-02-23T07:18:57","slug":"create-odoo-product-using-reactjs","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/","title":{"rendered":"How to create Odoo product page using React JS"},"content":{"rendered":"\n

Creating an Odoo Product page to combine Odoo API<\/a> with React Js then makes you one of the most powerful e-commerce platforms<\/a>.<\/p>\n\n\n\n

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

\"Figma<\/figure>\n\n\n\n

Getting Started<\/h3>\n\n\n\n

We need to set up a React Js project to start and implement Tailwind CSS<\/a> for an effective design of the product page.<\/p>\n\n\n\n

    \n
  1. Create a React 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 Product page Component<\/a><\/li>\n\n\n\n
  5. Mount Product Component<\/a><\/li>\n<\/ol>\n\n\n\n

    Step 1: Create a React Project<\/strong><\/h3>\n\n\n\n

    Open your terminal and type the command below to create a new project.<\/p>\n\n\n\n

    npx create-react-app@latest odoo-product-page\ncd odoo-product-page<\/pre>\n\n\n\n
    Navigate to Project root directory:<\/p>\n\n\n\n
    cd odoo-product-page<\/pre>\n\n\n\n
    Step 2: Setup Tailwind CSS<\/strong><\/h3>\n\n\n\n
    And Now we can install Tailwind CSS and its dependencies via npm:<\/p>\n\n\n\n
    npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init<\/pre>\n\n\n\n
    This will generate a tailwind.config.js<\/code> file in your project root, where you can configure Tailwind CSS<\/p>\n\n\n\n
    Configure Tailwind CSS<\/strong><\/h3>\n\n\n\n
    Open the tailwind.config.js file and set up the content paths i.e include all files to scan for class names.<\/p>\n\n\n\n
    module.exports = {\n  content: [\n    ".\/src\/**\/*.{js,jsx,ts,tsx}", \/\/ Add paths to all components\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}<\/pre>\n\n\n\n
    In the src directory, open the global.css file and add the following lines to import tailwind’s base, components, and utilities styles:<\/p>\n\n\n\n
    @tailwind base;\n@tailwind components;\n@tailwind utilities;<\/pre>\n\n\n\n
    After Creating a new project, 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 global.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: Install the React Router Dom Packages<\/h3>\n\n\n\n
    Basically, React Router is used to define multiple routes in the application, so we will add React Router to navigate to the product page.<\/p>\n\n\n\n
    npm install react-router-dom<\/pre>\n\n\n\n
    and we can run the command to run React app. and Tailwind CSS and routing will now be functional.<\/p>\n\n\n\n
    npm run start<\/pre>\n\n\n\n
    Step 4: Create the Product Page Component<\/strong><\/strong><\/h3>\n\n\n\n
    We\u2019ll start by creating a file named ProductPage.js<\/code> in the src\/components<\/code> folder.<\/p>\n\n\n\n
    import React, { useEffect, useState } from "react";\nimport { useParams } from "react-router-dom";\n\nconst ProductPage = () => {\n  const [quantity, setQuantity] = useState(1);\n  const [product, setProduct] = useState();\n  const { sku = "" } = useParams();\n  \/\/ Function to make the API request\n  const postData = () => {\n    fetch("Your-ODOO-API-ENDPOINT", {\n      method: "POST",\n      headers: {\n        "Content-Type": "application\/json; charset=utf-8",\n        Authenticate: "Your Authenticate Key",\n      },\n      body: JSON.stringify({\n        filter: { url_key: { eq: sku } },\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        setProduct(data);\n      })\n      .catch((error) => {\n        console.error("Response Error:", error);\n      });\n  };\n\n  useEffect(() => {\n    postData();\n  }, []);\n\n  const productdetail = product?.products?.items?.[0];\n\n  return (\n    <div className="container mx-auto px-4 py-8">\n      <div className="grid md:grid-cols-2 gap-12">\n        <div className="space-y-4">\n          <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden border border-solid">\n            <img\n              alt={productdetail?.thumbnail?.name}\n              className="h-full w-full object-contain mix-blend-multiply bg-slate-50"\n              src={productdetail?.thumbnail?.id}\n            \/>\n          <\/div>\n        <\/div>\n        <div className="space-y-6">\n          <div>\n            <h1 className="text-3xl text-slate-900 font-bold">\n              {productdetail?.name}\n            <\/h1>\n          <\/div>\n          <p className="text-slate-500 text-lg">\n            {productdetail?.description}\n          <\/p>\n          <div className="text-3xl font-bold text-slate-600">$299.99<\/div>\n          <div className="flex items-center space-x-4">\n            <div className="flex items-center border py-1 border-[#35979C] rounded-sm">\n              <button\n                className="px-3 py-1 text-[#35979C]"\n                onClick={() => setQuantity(Math.max(1, quantity - 1))}\n              >\n                <svg\n                  width="20"\n                  height="20"\n                  viewBox="0 0 14 15"\n                  fill="none"\n                  xmlns="http:\/\/www.w3.org\/2000\/svg"\n                >\n                  <path\n                    d="M2.91602 7.5H11.0827"\n                    stroke="#35979C"\n                    stroke-linecap="round"\n                    stroke-linejoin="round"\n                  \/>\n                <\/svg>\n              <\/button>\n              <span className="px-3 py-1 text-xl">{quantity}<\/span>\n              <button\n                className="px-3 py-1  text-[#35979C]"\n                onClick={() => setQuantity(quantity + 1)}\n              >\n                <svg\n                  width="20"\n                  height="20"\n                  viewBox="0 0 14 15"\n                  fill="none"\n                  xmlns="http:\/\/www.w3.org\/2000\/svg"\n                >\n                  <path\n                    d="M7 3.4165V11.5832"\n                    stroke="#35979C"\n                    stroke-linecap="round"\n                    stroke-linejoin="round"\n                  \/>\n                  <path\n                    d="M2.91602 7.5H11.0827"\n                    stroke="#35979C"\n                    stroke-linecap="round"\n                    stroke-linejoin="round"\n                  \/>\n                <\/svg>\n              <\/button>\n            <\/div>\n            <button className="flex-1 items-center px-10 gap-2 flex max-w-fit text-xl py-2.5 font-bold bg-[#35979C] text-white rounded ">\n              <svg\n                xmlns="http:\/\/www.w3.org\/2000\/svg"\n                fill="#ffffff"\n                viewBox="0 0 24 24"\n                stroke-width="1.5"\n                stroke="currentColor"\n                class="size-5"\n              >\n                <path\n                  stroke-linecap="round"\n                  stroke-linejoin="round"\n                  d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"\n                \/>\n              <\/svg>\n              <span>Add to Cart<\/span>\n            <\/button>\n          <\/div>\n          <button className="flex items-center gap-1 text-[#35979C]">\n            <svg\n              xmlns="http:\/\/www.w3.org\/2000\/svg"\n              fill="none"\n              viewBox="0 0 24 24"\n              stroke-width="1.5"\n              stroke="currentColor"\n              class="size-5"\n            >\n              <path\n                stroke-linecap="round"\n                stroke-linejoin="round"\n                d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"\n              \/>\n            <\/svg>\n            <span className="text-sm text-teal-700 font-medium">Add to Wishlist<\/span>\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  );\n};\n\nexport default ProductPage;<\/pre>\n\n\n\n
    The ProductPage component in React displays sections like an image, product details, and a quantity selector. It fetches product data from an API and offers ‘Add to Cart’ and ‘Buy Now’ actions.<\/p>\n\n\n\n
    Step 5: Mount the Product Compoment<\/h3>\n\n\n\n
    Open App.js<\/strong><\/code> File and replace the code to import ProductPage<\/strong><\/code>, Header<\/strong><\/code>, TopBar<\/strong><\/code>, and Footer<\/strong><\/code>, and Router<\/strong> for displaying the product page.<\/p>\n\n\n\n
    import { BrowserRouter, Route, Router, Routes } from "react-router-dom";\nimport ".\/App.css";\nimport Footer from ".\/components\/Footer";\nimport Header from ".\/components\/Header";\nimport ProductPage from ".\/components\/Product";\nimport TopBar from ".\/components\/TopBar";\n\nfunction App() {\n  return (\n    <>\n      <Header \/>\n      <TopBar \/>\n      <BrowserRouter>\n        <Routes>\n          <Route path="\/product\/:sku" element={<ProductPage \/>} \/>\n        <\/Routes>\n      <\/BrowserRouter>\n      <Footer \/>\n    <\/>\n  );\n}\n\nexport default App;<\/pre>\n\n\n\n
    And Now save or reload your react app.<\/p>\n\n\n\n
    \"The<\/figure>\n\n\n\n
    Conclusion<\/h3>\n\n\n\n
    Congratulations! You\u2019ve successfully learn how to create an odoo product page in React JS<\/a>.<\/p>\n\n\n\n
    Start your Headless Development<\/a> with Webkul.<\/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 product page in React Js.<\/p>\n\n\n\n
    Happy Coding!!<\/p>\n","protected":false},"excerpt":{"rendered":"
    Creating an Odoo Product page to combine Odoo API with React Js then makes you one of the most powerful e-commerce platforms. We will guide you through this blog step-by-step that how to create product page using Odoo API. Getting Started We need to set up a React Js project to start and implement Tailwind […]<\/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":[1267,14740,9272,6360,6359],"class_list":["post-464053","post","type-post","status-publish","format-standard","hentry","category-odoo","category-react-js","tag-odoo","tag-odoo-api","tag-odoo-website","tag-react-ecommerce","tag-react-js"],"yoast_head":"\nHow to create Odoo product page using React JS - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Creating an Odoo Product page to combine Odoo api with React Js then makes you one of the most powerful e-commerce platforms.\" \/>\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-product-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 product page using React JS - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Creating an Odoo Product page to combine Odoo api with React Js then makes you one of the most powerful e-commerce platforms.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/create-odoo-product-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-25T13:02:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-23T07:18:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/09\/figma.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-product-using-reactjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/\"},\"author\":{\"name\":\"Abhishek Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9\"},\"headline\":\"How to create Odoo product page using React JS\",\"datePublished\":\"2024-09-25T13:02:20+00:00\",\"dateModified\":\"2026-02-23T07:18:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/\"},\"wordCount\":385,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/09\/figma.webp\",\"keywords\":[\"odoo\",\"odoo api\",\"Odoo website\",\"react ecommerce\",\"react js\"],\"articleSection\":[\"Odoo\",\"react js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/\",\"url\":\"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/\",\"name\":\"How to create Odoo product page using React JS - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/09\/figma.webp\",\"datePublished\":\"2024-09-25T13:02:20+00:00\",\"dateModified\":\"2026-02-23T07:18:57+00:00\",\"description\":\"Creating an Odoo Product page to combine Odoo api with React Js then makes you one of the most powerful e-commerce platforms.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/figma.webp\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/figma.webp\",\"width\":801,\"height\":502},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create Odoo product page using React JS\"}]},{\"@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 product page using React JS - Webkul Blog","description":"Creating an Odoo Product page to combine Odoo api with React Js then makes you one of the most powerful e-commerce platforms.","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-product-using-reactjs\/","og_locale":"en_US","og_type":"article","og_title":"How to create Odoo product page using React JS - Webkul Blog","og_description":"Creating an Odoo Product page to combine Odoo api with React Js then makes you one of the most powerful e-commerce platforms.","og_url":"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2024-09-25T13:02:20+00:00","article_modified_time":"2026-02-23T07:18:57+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/09\/figma.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-product-using-reactjs\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/"},"author":{"name":"Abhishek Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9"},"headline":"How to create Odoo product page using React JS","datePublished":"2024-09-25T13:02:20+00:00","dateModified":"2026-02-23T07:18:57+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/"},"wordCount":385,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/09\/figma.webp","keywords":["odoo","odoo api","Odoo website","react ecommerce","react js"],"articleSection":["Odoo","react js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/","url":"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/","name":"How to create Odoo product page using React JS - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/09\/figma.webp","datePublished":"2024-09-25T13:02:20+00:00","dateModified":"2026-02-23T07:18:57+00:00","description":"Creating an Odoo Product page to combine Odoo api with React Js then makes you one of the most powerful e-commerce platforms.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/figma.webp","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/09\/figma.webp","width":801,"height":502},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/create-odoo-product-using-reactjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create Odoo product page using React JS"}]},{"@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\/464053","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=464053"}],"version-history":[{"count":69,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/464053\/revisions"}],"predecessor-version":[{"id":527562,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/464053\/revisions\/527562"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=464053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=464053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=464053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}