ReactJs |. Cara membuat halaman produk Magento 2 menggunakan ReactJS – Beragampengetahuan

Pelajari cara membuat halaman produk Magento 2 menggunakan ReactJs dalam lingkungan pengembangan tanpa kepala.

Dengan memanfaatkan arsitektur tanpa kepala, kami mengintegrasikan backend Magento 2 dengan React secara mulus, memungkinkan pengalaman pengguna yang lebih fleksibel dan dinamis serta potensi penuh perdagangan tanpa kepala.

memperkenalkan

Membuat halaman produk untuk toko Magento 2 Anda di React dapat memengaruhi secara signifikan apakah pengguna memutuskan untuk membeli produk Anda atau melanjutkannya.

Panduan ini memandu Anda melalui proses pembuatan halaman produk yang efisien dan ramah pengguna, lengkap dengan contoh kode dan instruksi mendetail.

Sepanjang prosesnya, Anda akan mendapatkan wawasan berharga tentang pengembangan React.js.

Anda akan mempelajari cara mendapatkan data dari Magento 2 GraphQL API, mengelola status, dan merancang tata letak responsif yang meningkatkan pengalaman berbelanja secara keseluruhan.

melaksanakan

Sekarang, mari terapkan halaman produk selangkah demi selangkah.

Siapkan halaman produk Anda menggunakan ReactJs

1. Buat proyek ReactJs Anda:

Buka terminal dan jalankan perintah berikut untuk membuat proyek React.Js baru

npx create-react-app my-magento-store
cd my-magento-store

2. Navigasikan ke direktori root:

cd my-magento-store

3. Instal paket yang diperlukan pada sistem Anda ReactJs:

Karena saya membuat ini menggunakan Tailwind, Eslint, React router dom, TypeScript:

// typescript and eslint
npm install -D typescript eslint

// tailwind css
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// react router
npm install react-router-dom

4. Siapkan kueri GraphQL:

Karena kami menggunakan Magento 2 GraphQl API. Jadi mari kita buat folder untuk kueri GraphQL. Ini membuat kode Anda tetap teratur.

mkdir src/graphql
touch src/graphql/queries.ts

//In queries.ts, you can define your GraphQL query for fetching product details:
// graphql/queries.ts

export const GET_PRODUCT_BY_SKU = (sku: string) => `
{
    products(filter: sku: eq: "$sku") {
        items 
            id
            name
            rating_summary
            review_count
            sku
            stock_status
            price 
                regularPrice 
                    amount 
                        value
                        currency
                    
                
            
            description 
                html
            
            media_gallery 
                url
            
        
    }
}
`;

5. Buat halaman produk Anda di ReactJs:

di dalam src direktori, dalam file bernama App.tsx Tambahkan struktur perutean:

import  BrowserRouter as Router, Route, Routes  from 'react-router-dom';
import ProductPage from '../components/ProductPage'; // Your product page component

function App() 
  return (
    <Router>
      <Routes>
        <Route path="/product/:sku" component=ProductPage />
        /* Other routes */
      </Routes>
    </Router>
  );


export default App;

6. Buat komponen halaman produk

mkdir src/components
touch src/components/ProductPage.tsx

Dan, tambahkan kode berikut di komponen halaman produk:

import React,  useEffect, useState  from "react";
import  GET_PRODUCT_BY_SKU  from "../graphql/queries";
import  StarIcon  from "./StarIcon";
import  HeartIcon  from "./Heart";
import  ChartBarIcon  from "./CompareIcon";
import  useParams  from "react-router-dom";
interface ProductType 
  price: any;
  media_gallery: 
    url: string;
  [];
  name: 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 () => 
      try  null;
        setProduct(fetchedProduct);
       catch (error) 
        console.error(error);
       finally 
        setLoading(false);
      
    ;

    fetchProduct();
  }, [sku]);

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

  if (!product) 
    return <div>No product found.</div>;
  

  const priceData = product.price.regularPrice.amount;
  const currency = "USD";
  const value = priceData?.value;
  const price = value?.toLocaleString("en-US", 
    style: "currency",
    currency,
  );
  const items = 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.length > 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.name
        />
      )
      <div className="flex flex-col gap-6 mt-5 lg:col-span-5">
        <h1 className="text-4xl lg:text-6xl font-extralight">product.name</h1>
        <div className="flex items-center gap-10">
          <div className="flex items-center">
            items.map((rating) => (
              <StarIcon
                key=rating
                className=`$3 > rating ? "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">item.review_count Reviews</p>
          <p className="text-sm font-medium cursor-pointer md:text-base text-sky-600 hover:text-sky-700">Add Your Review</p>
        </div>
        <div className="flex items-start justify-between">
          <h2 className="text-3xl font-medium lg:text-5xl lg:font-semibold">price</h2>
          <div>
            <p className="font-semibold">product?.stock_status?.replace("_", " ")</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>
          <input
            className="p-2 border border-gray-400 rounded-lg max-w-16"
            defaultValue=1
            type="number"
            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 compare
          </button>
        </div>
      </div>
    </div>
  );
};

export default ProductPage;

Tampilan seluler

7. Jalankan aplikasi Anda:

Terakhir, jalankan aplikasi ReactJs Anda untuk melihat halaman produk beraksi:

npm start

sebagai kesimpulan

Dengan mengikuti langkah-langkah ini, Anda telah berhasil membuat halaman produk menggunakan React.Js yang terintegrasi secara mulus dengan backend Magento 2.

Landasan ini tidak hanya menampilkan informasi produk yang penting, namun juga memberikan dasar untuk penyempurnaan lebih lanjut.

Anda dapat meningkatkan pengalaman pengguna dengan menambahkan fitur seperti keranjang belanja pelanggan, ulasan pengguna, produk terkait, dan opsi gaya lanjutan.

Penambahan ini tidak hanya akan memperkaya fungsionalitas tetapi juga menciptakan pengalaman berbelanja yang lebih menarik bagi pelanggan Anda.

Anda bebas menyesuaikan dan memperluas fondasi ini sesuai kebutuhan, menyesuaikannya untuk memenuhi sasaran bisnis spesifik dan kebutuhan pengguna Anda. Kemungkinannya tidak terbatas!