Custom Pages: Uses and Creation

Introduction:

Welcome to the next tutorial in the Fynd Platform Theme Development series. In this session, we’ll dive into custom pages, their uses, and how to create them. Custom pages are mounted under the /c/ route prefix, with flexibility to define paths after /c/. By the end of this tutorial, you’ll know how to create, register, and render custom pages seamlessly.

1. What Are Custom Pages?

Custom pages are React components designed for unique use cases where existing system pages don’t suffice. They are accessible through routes prefixed with /c/, and the segments after /c/ are fully customizable.

Key Features:

• Mounted under /c/ (e.g., /c/author).
• Fully customizable paths after /c/.
• Ideal for promotional pages, brand-specific layouts, or forms.

2. Directory Structure for Custom Pages

Custom pages are stored in the custom-templates directory within your theme. Here's the recommended structure:

theme/
├── custom-templates/
│   ├── author.jsx
│   ├── about.jsx
│   └── index.jsx
├── pages/
├── sections/
├── components/
├── styles/
├── index.jsx

3. Creating a Custom Page

Step 1: Define the Page Component
Create a new file, for example, author.jsx, in the custom-templates directory.

import React from "react";
import { useParams } from "react-router-dom";

function Author() {
  const { userId } = useParams(); // Fetch route parameters if needed

  return (
    <div>
      <h1>Author Profile</h1>
      <p>Welcome to the author page of user {userId}</p>
    </div>
  );
}

Author.serverFetch = async ({ fpi, router }) => {
  const { userId } = router.params;
  return apiCallToFetchAuthor({ userId });
};

export default Author;

4. Registering Custom Pages

Custom pages must be registered in the custom-templates/index.jsx file using React Router's dynamic routing.

Example index.jsx:

import React from "react";
import { Route } from "react-router-dom";
import Author from "./author";
import About from "./about";

export default [
  <Route path="/c/author/:userId" element={<Author />} />,
  <Route path="/c/about" element={<About />} />,
];

5. Adding Custom Pages to index.jsx

Register the custom pages in the theme's index.jsx bootstrap file.

Example index.jsx:

import customTemplates from "./custom-templates";

export default async () => {
  return {
    customTemplates,
    // other keys...
  };
};

6. Fetching Data with serverFetch

Custom pages can fetch data dynamically using the serverFetch static method in the component. This method is executed during server-side rendering.

Example: Using serverFetch

Author.serverFetch = async ({ fpi, router }) => {
  const { userId } = router.params;
  return fpi.users.fetchUserData({ userId });
};

7. Best Practices

Reusable Components:
Create shared components for consistent functionality across custom pages.

Error Handling:
Ensure custom pages handle missing or incorrect data gracefully.

SEO Optimization:
Add metadata such as titles and descriptions for custom pages.

8. Real-Life Use Cases

Promotional Pages:
Use custom pages for limited-time offers or special campaigns.

Brand Pages:
Design unique layouts to showcase specific brands.

Custom Forms:
Create pages for feedback, surveys, or other custom inputs.

9. Benefits of Custom Pages

Controlled Flexibility: Routes are under /c/, but the segments after /c/ are fully customizable.
Scalability: Integrate unique features or layouts.
Personalization: Tailor pages to specific user or merchant needs.

Conclusion:

Custom pages empower developers to create unique, purpose-driven pages with routes defined under /c/. By using serverFetch, you can dynamically load data and enhance the functionality of these pages.

In the next tutorial, we’ll explore marketing pages and their integration. Stay tuned!