درک صفحه سیستم و استفاده از رندر بخش

مقدمه:
در این آموزش، صفحات سیستم را در تم های Fynd Platform با تمرکز بر صفحه اصلی بررسی می کنیم. نحوه استفاده از آن را خواهیم فهمید SectionRenderer
جزء برای ارائه بخش های پویا، واکشی داده های لازم با استفاده از pageDataResolver
و صفحه اصلی و حل کننده را به درستی در آن ثبت کنید index.jsx
فایل با واردات پویا
1. صفحات سیستم چیست؟
صفحات سیستم صفحات از پیش تعریف شده ای هستند که برای عملکرد یک موضوع ضروری هستند، مانند صفحه اصلی، صفحه فهرست محصولات و صفحه سبد خرید. این صفحات:
- دارای مسیرهای ثابت مانند
/
برای صفحه اصلی - ذخیره می شوند در
theme/pages
دایرکتوری - باید در
index.jsx
فایل بوت استرپ
2. ساختار دایرکتوری
این home.jsx
فایل در ساختار زیر قرار دارد:
theme/
├── pages/
│ ├── home.jsx
│ ├── product-listing.jsx
│ ├── cart.jsx
│ └── other-system-pages.jsx
├── sections/
├── components/
│ └── loader.jsx
├── styles/
├── helpers/
│ └── pageDataResolver.js
├── index.jsx
3. مثال صفحه اصلی
این home.jsx
فایل طرحبندی صفحه اصلی را تعریف میکند و بخشها را به صورت پویا با استفاده از رندر میکند SectionRenderer
جزء
مثال کد برای home.jsx
:
import React from "react";
import { SectionRenderer } from "fdk-core/components";
import { useGlobalStore, useFPI } from "fdk-core/utils";
import Loader from "../components/loader/loader";
function Home() {
const fpi = useFPI();
const page = useGlobalStore(fpi.getters.PAGE) || {};
const { sections = [], error, isLoading } = page || {};
if (error) {
return (
<>
<h1>Error Occurred!h1>
<pre>{JSON.stringify(error, null, 4)}pre>
>
);
}
return (
<div className="basePageContainer margin0auto">
{!isLoading && <SectionRenderer sections={sections} />}
{isLoading && <Loader />}
div>
);
}
export default Home;
4. واکشی داده های صفحه با استفاده از pageDataResolver
این pageDataResolver
تابع مسئول واکشی داده های مورد نیاز برای صفحه است. این تضمین می کند که صفحه با جدیدترین محتوا ارائه می شود.
اجرای مثال برای pageDataResolver.js:
import { getPageSlug } from "fdk-core/utils";
export async function pageDataResolver({ fpi, router }) {
const state = fpi.store.getState();
const pageSlug = getPageSlug(router) || "home";
const currentPage = fpi.getters.PAGE(state)?.value;
if (pageSlug !== currentPage) {
await fpi.theme.fetchPage({ pageValue: pageSlug });
}
}
5. ثبت صفحه اصلی و Resolver در index.jsx
برای ادغام صفحه اصلی و صفحهDataResolver آن، از واردات پویا برای بارگذاری مدولار و کارآمد استفاده کنید.
به روز شد index.jsx
:
import { pageDataResolver } from "./helpers/pageDataResolver";
export default async () => {
return {
// Page Resolver
pageDataResolver,
// Register System Pages
getHome: () =>
import(/* webpackChunkName: "homePage" */ "./pages/home"),
// Register Other Pages Here...
};
};
6. بهترین روش ها برای ثبت نام
واردات دینامیک:
از واردات پویا با /* webpackChunkName */ Webpack برای ایجاد تکه های جداگانه برای هر جزء صفحه استفاده کنید.
ساختار مدولار:
راهنماهایی مانند pageDataResolver را در فهرست راهنمای اختصاصی سازماندهی کنید.
رسیدگی به خطا:
مطمئن شوید که pageDataResolver دادههای گمشده یا نادرست را به خوبی مدیریت میکند.
بهینه سازی داده ها:
از واکشی داده های اضافی در pageDataResolver خودداری کنید.
7. مزایای Dynamic Import و Resolver ادغام
عملکرد بهبود یافته:
صفحات فقط در صورت نیاز بارگیری می شوند و اندازه اولیه بسته را کاهش می دهد.
تعمیر و نگهداری ساده:
ساختار مدولار امکان به روز رسانی و آزمایش آسان را فراهم می کند.
تجربه کاربری پیشرفته:
رندر بخش پویا تضمین می کند که صفحات تعاملی و پاسخگو هستند.
نتیجه گیری:
صفحه اصلی به عنوان پایه موضوع شما عمل می کند و رندر بخش پویا را با واکشی موثر داده ترکیب می کند. با ثبت صحیح صفحه اصلی و حل کننده آن در index.jsx
، می توانید از یک معماری تم مقیاس پذیر و قابل نگهداری اطمینان حاصل کنید.
در آموزش بعدی، صفحات سفارشی را برای نیازهای تخصصی تاجر بررسی خواهیم کرد. در جریان باشید!