Theme Page

Theme Pages are React components which are mounted at route level by the Theme rendering engine. These components supports adding static methods like ServerFetch and AuthGuard. All Theme pages must be returned from the bootstrapping function in index.jsx file.

Types of Pages

The primary types of theme pages are:

1. Custom Template
2. Marketing Pages
3. System Pages
4. Section Pages

Custom Template

Custom templates are React Components that you can use in your theme if none of the available system pages meets your requirements. These pages are mounted at path: /c/page-name. An instance of the FDK Store Client (fpi) is available in case the component needs to display any data in the UI.

Create a Custom Template

It is required to create two files in .jsx format, for example, profile.jsx and index.jsx in /theme/custom-templates. Then import the profile component inside index.jsx file.

note

This router method is only supported by a custom template.

Example 1

1. For the file named as index.jsx:

import React from "react";
import { Route, Outlet } from "react-router-dom";
import Cart from "./cart";
import Profile from "./profile";

export default [
  <Route path="profile" element={<Profile />} />
  <Route path="cart" element={<Cart />} />,
];

2. For the file named as profile.jsx:

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

function Profile(props) {
    const { fpi } = props
    const parms = useParams()
    return (
        <div>
            <h1 style={{ color: 'red' }}>This is a custom page for Profile in flow</h1>
            <hr />
        </div>
    );
}
Profile.serverFetch = ({ router }) => {
};
export default Profile;

Example 2

note

This is an example in the nested format.

For the file named as index.jsx:

import React from "react";
import { Route, Outlet } from "react-router-dom";
import Cart from "./cart";
import Profile from "./profile";

export default [
  <Route path="cart" element={<Cart />} />,
  <Route path="user" element={<Outlet />}>
    <Route path="profile" element={<Profile />} />
  </Route>,
];

For more details follow: React Router V6.4

When you serve the site locally, you can view this page at http://localdev.fynd.com:5000/c/profile. The profile part in the route comes from the key in the default exported object.

Marketing Pages

Marketing pages on a website are designed to promote products or services, engage visitors, and convert them into customers through compelling content and calls to action. A marketing page is an HTML page that you can add to your application. You can use these pages to customize your application's home page and other use cases. You create marketing pages from the marketing section under the Fynd Commerce. You can create these pages by using a drag-and-drop editor or writing your own HTML & CSS code. A typical use case of these pages is when you create your home page with Web Flow or Wix then copy and paste the code into the marketing page to use in your application.

To view your marketing page you can visit domain/page/:page-slug.

System Pages

System pages are essential components of a website or application that serve specific functions crucial to the overall user experience and system operation. They are predefined and are integral to the core functionality of the site.

System Pages are pages that are mounted on certain predefined routes like Product Listing, Product Description, etc. These pages must be placed in theme > pages. Theme Pages must be exported as the default component from within the pages directory. In the ~/theme/index.jsx file, the page must be returned from within the default exported bootstrap function. To create a separate chunk for this chunk, developers can use Webpack’s dynamic import syntax to import the component. NOTE: Make sure the chunk name matches the key for the component in the returned object.

Section Pages

Section pages are a collection of sections that are created by the seller on the theme editor. It can render configurable Sections from the theme editor in the Fynd Commerce. To create a section page, click Add Section Page in the pages dropdown in the theme editor.