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

مقدمه:

در این آموزش، صفحات سیستم را در تم های 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، می توانید از یک معماری تم مقیاس پذیر و قابل نگهداری اطمینان حاصل کنید.

در آموزش بعدی، صفحات سفارشی را برای نیازهای تخصصی تاجر بررسی خواهیم کرد. در جریان باشید!