Global Configurations

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

By leveraging these configurations, you can define and organize various theme settings in a structured format that can be easily modified by merchants. 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 merchants to make personalized adjustments to their themes effortlessly.

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- This file contains all the theme-level global settings.

settings_data.json

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

For instance, you can include the following theme setting in the settings_data.json file to provide the merchant 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 merchant 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"
      }
    ]
}

Figure 1

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;