对象已移动

可在此处找到该文档 ReactJs | How to create Magento 2 product page using ReactJS – New Self New Life
New Self New Life
No Result
View All Result
  • Home
  • Entertainment
  • Celebrity
  • Cinema
  • Music
  • Digital Lifestyle
  • Social Media
  • Softwares
  • Devices
  • Home
  • Entertainment
  • Celebrity
  • Cinema
  • Music
  • Digital Lifestyle
  • Social Media
  • Softwares
  • Devices
New Self New Life
No Result
View All Result
Home Softwares

ReactJs | How to create Magento 2 product page using ReactJS

by admin
11 months ago
in Softwares
ReactJs | How to create Magento 2 product page using ReactJS
Share on FacebookShare on Twitter


Discover ways to construct a Magento 2 product web page utilizing ReactJs in a headless improvement surroundings.

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 total potential of headless commerce.

Introduction

Making a product web page in React to 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 helpful insights into React.js improvement alongside the best way.

You’ll discover ways to fetch knowledge from Magento 2 GraphQL API, handle state, and design a responsive structure that enhances the general purchasing expertise.

Magento Product Page with ReactJs

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 Crucial 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 to your GraphQL queries. This retains your code organized.

mkdir src/graphql
contact src/graphql/queries.ts
//In queries.ts, you may 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
            identify
            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 referred to 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 (
    <Router>
      <Routes>
        <Route path="/product/:sku" element={ProductPage} />
        {/* Different routes */}
      </Routes>
    </Router>
  );
}

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;
  }[];
  identify: string;
  stock_status: string;
  sku: string;
  id: string;
}
const ProductPage: React.FC = () => {
  const { sku="" } = useParams<{ sku: string }>();
  const [product, setProduct] = useState<ProductType | null>(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": "utility/json",
          },
          physique: JSON.stringify({
            question: GET_PRODUCT_BY_SKU(sku),
          }),
        });

        const knowledge = await res.json();
        const fetchedProduct = knowledge.knowledge.merchandise.gadgets[0] || null;
        setProduct(fetchedProduct);
      } catch (error) {
        console.error(error);
      } lastly {
        setLoading(false);
      }
    };

    fetchProduct();
  }, [sku]);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (!product) {
    return <div>No product discovered.</div>;
  }

  const priceData = product.value.regularPrice.quantity;
  const foreign money = "USD";
  const worth = priceData?.worth;
  const value = worth?.toLocaleString("en-US", {
    type: "foreign money",
    foreign money,
  });
  const gadgets = new Array(5).fill(0);

  return (
       <div className="container relative grid items-start p-3 mx-auto font-sans sm:p-6 lg:grid-cols-12">
      {product.media_gallery && product.media_gallery.size > 0 && (
        <img
          src={product.media_gallery[0].url}
          className="relative object-contain w-screen h-full lg:col-span-7 lg:max-w-4xl aspect-square"
          alt={product.identify}
        />
      )}
      <div className="flex flex-col gap-6 mt-5 lg:col-span-5">
        <h1 className="text-4xl lg:text-6xl font-extralight">{product.identify}</h1>
        <div className="flex items-center gap-10">
          <div className="flex items-center">
            {gadgets.map((score) => (
              <StarIcon
                key={score}
                className={`${3 > score ? "text-yellow-500 fill-yellow-500" : "text-gray-200"} h-5 w-5 flex-shrink-0`}
                aria-hidden="true"
              />
            ))}
          </div>
          <p className="text-sm font-medium cursor-pointer md:text-base text-sky-600 hover:text-sky-700">{merchandise.review_count} Evaluations</p>
          <p className="text-sm font-medium cursor-pointer md:text-base text-sky-600 hover:text-sky-700">Add Your Evaluate</p>
        </div>
        <div className="flex items-start justify-between">
          <h2 className="text-3xl font-medium lg:text-5xl lg:font-semibold">{value}</h2>
          <div>
            <p className="font-semibold">{product?.stock_status?.substitute("_", " ")}</p>
            <p>Sku# : {product?.sku}</p>
          </div>
        </div>
        <hr className="w-full h-px border border-gray-200" />
        <div className="flex flex-col gap-px">
          <p className="font-normal">Qty:</p>
          <enter
            className="p-2 border border-gray-400 rounded-lg max-w-16"
            defaultValue={1}
            kind="quantity"
            min="1"
            max="100"
          />
        </div>
        <button className="w-full px-8 py-4 text-xl font-semibold text-white duration-200 lg:max-w-60 bg-sky-600 hover:bg-sky-700">
          Add to Cart
        </button>
        <div className="flex items-center gap-12">
          <button className="flex items-center justify-center w-full gap-3 text-sm font-semibold text-gray-500 uppercase cursor-pointer md:text-base max-w-fit">
            <HeartIcon className="w-5 h-5 -mt-px text-gray-500" />
            Add to wishlist
          </button>
          <button className="flex items-center justify-center w-full gap-3 text-sm font-semibold text-gray-500 uppercase cursor-pointer md:text-base max-w-fit">
            <ChartBarIcon className="w-5 h-5 -mt-px fill-gray-500" />
            Add to match
          </button>
        </div>
      </div>
    </div>
  );
};

export default ProductPage;
react.js product page desktop view

MObile View

react.js product page mobile view

7. Run Your Software:

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 together 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 comparable to a buyer cart, person evaluations, associated merchandise, and superior styling choices.

