Skip to main content

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 NameSSR SupportRouteKey NameFile location in ThemeFile Name
Home pageTRUE'/'getHome./pages/homehome.jsx
------------------
Products pageTRUE'/products'getProductListingpages/product-listingproduct-listing.jsx
Brands pageTRUE'/brands'getBrandspages/brandsbrands.jsx
Brand pageTRUE'/brands/:department'getBrandspages/brandsbrands.jsx
FAQ pageFALSE'/faq'getFaqpages/faqfaq.jsx
FAQ Item pageFALSE'/faq/:slug'getFaqCategorypages/faq-categoryfaq-category.jsx
Categories pageTRUE'/categories'getCategoriespages/categoriescategories.jsx
Category list pageTRUE'/category/:slug'getCategoryListingpages/category-listingcategory-listing.jsx
About Us pageTRUE'/about-us'getAboutUspages/about-usabout-us.jsx
Compare pageTRUE'/compare'getCompareProducts./page-layouts/comparecompare.jsx
Wishlist pageFALSE'/wishlist'getWishlistpages/wishlistwishlist.jsx
Privacy Policy pageTRUE'/privacy-policy'getPrivacyPolicypages/policypolicy.jsx
Shipping Policy pageTRUE'/shipping-policy'getShippingPolicypages/shipping-policyshipping-policy.jsx
Return Policy pageTRUE'/return-policy'getReturnPolicypages/return-policyreturn-policy.jsx
Term and Condition pageTRUE'/terms-and-conditions'getTncpages/tnctnc.jsx
Locate Us pageTRUE'/locate-us'getLocateUs./pages/locate-uslocate-us.jsx
Login pageFALSE'auth/login'getLogin./pages/loginlogin.jsx
Register pageFALSE'auth/register'getRegister./pages/registerregister.jsx
Forgot password pageFALSE'auth/forgot-password'getForgotPassword./pages/forgot-passwordforgot-password.jsx
Set password pageFALSE'auth/set-password'getSetPassword./pages/set-passwordset-password.jsx
Edit profile PageFALSE'auth/edit-profile'getEditProfile./pages/edit-profileedit-profile.jsx
Verify Mobile PageFALSE'auth/verify-mobile'getVerifyMobile./pages/verify-mobileverify-mobile.jsx
Verify Email PageFALSE'auth/verify-email'getVerifyEmail./pages/verify-emailverify-email.jsx
Verify Email Link PageFALSE'auth/verify-email-link'getVerifyEmailLink./pages/verify-email-linkverify-email-link.jsx
Profile Address PageFALSE'profile/address'getProfileAddress./pages/profile-addressprofile-address.jsx
Profile Details PageFALSE'profile/details'getProfileDetails./pages/profile-detailsprofile-details.jsx
Profile Orders PageFALSE'profile/orders'getOrdersList./pages/orders-listorders-list.jsx
Profile Refer and Earn PageFALSE'profile/refer-earn-credit'getReferEarn./pages/refer-earn-historyrefer-earn-history.jsx
Profile tabs pageFALSE'/profile/profile-tabs'getProfile./page-layouts/profile/profile-tabsprofile/profile-tabs.jsx
Profile Phone pageFALSE'/profile/phone'getProfilePhone./page-layouts/profile/phoneprofile/phone.jsx
Profile Email pageFALSE'/profile/email'getProfileEmail./page-layouts/profile/emailprofile/email.jsx
Profile My order shipment pageFALSE'profile/orders/shipment/:shipmentId'getShipmentDetails./page-layouts/profile/ProfileMyOrderShipmentPageprofile/ProfileMyOrderShipmentPage.jsx
Profile shipment Update pageFALSE'profile/orders/shipment/update/:shipmentId/:type'getShipmentUpdate./page-layouts/profile/ProfileShipmentUpdatePageprofile/ProfileShipmentUpdatePage.jsx
Profile cards PageFALSE'profile/my-cards'getProfileCard./page-layouts/profile/ProfileCardsPageprofile/ProfileCardsPage.jsx
Blog Listing pageTRUE'/bloggetBlog./pages/blogblog.jsx
Blog pageTRUE'/blog/:slug'getBlogPage./components/blog/BlogPageBlogPage.jsx
Refund pageTRUE'/refund/order/:orderId/shipment/:shipmentId'getRefund./components/refundrefund.jsx
Payment Link pageTRUE'/payment/link/:id'getPaymentLink./components/PaymentLinkPaymentLink.jsx
Form Item pageTRUE'/form/:slug'getFormItem./components/FormItemFormItem.jsx
Cart Bag pageFALSE'/cart/bag'getCart./pages/cart-landingcart-landing.jsx
Cart Checkout pageFALSE'/cart/checkout'getSinglePageCheckout./pages/single-page-checkoutsingle-page-checkout.jsx
Order Status pageFALSE'/cart/order-status'getOrderStatus./pages/order-statusorder-status.jsx
Order Tracking pageFALSE'/order-tracking'getOrderTracking./pages/order-tracking-detailsorder-tracking-details.jsx
Order Tracking Details pageFALSE'/order-tracking/:orderId'getOrderTrackingDetails./page-layouts/orderid-tracking-detailsorderid-tracking-details.jsx
Shipment pageFALSE'/order-tracking/:orderId/:shipmentId'getOrderTrackingDetails./page-layouts/order-shipment-detailsorder-shipment-details.jsx
Contact Us pageTRUE'/contact-us'getContactUs./pages/contact-uscontact-us.jsx
Order pageFALSE'/orders'getOrderTrackingDetails./components/orderorder.jsx
Marketing pageTRUE'/page/:slug'getMarketing./page-layouts/marketing/markting-pagemarkting-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
  };
};

Was this section helpful?