Skip to main content

Custom Template

What is a 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.

How to 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
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 />} />,
];

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.