Page Configuration

Page Configuration List:

Configuration Details

SSR Support

• Indicates whether Server-Side Rendering (SSR) is supported for this page.

Route

• Defines the URL route at which the page is accessible.

Key Name

• A unique name used to define routes and the corresponding component to be rendered on that route.

File Location in Theme

• File path where the component should be defined in the theme.

File Name

• The name of the component that must be given. "Mandatory" indicates that it must be named exactly as specified to ensure compatibility with the theme engine.

Page Name	SSR Support	Route	Key Name	File location in Theme	File Name
Home page	TRUE	'/'	getHome	./pages/home	home.jsx
---	---	---	---	---	---
Products page	TRUE	'/products'	getProductListing	pages/product-listing	product-listing.jsx
Brands page	TRUE	'/brands'	getBrands	pages/brands	brands.jsx
Brand page	TRUE	'/brands/:department'	getBrands	pages/brands	brands.jsx
FAQ page	FALSE	'/faq'	getFaq	pages/faq	faq.jsx
FAQ Item page	FALSE	'/faq/:slug'	getFaqCategory	pages/faq-category	faq-category.jsx
Categories page	TRUE	'/categories'	getCategories	pages/categories	categories.jsx
Category list page	TRUE	'/category/:slug'	getCategoryListing	pages/category-listing	category-listing.jsx
About Us page	TRUE	'/about-us'	getAboutUs	pages/about-us	about-us.jsx
Compare page	TRUE	'/compare'	getCompareProducts	./page-layouts/compare	compare.jsx
Wishlist page	FALSE	'/wishlist'	getWishlist	pages/wishlist	wishlist.jsx
Privacy Policy page	TRUE	'/privacy-policy'	getPrivacyPolicy	pages/policy	policy.jsx
Shipping Policy page	TRUE	'/shipping-policy'	getShippingPolicy	pages/shipping-policy	shipping-policy.jsx
Return Policy page	TRUE	'/return-policy'	getReturnPolicy	pages/return-policy	return-policy.jsx
Term and Condition page	TRUE	'/terms-and-conditions'	getTnc	pages/tnc	tnc.jsx
Locate Us page	TRUE	'/locate-us'	getLocateUs	./pages/locate-us	locate-us.jsx
Login page	FALSE	'auth/login'	getLogin	./pages/login	login.jsx
Register page	FALSE	'auth/register'	getRegister	./pages/register	register.jsx
Forgot password page	FALSE	'auth/forgot-password'	getForgotPassword	./pages/forgot-password	forgot-password.jsx
Set password page	FALSE	'auth/set-password'	getSetPassword	./pages/set-password	set-password.jsx
Edit profile Page	FALSE	'auth/edit-profile'	getEditProfile	./pages/edit-profile	edit-profile.jsx
Verify Mobile Page	FALSE	'auth/verify-mobile'	getVerifyMobile	./pages/verify-mobile	verify-mobile.jsx
Verify Email Page	FALSE	'auth/verify-email'	getVerifyEmail	./pages/verify-email	verify-email.jsx
Verify Email Link Page	FALSE	'auth/verify-email-link'	getVerifyEmailLink	./pages/verify-email-link	verify-email-link.jsx
Profile Address Page	FALSE	'profile/address'	getProfileAddress	./pages/profile-address	profile-address.jsx
Profile Details Page	FALSE	'profile/details'	getProfileDetails	./pages/profile-details	profile-details.jsx
Profile Orders Page	FALSE	'profile/orders'	getOrdersList	./pages/orders-list	orders-list.jsx
Profile Refer and Earn Page	FALSE	'profile/refer-earn-credit'	getReferEarn	./pages/refer-earn-history	refer-earn-history.jsx
Profile tabs page	FALSE	'/profile/profile-tabs'	getProfile	./page-layouts/profile/profile-tabs	profile/profile-tabs.jsx
Profile Phone page	FALSE	'/profile/phone'	getProfilePhone	./page-layouts/profile/phone	profile/phone.jsx
Profile Email page	FALSE	'/profile/email'	getProfileEmail	./page-layouts/profile/email	profile/email.jsx
Profile My order shipment page	FALSE	'profile/orders/shipment/:shipmentId'	getShipmentDetails	./page-layouts/profile/ProfileMyOrderShipmentPage	profile/ProfileMyOrderShipmentPage.jsx
Profile shipment Update page	FALSE	'profile/orders/shipment/update/:shipmentId/:type'	getShipmentUpdate	./page-layouts/profile/ProfileShipmentUpdatePage	profile/ProfileShipmentUpdatePage.jsx
Profile cards Page	FALSE	'profile/my-cards'	getProfileCard	./page-layouts/profile/ProfileCardsPage	profile/ProfileCardsPage.jsx
Blog Listing page	TRUE	'/blog	getBlog	./pages/blog	blog.jsx
Blog page	TRUE	'/blog/:slug'	getBlogPage	./components/blog/BlogPage	BlogPage.jsx
Refund page	TRUE	'/refund/order/:orderId/shipment/:shipmentId'	getRefund	./components/refund	refund.jsx
Payment Link page	TRUE	'/payment/link/:id'	getPaymentLink	./components/PaymentLink	PaymentLink.jsx
Form Item page	TRUE	'/form/:slug'	getFormItem	./components/FormItem	FormItem.jsx
Cart Bag page	FALSE	'/cart/bag'	getCart	./pages/cart-landing	cart-landing.jsx
Cart Checkout page	FALSE	'/cart/checkout'	getSinglePageCheckout	./pages/single-page-checkout	single-page-checkout.jsx
Order Status page	FALSE	'/cart/order-status'	getOrderStatus	./pages/order-status	order-status.jsx
Order Tracking page	FALSE	'/order-tracking'	getOrderTracking	./pages/order-tracking-details	order-tracking-details.jsx
Order Tracking Details page	FALSE	'/order-tracking/:orderId'	getOrderTrackingDetails	./page-layouts/orderid-tracking-details	orderid-tracking-details.jsx
Shipment page	FALSE	'/order-tracking/:orderId/:shipmentId'	getOrderTrackingDetails	./page-layouts/order-shipment-details	order-shipment-details.jsx
Contact Us page	TRUE	'/contact-us'	getContactUs	./pages/contact-us	contact-us.jsx
Order page	FALSE	'/orders'	getOrderTrackingDetails	./components/order	order.jsx
Marketing page	TRUE	'/page/:slug'	getMarketing	./page-layouts/marketing/markting-page	markting-page.jsx

Example for a Product Listing Page

import React from 'react';
/**
 * "fdk-core/utils" is a dynamically injected module and hence 
 * does not need to be installed with npm.
 */
import { useGlobalStore, useFPI } from 'fdk-core/utils';

const ProductListing = () => {

  const fpi = useFPI();

  // 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
      }
    </>
  );
};

/**
 * Page Components support this static method to resolve data server side.
 */
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 then 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
  };
};