Theme Pages
Theme Pages are React components which are mounted at route level by the Theme rendering engine. These components support adding static methods like serverFetch
for resolving server side data, it also supports adding static methods like serverFetch
and AuthGuard. All Theme pages must be returned from the bootstrapping function in index.jsx
file.
The primary types of theme pages are: System Pages, Custom Pages, Section Pages and Marketing Pages.
serverFetch
The serverFetch
is an async function which is called during server side rendering, developers can add any async data resolvers that must be resolved on the server before rendering the current page.
The syntax for serverFetch
function:
function serverFetch({ fpi, router }) : Promise<any>
Theme pages must be exported as default components from the pages directory. In the ~/theme/index.jsx
file, the page should be returned from within the default exported bootstrap function. To create a separate chunk for the page, developers can use Webpack’s dynamic import()
syntax to load the component asynchronously.
Make sure the webpack's ChunkName matches the key for the component in the returned object.
Example for Product listing page
import React from 'react';
import { useGlobalStore } from 'fdk-core/utils';
const ProductListing = ({ fpi }) => {
// Store Data is available using useGlobalStore
const productLists = useGlobalStore(fpi.getters.PRODUCTS) || {};
// Use `fpi` to fetch data from SDK and update store
// This is an example implementation
useEffect(() => {
if (!productLists) {
fpi.products.fetchProducts({});
}
}, [productLists])
return (
<>
{
// Return UI based on store data
}
</>
);
};
ProductListing.serverFetch = async ({ fpi, router }) => {
const queries = router.filterQuery;
let defaultQuery = {
pageNo: 1,
pageSize: 12,
};
defaultQuery = { ...defaultQuery, ...queries };
return fpi.products.fetchProductListing(defaultQuery);
};
export default ProductListing;
And in index.jsx
file,
import FPIClient from "fdk-store";
import customTemplates from "./custom-templates";
import "./styles/base.less";
import sections from "./sections";
import Header from "./components/header/header";
import Footer from "./components/footer/footer";
import { globalDataResolver, pageDataResolver } from "./lib"
export default async ({
applicationID,
applicationToken,
domain,
storeInitialData,
}) => {
const fpiOptions = {
applicationID,
applicationToken,
domain,
storeInitialData,
};
const { client: fpi } = new FPIClient(fpiOptions);
return {
fpi,
sections,
customTemplates,
globalDataResolver,
pageDataResolver,
getHeader: () => Header,
getFooter: () => Footer,
getProductListing: () =>
import(/* webpackChunkName:"getProductListing" */ "./pages/product-listing"),
// ... other pages
};
};