Theme file structure - XMPieLab/uStore-NG GitHub Wiki

Once a them has been downloaded and extracted, the following file structure is presented under the root:

  • skin folder – uStore’s legacy skin files, which have been adapted to support the new theme engine. These files and images are used in uStore's legacy pages, which are contained in an iframe inside the React application theme.

    Note that custom skins prior to uStore v.10.0 are not supported. All skins must be recreated on top of the out-of-the-box skin files supplied with the theme, in order to maintain functionality of variables modified through the Theme Customization editor.

  • src folder – The main source code folder for the React application.

  • config.json – The config file of the theme which contains information regarding the theme. For more information refer to Customizing the Theme Editor

  • thumbnail.png – The theme’s thumbnail, which is displayed in the uStore Back Office application when uploading the theme or when assigning it to a store. If the default thumbnail is replaced, the file name should be kept as is.

src folder

This folder contains React components with layout, logic, style and asset files, which together control the UI of the new areas of the application (homepage, header, footer). The src folder structure holds the entire React application, and contains other areas that are either environment specific (React/Next.js) or uStore specific.

  • Environment-specific – These files and folders should not be modified or removed.

    • Folders: .next, node_modules, npm_packages, out, pages.

    • All configuration files contained in the root folder.

  • assets – Assets of the application, such as fonts and images. The initial images are the default ones used in the application.

  • components – Contains most of the React code that describes the UI of the application. Its structure is hierarchical with sub folders that denote the application’s different areas (such as header). It contains React components (.js files) and their matching style files (.scss files).

  • core-components – Components which are common to the entire React application and are often repeated in more than one place. Their matching style files (.scss files) are also contained in the folder.

  • localization – Localization files for each of the out-of-the-box cultures provided with uStore. For details on how to use and modify these files, see Working with localizations.

  • routes – React components which behave as pages in the application, i.e. they can be accessed through a specific route (URL) in the application.

  • services – The theme service that initiates the custom state of the theme. It is possible to add custom services to this folder.

  • styles – Style files.

  • ustore-internal – Contains general services and specific behavior, which is internally used in the application. Do not modify or remove this folder.

Alias names for theme folders

Several folders in the theme have alias names: $assets, $core-components, $themelocalization, $routes, $themeservices (services folder), $styles, $ustoreinternal. By using alias names we ensure that the folder is accessible from all working environments (development and production). The path to these folders should be constructed using the alias names.

Examples of alias name usage:

The src\components\CategoryItem.js component contains a reference to an image in the assets folder by using the alias name $assets:

const imageUrl = model.ImageUrl ? model.ImageUrl : require('$assets/images/default.png')

The Icon component is imported into the src\components\Layout\Header\Search.js component from the core-component folder using the alias name $core-components:

import Icon from '$core-components/Icon'

The urlGenerator service is imported into the src\components\Layout\Header\Cart.js component from the ustore-internal folder using the alias name $ustoreinternal:

import urlGenerator from '$ustoreinternal/services/urlGenerator'