Discover ways to construct a Magento 2 product web page utilizing ReactJs in a headless growth atmosphere.
By leverage of headless structure, we’ll seamlessly combine Magento 2 backend with React, permitting for a extra versatile and dynamic person expertise and the complete potential of headless commerce.
Introduction
Making a product web page in React on your Magento 2 retailer can considerably affect whether or not a person decides to purchase your product or transfer on.
This information will take you thru the method of constructing an environment friendly and user-friendly product web page, that includes code examples and detailed explanations.
You’ll achieve invaluable insights into React.js growth alongside the way in which.
You’ll discover ways to fetch information from Magento 2 GraphQL API, handle state, and design a responsive format that enhances the general buying expertise.
Implementation
Now, let’s implement the product web page step-by-step.
Setting Up Your Product Web page with ReactJs
1. Create Your ReactJs Venture:
Open your terminal and run the next command to create a brand new React.Js Venture
npx create-react-app my-magento-store cd my-magento-store
2. Navigate to root listing:
cd my-magento-store
3. Set up Needed Packages In Your ReactJs:
As, I created this with Tailwind, Eslint, React router dom, TypeScript so:
// typescript and eslint npm set up -D typescript eslint // tailwind css npm set up -D tailwindcss postcss autoprefixer npx tailwindcss init -p // react router npm set up react-router-dom
4. Set Up GraphQL Queries:
As we’re utilizing Magento 2 GraphQl API. So lets, create a folder on your GraphQL queries. This retains your code organized.
mkdir src/graphql contact src/graphql/queries.ts
//In queries.ts, you possibly can outline your GraphQL question for fetching product particulars:
// graphql/queries.ts
export const GET_PRODUCT_BY_SKU = (sku: string) => `
{
merchandise(filter: {sku: {eq: "${sku}"}}) {
gadgets {
id
title
rating_summary
review_count
sku
stock_status
value {
regularPrice {
quantity {
worth
foreign money
}
}
}
description {
html
}
media_gallery {
url
}
}
}
}
`;5. Create Your Product Web page In ReactJs:
Contained in the src listing, in a file known as App.tsx add routing construction:
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import ProductPage from '../parts/ProductPage'; // Your product web page element
perform App() {
return (
);
}
export default App;6. Create a product web page element
mkdir src/parts contact src/parts/ProductPage.tsx
And, add the next code in product web page element:
import React, { useEffect, useState } from "react";
import { GET_PRODUCT_BY_SKU } from "../graphql/queries";
import { StarIcon } from "./StarIcon";
import { HeartIcon } from "./Coronary heart";
import { ChartBarIcon } from "./CompareIcon";
import { useParams } from "react-router-dom";
interface ProductType {
value: any;
media_gallery: {
url: string;
}[];
title: string;
stock_status: string;
sku: string;
id: string;
}
const ProductPage: React.FC = () => {
const { sku="" } = useParams<{ sku: string }>();
const [product, setProduct] = useState(null);
const [loading, setLoading] = useState(true);
const APP_URL = MAGENTO_ENDPOINT/graphql;
useEffect(() => {
const fetchProduct = async () => {
strive {
const res = await fetch("APP_URL", {
methodology: "POST",
headers: {
"Content material-Kind": "software/json",
},
physique: JSON.stringify({
question: GET_PRODUCT_BY_SKU(sku),
}),
});
const information = await res.json();
const fetchedProduct = information.information.merchandise.gadgets[0] || null;
setProduct(fetchedProduct);
} catch (error) {
console.error(error);
} lastly {
setLoading(false);
}
};
fetchProduct();
}, [sku]);
if (loading) {
return Loading...
;
}
if (!product) {
return No product discovered.
;
}
const priceData = product.value.regularPrice.quantity;
const foreign money = "USD";
const worth = priceData?.worth;
const value = worth?.toLocaleString("en-US", {
model: "foreign money",
foreign money,
});
const gadgets = new Array(5).fill(0);
return (
{product.media_gallery && product.media_gallery.size > 0 && (
)}
{gadgets.map((ranking) => (
ranking ? "text-yellow-500 fill-yellow-500" : "text-gray-200"} h-5 w-5 flex-shrink-0`}
aria-hidden="true"
/>
))}
{merchandise.review_count} Critiques
Add Your Overview
{value}
{product?.stock_status?.exchange("_", " ")}
Sku# : {product?.sku}
);
};
export default ProductPage; 
MObile View
7. Run Your Utility:
Lastly, run your ReactJs app to see your product web page in motion:
npm begin
Conclusion
By following these steps, you’ve efficiently created a product web page utilizing React.Js that integrates seamlessly along with your Magento 2 backend.
This basis not solely shows important product data but additionally units the stage for additional enhancements.
You’ll be able to elevate the person expertise by including options similar to a buyer cart, person critiques, associated merchandise, and superior styling choices.
These additions is not going to solely enrich the performance but additionally create a extra partaking buying expertise on your clients.
Be happy to customise and increase upon this basis as wanted, tailoring it to satisfy your particular enterprise objectives and person wants. The chances are countless!
