Boilerplate Overview

A boilerplate is a pre-written codebase that speeds up development by providing a foundational template for building themes. The theme boilerplate serves as a foundation for building and deploying a theme on Fynd Commerce.

Theme Directory Structure

├── .fdk
├── themes
│   ├── assets
│   ├── components
│   ├── config
│   ├── constants
│   ├── custom-templates
│   ├── helper
│   ├── page-layouts
│   ├── pages
│   ├── sections
│   ├── styles
│   └── index.jsx
├── .eslintrc.js
├── .gitignore
├── config.json
├── package-lock.json
├── package.json
├── README.md
└── webpack.config.js

The following sub-directories and files that a boilerplate will have:

1. index.jsx: This is the entry file for the React theme. It consists of a default exported function that bootstraps the theme bundle object in the engine.
2. config: This directory contains two config files for a theme, namely: settings_data.json and settings_schema.json.
3. custom-templates: All the custom templates of a theme are placed in this folder. Refer to Custom Pages more details.
4. pages: All the system pages are to be kept in this folder. Any other file which does not correspond to a system page name may throw error during theme sync. Refer to System Pages for more details
5. sections: It contains re-usable section components which are a part of the current theme. Refer to Sections and Section Pages for more details.

The following directories and files are optional and can be included based on the specific needs of your theme:

• page-layouts: Organize your page layout components.
• helper: Store utility functions or helper methods.
• styles: Manage theme-specific styles.
• constants: Define constants for your theme.
• components: Include reusable components specific to the theme.
• .eslintrc.js: ESLint configuration file for linting.
• .gitignore: File to specify untracked files for Git.

tip

To enhance the customization experience for sellers, you can use JSON based configurations that are accessible through the Fynd Commerce theme editor.

By leveraging these configurations, you can define and organize various theme settings in a structured format that sellers can easily modify. This allows them to customize the appearance and behavior of their themes without directly editing the underlying code. The JSON-based configurations provide a user-friendly interface within the theme editor, empowering sellers to make personalized adjustments to their themes effortlessly.

Config Files

Config files are related to theme settings. There are two config files:

• settings_data.json: This file hosts the saved values of the settings from settings_schema.json.
• settings_schema.json

settings_data.json

The settings_data.json file serves as a container for the setting values in a theme. This file contains all the theme-level global settings. It allows you to define various settings that can be accessed and modified through the theme editor section of the Fynd Commerce.

For instance, you can include the following theme setting in the settings_data.json file to provide the seller with the option to disable the cart:

{
  "name": "Disable Cart",
  "key": "disable_cart",
  "type": "boolean",
  "default": false,
  "description": "Enable or disable the cart functionality."
}

In this example, the setting is named "Disable Cart" and has a unique key of "disable_cart". It is defined as a boolean type, indicating that it has a true/false value. The default value is set to false, meaning the cart functionality is enabled by default. The description provides additional information about the setting's purpose.

By including this setting in the settings_data.json file, the seller can access and toggle the cart functionality on or off directly from the theme editor section, providing them with greater control over their store's customization options.

config/settings_data.json

{
    "props": [
      {
        "type": "checkbox",
        "id": "disable_cart",
        "default": false,
        "category": "Cart",
        "label": "Disable Cart"
      }
    ]
}

This adds an entry for disable_cart in settings_data.json

      .....
         "custom": {
          "props": {
            "disable_cart": false
          }
        }
     .....

Anytime you change the value of disable_cart in the theme editor, settings_data.json is updated with the new value.

Basic Format

The settings_data.json file has four parent objects:

• list : It contains current values of all page level settings and theme level settings.
• current : Contains current active settings name
• preset: Contains all the presets of the theme by their page name so that whenever someone creates a new theme all theme pages have some default pre-configured sections inside of them.
• information: General Information about the theme-like features and once you publish your theme on the Themes Marketplace it can be helpful to highlight your theme features.

Access this Configurations Inside Theme

This configuration will be accessible via global_config in theme.config. See the following code reference to see how it can be used in a theme.

Example

import { useGlobalStore, useFPI } from "fdk-core/utils";

const useFooter = () => {
  const fpi = useFPI();
  const THEME = useGlobalStore(fpi.getters.THEME);

  return {
    footerProps: THEME?.config?.list?.[0]?.global_config?.custom?.props
  };
};

export default useFooter;