Settings plugin

Use the settings plugin to access the item settings in raw and interpolated formats. The item settings are defined in the ./settings.json file. You can access the item settings using this methods in any Vue file of your project.

The settings plugin exposes its methods using this context:

this.$settings

Usage

You can use the settings plugin to get the item settings: the template name and ID, localization, navigation, and other information from the ./settings.json file. Use the settings plugin with the this.$settings context in a Vue file: for example, a slide index.vue file or the App.vue file in emails, landing pages, and messenger ads.

Methods

The settings plugin provides the following methods to help you access, modify, and monitor settings changes.

getRaw

The getRaw method returns the non-interpolated values (placeholders) from the ./settings.json file: you see the values exactly as they're in the repository.

this.$settings.getRaw()

get

The get method returns the interpolated settings (actual values instead of placeholders) from the ./settings.json file.

this.$settings.get()

getClmSettings

The getClmSettings method returns an object with the e-Detailer or messenger ad settings for the specified target system.

To get the settings for the specific target system, add the target system name as the parameter to the getClmSettings() method.

this.$settings.getClmSettings('clmName')

The getClmSettings method has the following parameters:

Parameter	Type	Default	Description
clmName	String	NA	Optional parameter. Specify the target system to show its settings. For example, getClmSettings('irep').

getByPath

The getByPath method returns an object with the interpolated value for specified setting in your item from the settings.json file. Add the full path to this setting as the keypath parameter to the getByPath() method to show the field value. The options, and defaultValue parameters are optional.

this.$settings.getByPath('keypath')

The getByPath method has the following parameters:

Parameter	Type	Default	Description
keypath	String	NA	Required parameter. Provide the full path to the setting in the settings.json file to show its value. For example, getByPath('navigation.swipe.slide.direction').
options	Object	{}	Optional parameter. Use this parameter to redefine the slide and chapter ID to interpolate their values. The name and id fields are available for interpolation.
defaultValue	String	NA	Optional parameter. If keypath refers to the setting that doesn't exist in the settings.json file, the value defined in the defaultValue parameter is returned. Use this parameter with the options parameter.

Usage of options

Use the options parameter with the getByPath method to redefine the slide or chapter ID. The name and id fields are available for interpolation.

this.$settings.getByPath('clms.irep.assetFileNameTemplate', {
        slide: {
            id: 'home',
        },
        chapter: {
            id: 'home',
        }
    });

Use the defaultValue parameter to define the value for the setting that doesn't exist in the settings.json file.

this.$settings.getByPath('defaultValue')

Add the options parameter and enter the defaultValue parameter that you want to return if that value doesn't exist in the ./settings.json file.

this.$settings.getByPath('test.value', options, 'defaultValue')

getRawByPath

The getRawByPath method returns an object with the non-interpolated values (placeholders) for the specified setting in your item from the ./settings.json file. This method has the same parameters as the getByPath method. The defaultValue parameter is optional.

this.$settings.getRawByPath('keypath', options, 'defaultValue')

setSettings

The setSettings method updates the item settings values stored in the browser memory at runtime. The app uses the new values set by this method instead of the values in the project ./settings.json file during the current session in the browser.

this.$settings.setSettings(settingJson)

The setSettings method has the following parameters:

Parameter	Type	Default	Description
settingJson	Object	{}	Required parameter. Redefine one or more values from the ./settings.json file at runtime.

getCurrentTheme

The getCurrentTheme method returns the value for the current theme field in the ./settings.json file.

this.$settings.getCurrentTheme()

getCurrentScheme

The getCurrentScheme method returns the value for the scheme field in the ./settings.json file. This is the color scheme for the current theme.

this.$settings.getCurrentScheme()

setCurrentTheme

The setCurrentTheme method sets the current theme and updates the settings accordingly. This method updates both the theme value and triggers the necessary DOM changes.

this.$settings.setCurrentTheme(theme)

The setCurrentTheme method has the following parameters:

Parameter	Type	Default	Description
theme	String	NA	Required parameter. The name of the theme to set as current.

setCurrentLocalization

The setCurrentLocalization method sets the current localization language and updates the i18n locale accordingly.

this.$settings.setCurrentLocalization(lang)

The setCurrentLocalization method has the following parameters:

Parameter	Type	Default	Description
lang	String	NA	Required parameter. The language code to set as current localization.

onchange

The onchange method registers a callback function that is invoked whenever the settings change. This allows you to react to settings updates in real-time.

this.$settings.onchange(handler)

The onchange method has the following parameters:

Parameter	Type	Default	Description
handler	Function	NA	Required parameter. A callback function to be executed when settings change.

The callback function receives a HookInfo object with the following structure:

Parameter	Type	Description
settings	Object	The new settings object that contains the updated settings values.
oldSettings	Object	The previous settings object before the change.

Example usage

this.$settings.onchange((info) => {
  console.log('Settings changed!');
  console.log('New settings:', info.settings);
  console.log('Old settings:', info.oldSettings);
});