These additions won’t solely enrich the performance but additionally create a extra participating purchasing expertise to your clients.

Be at liberty to customise and increase upon this basis as wanted, tailoring it to fulfill your particular enterprise targets and person wants. The probabilities are limitless!

author-thumb



Source link

Tags: CreateMagentopageproductReactjs
Previous Post

Prince Collaborator Cat Glover Dead at 60

Next Post

Sidec Twin Accelerator aims to grow startups & SMEs in M’sia

Related Posts

Further Tab Button work and Chromium 140 – Vivaldi Browser snapshot 3787.3
Softwares

Further Tab Button work and Chromium 140 – Vivaldi Browser snapshot 3787.3

by admin
August 23, 2025
Find a Software Development Company in Europe
Softwares

Find a Software Development Company in Europe

by admin
August 24, 2025
Xero Salesforce Integration – The Definitive Guide
Softwares

Xero Salesforce Integration – The Definitive Guide

by admin
August 20, 2025
BrowserStack launches Chrome extension that bundles 10+ manual web testing tools
Softwares

BrowserStack launches Chrome extension that bundles 10+ manual web testing tools

by admin
August 18, 2025
20+ Best Titles Templates for DaVinci Resolve in 2025 — Speckyboy
Softwares

20+ Best Titles Templates for DaVinci Resolve in 2025 — Speckyboy

by admin
August 22, 2025
Next Post
Sidec Twin Accelerator aims to grow startups & SMEs in M’sia

Sidec Twin Accelerator aims to grow startups & SMEs in M'sia

Gabby Logan shares emotional family update in rare post with daughter Lois

Gabby Logan shares emotional family update in rare post with daughter Lois

  • Trending
  • Comments
  • Latest
10 Best Netflix Original Thriller Shows, Ranked

10 Best Netflix Original Thriller Shows, Ranked

June 22, 2025
I Only Have More Questions After Another Bizarre Outing With The Harrigans

I Only Have More Questions After Another Bizarre Outing With The Harrigans

April 20, 2025
‘Rust’ armorer’s involuntary manslaughter conviction upheld in fatal shooting – National

‘Rust’ armorer’s involuntary manslaughter conviction upheld in fatal shooting – National

October 1, 2024
Harvey Weinstein case judge declares mistrial on remaining rape charge – National

Harvey Weinstein case judge declares mistrial on remaining rape charge – National

June 13, 2025
Lil Nas X hospitalized in Los Angeles for ‘possible overdose,’ say reports – National

Lil Nas X hospitalized in Los Angeles for ‘possible overdose,’ say reports – National

August 22, 2025
Best AI Webcams For Video Calls In 2025

Best AI Webcams For Video Calls In 2025

August 21, 2025
Paul Walter Hauser on ‘Americana’ and Not Fitting in Hollywood

Paul Walter Hauser on ‘Americana’ and Not Fitting in Hollywood

August 20, 2025
Meta Gains New Ad Safety Certifications for Facebook and Instagram

Meta Rolls Out Changes to Its Ad Billing Settings

August 22, 2025
Snapped: Dirtybird Campout x Northern Nights (A Photo Essay)

Snapped: Dirtybird Campout x Northern Nights (A Photo Essay)

August 24, 2025
13 Famous Parents Whose Children Have Big Age Gaps

13 Famous Parents Whose Children Have Big Age Gaps

August 24, 2025
Where Is Shelley Long Now? Inside Her Quiet Life After Cheers

Where Is Shelley Long Now? Inside Her Quiet Life After Cheers

August 24, 2025
Meta To Launch Affordable AR Glasses In September

Meta To Launch Affordable AR Glasses In September

August 24, 2025
Visions’ Season 3 Puts a Stormtrooper on Death’s Door

Visions’ Season 3 Puts a Stormtrooper on Death’s Door

August 23, 2025
‘Wind Talk To Me’ Wins Best Feature At Sarajevo Film Festival

‘Wind Talk To Me’ Wins Best Feature At Sarajevo Film Festival

August 23, 2025
10 Most Iconic Animated Movie Characters Everyone Knows

10 Most Iconic Animated Movie Characters Everyone Knows

August 23, 2025
Offset Blames Cooking and More for Failed Marriage to Cardi B

Offset Blames Cooking and More for Failed Marriage to Cardi B

August 23, 2025
New Self New Life

Your source for entertainment news, celebrities, celebrity news, and Music, Cinema, Digital Lifestyle and Social Media and More !

Categories

  • Celebrity
  • Cinema
  • Devices
  • Digital Lifestyle
  • Entertainment
  • Music
  • Social Media
  • Softwares
  • Uncategorized

Recent Posts

  • Snapped: Dirtybird Campout x Northern Nights (A Photo Essay)
  • 13 Famous Parents Whose Children Have Big Age Gaps
  • Where Is Shelley Long Now? Inside Her Quiet Life After Cheers
  • Home
  • Disclaimer
  • DMCA
  • Privacy Policy
  • Cookie Privacy Policy
  • Terms and Conditions
  • Contact us

Copyright © 2021 New Self New Life.
New Self New Life is not responsible for the content of external sites. slotsfree  creator solana token

No Result
View All Result
  • Home
  • Entertainment
  • Celebrity
  • Cinema
  • Music
  • Digital Lifestyle
  • Social Media
  • Softwares
  • Devices

Copyright © 2021 New Self New Life.
New Self New Life is not responsible for the content of external sites.

New Self New Life