System Page Understanding and Using Section Renderer

Introduction:

In this tutorial, we’ll explore system pages in Fynd Platform themes, focusing on the Home Page. We will understand how to use the SectionRenderer component to render dynamic sections, fetch necessary data using pageDataResolver, and correctly register the Home Page and resolver in the index.jsx file with dynamic imports.

1. What Are System Pages?

System pages are predefined pages essential to a theme's functionality, such as the homepage, product listing page, and cart page. These pages:

• Have fixed routes like / for the homepage.
• Are stored in the theme/pages directory.
• Must be registered in the index.jsx bootstrap file.

2. Directory Structure

The home.jsx file is located in the following structure:

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 Page Example

The home.jsx file defines the homepage layout and renders sections dynamically using the SectionRenderer component.

Code Example for 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. Fetching Page Data Using pageDataResolver

The pageDataResolver function is responsible for fetching data needed for the page. This ensures the page renders with the latest content.

Example Implementation for 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. Registering the Home Page and Resolver in index.jsx

To integrate the Home Page and its pageDataResolver, use dynamic imports for modular and efficient loading.

Updated 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. Best Practices for Registration

Dynamic Imports:
Use dynamic imports with Webpack’s /* webpackChunkName */ to create separate chunks for each page component.

Modular Structure:
Organize helpers like pageDataResolver in a dedicated helpers directory.

Error Handling:
Ensure that the pageDataResolver handles missing or incorrect data gracefully.

Data Optimization:
Avoid fetching redundant data in the pageDataResolver.

7. Benefits of Dynamic Import and Resolver Integration

Improved Performance:
Pages are loaded only when required, reducing the initial bundle size.

Simplified Maintenance:
Modular structure allows easy updates and testing.

Enhanced User Experience:
Dynamic section rendering ensures pages are interactive and responsive.

Conclusion:

The Home Page serves as the foundation of your theme, combining dynamic section rendering with effective data fetching. By registering the Home Page and its resolver correctly in index.jsx, you can ensure a scalable and maintainable theme architecture.

In the next tutorial, we’ll explore custom pages for specialized merchant requirements. Stay tuned!