Constructing an Odoo class web page utilizing React.js entails making a Odoo headless eCommerce answer that communicates with Odoo’s backend, sometimes by way of its Odoo REST API.
Introduction
Odoo Headless growth is a system that splits the frontend and backend of an Odoo e-commerce website, boosting its effectivity, velocity, and user-friendliness
This separation improves scalability through the use of the strengths of every half, resulting in a greater and extra satisfying person expertise.
Webkul Odoo REST API affords a varient of API endpoints that mean you can carry out totally different actions like ‘merchandise’, ‘category-list’, and ‘cart’ however we’ll work with the ‘category-list’ endpoint.
Getting Begin
We are going to information you thru this weblog step-by-step that easy methods to construct class web page utilizing Odoo REST API.
- Set up Tailwind CSS
- Setup React Router
- Configuring Odoo API
- Constructing the Class Web page Element
- Integrating the Element
- Operating Your Software
Assumption: We’re conversant in the Create React App and you’ve got setup the React Software.
Observe: We are going to arrange the undertaking with the title “odoo-category-page.“
Step 1: Set up Tailwind CSS
You want to implement the Tailwind CSS to efficient web page UI design.
1. Set up the tailwind CSS by way of npm: This command set up the tailwind CSS and Dev depencies. run the next command:
npm set up -D tailwindcss postcss autoprefixer
2. Initialize Tailwind CSS: This command creates a configuration file for Tailwind CSS.
npx tailwindcss init -p
3. Configure Tailwind CSS: Open the tailwind.config.js file and Exchange the content material with the next configuration to set the purge paths to your recordsdata:
/** @sort {import('tailwindcss').Config} */
module.exports = {
content material: [
"./src/**/*.{js,jsx,ts,tsx}", // Adjust if needed
],
theme: {
prolong: {
colours: {
main: "#35979C",
},
},
},
plugins: [],
}4. Import Tailwind CSS: Within the src listing, open the index.css file and add the next traces to import tailwind’s base, parts, and utilities types.
@tailwind base; @tailwind parts; @tailwind utilities;
Over all setup the undertaking, and you’ll see the ultimate folder construction.
. ├── src/ │ ├── App.js │ ├── App.css │ ├── App.take a look at.js | ├── index.js | ├── index.css │ └── emblem.svg ├── public/ │ ├── index.html │ ├── emblem.svg │ ├── robots.txt │ └── manifest.json ├── package-lock.json ├── bundle.json ├── tailwind.config.js └── README.md
Step 2: Setup the React Router
React Router is used to outline a number of routes within the software, so it is advisable to set up the react router library.
1. Set up the React Router: Run the next command in your undertaking listing.
npm set up react-router-dom
2. Mount React Router: Open App.js File and change the code to import BrowserRouter, Route, and Routes for displaying the router element.
import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Structure from "./pages/Structure";
perform App() {
return (
<>
Render house web page } />
>
);
}
export default App;After this you possibly can create the format for class web page and different pages like Odoo cart and Odoo product web page.
We’ll begin by making a file named Structure.js within the src/pages folder.
import { Outlet } from "react-router-dom";
import Header from "../parts/Header";
import Footer from "../parts/Footer";
const Structure = () => {
return (
<>
{/* You may add the Header Right here */}
Step 3: Configuring Odoo API
1. Odoo Setup: Guarantee you have got entry to your Odoo occasion and the API Authenticate token.
const ODOO_URL = "Odoo_API_URL"; const Authenticate = "AUTH_TOKEN";
2. Create an API Helper: Create a file named index.js to deal with API requests within the src/fetcher listing .
const ODOO_URL = "Odoo_API_URL";
const Authenticate = "AUTH_TOKEN";
const callOdooApi = async ({ question, technique = "GET", variables }) => {
attempt {
const response = await fetch(`${ODOO_URL}/${question}`, {
technique: technique,
headers: {
"Content material-Sort": "software/json",
Authenticate: Authenticate,
},
bosy: JSON.stringify({
...(variables && variables),
}),
});
const physique = await response.json();
if (physique.errors) {
throw physique.errors[0];
}
return {
standing: response.standing,
physique,
};
} catch (e) {
console.log(e);
}
};
export const fetchCategories = async () => {
const res = await callOdooApi({
question: "category-list",
technique: "POST",
});
const end result = res.physique;
return { end result };
};
export const getCollectionProducts = async (class) => {
const deal with = {
filter: { category_url: { eq: class } },
search: "",
pageSize: 12,
currentPage: 1,
};
const res = await callOdooApi({
question: "product-list",
technique: "POST",
variables: {
...deal with,
},
});
const end result = res.physique;
return { end result };
};Step 4: Constructing the Class Web page Element
1.Create a Class Element: Create a brand new file Class.js within the src/pages/store/class.js
import { useEffect, useState } from "react";
import { Hyperlink, useParams } from "react-router-dom";
import { fetchCategories, getCollectionProducts } from "../../../fetcher";
const Class = () => {
const { categorySlug } = useParams();
const [products, setProducts] = useState([]);
const [categories, setCategories] = useState([]);
useEffect(() => {
const fetchProducts = async () => {
const { end result: classes } = await fetchCategories();
setCategories(classes);
const { end result } = await getCollectionProducts(categorySlug);
setProducts(end result);
};
fetchProducts();
}, [categorySlug]);
const itemList = merchandise?.merchandise;
const aggregations = merchandise?.aggregations;
const categoryList = classes?.class;
return (
{Array.isArray(aggregations) &&
aggregations?.map((aggregation, index) =>
aggregation?.attribute_code !== "value" ? (
) : (
)
)}
{Array.isArray(categoryList) &&
categoryList?.map((cat, index) => (
{cat?.title}
))}
{itemList?.gadgets &&
Array.isArray(itemList?.gadgets) &&
itemList?.gadgets?.map((product, index) => (
{product?.title}
${product?.price_range.minimum_price?.regular_price?.worth}
))}
);
};
export default Class;Step 5: Integrating the Element
1. Replace App.js: Import and render the Class.js element in your App.js.
import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Structure from "./pages/Structure";
import NoPage from "./pages/NoPage";
import Class from "./pages/Store/Class";
perform App() {
return (
Render house web page } />
);
}
export default App;Step 6: Operating Your Software
1. Begin the Improvement Server: Run the next command to begin your React app.
npm run begin
2. View in Browser: Open your browser and navigate to http://localhost:3000/store/class/desks-1 to see your class web page in motion.
Conclusion
You’ve efficiently constructed a class web page utilizing React.js that fetches knowledge from Odoo! This strategy will be additional enhanced with options like sorting, and filtering to enhance person expertise.
We would require the Webkul Odoo REST APIs for headless growth companies with Webkul and you may also try our Open Supply Odoo React headless eCommerce Software.
Thanks for studying this weblog.
Comfortable Coding!
