Configuration

When the Twilight JS SDK is first loaded, the initialization procedure is used to obtain the necessary configuration settings. The developer has the ability to configure the Twilight engine to meet the needs of his theme

TIP

✅ Twilight JS SDK can be customized by selecting from a number of different configurations. When the SDK is first initialised, the configurations are set to their default values.
✅ In the case of using these configurations in a separate project other than the theme's pages, the SDK needs to be initialized via salla.init().

In this article, we will explore the different parts of the Twilight JS SDK.

📙 What you'll learn

Configurations

Usage

Set SDK's configurations

Get SDK's configurations

Configurations

Here is a comprehensive list of all of the available configurations:

Twilight JS SDK - List of the available configurations

maintenance

enum<boolean>

optional

The merchant storefront cannot be accessed when this value is true.

Allowed values:

truefalse

debug

enum<boolean>

optional

When the debug mode is enabled and set to true, this means that the developer can track any changes in variables and methods.

Allowed values:

truefalse

events

object

optional

The key-pair for event name and event value.

Additional properties

integer | number | string | boolean

optional

store

object

required

The object that contains the store data

url

string

required

Url link of the store.

Example:

https://my_store.test/

number

required

Id number of the store.

Example:

12345

logo

string

optional

Path to the logo of the store.

Example:

https://my_store.test/store_logo.png

name

string

optional

Name of the store that will be displayed in the store website.

Example:

Coach .co

settings

object

optional

This object for basic settings for the theme.

user

object

optional

The object is read-only. It contains the user data, which will be set upon the user's login.

type

enum<string>

optional

The type of the user.

Allowed values:

userguest

string

optional

Email address of the user.

Example:

[email protected]

mobile

string

optional

Mobile number of the user.

Example:

+9665123456

language_code

string

optional

Current user language.

Example:

currency_code

string

optional

Code of the currency.

Example:

SAR

country_code

string

optional

User or guest country code.

Example:

theme

object

optional

Object contains theme data.

name

string

optional

Name of the theme.

mode

enum<string>

optional

Mode of the theme.

Allowed values:

livepreview

translations_hash

string

optional

A unique string of characters that is given for verification purposes.

color

object

optional

The object contains the details of the theme colors list.

languages()

array [object {5}]

Promise

optional

Promise contains array of objects for the store's languages.

name

string

optional

Name of the language.

code

string

optional

Code of the language.

url

string

optional

Url link of the language.

is_rtl

string

optional

The language is read right to left or left to right.

country_code

string

optional

Code of the country flag.

currencies()

array [object {5}]

optional

Promise contains array of objects for the store's currencies.

code

string

optional

Code of the currency.

Example:

SAR

name

string

optional

Name of the country.

Example:

ريال سعودي

symbol

string

optional

Symbol of the currency.

Example:

amount

number

optional

Amount of the curency.

country_code

string

optional

Country code of the currency, lower first two letters from currency code.

Example:

page

object

optional

Page object details

title

string

optional

Page title. May include html tags

slug

string

optional

the part of a URL that identifies a particular page
in an easy-to-read form

number

optional

Id of the page.

Usage

As we stated before, the developer can configure the Twilight engine to meet the requirements of his theme.

Set SDK's configurations

In general, the configuration can be set during the SDK initialization by calling salla.init(). Also, after the initialization, the developer can set any of the confiurations by calling the method salla.config.set(). Following, we see how the developer would be able to set the SDK configurations using each of these ways.

Set store configuration

Here is an example of how to set any value related to the store via the salla.init() method.

Similarly, we can see below how to set any value related to the store via the salla.config.set() method.

Set theme configuration

Here is an example of how to set any value related to the theme via the salla.init() method.

Get SDK's configurations

Similarly, the developer can use the salla.config.get() method to retrieve any value from the configuration file. For example, the user.id can be retrieved using the syntax below.

Furthermore, for the currencies and languages, the following syntax can be followed:

Similarly, the list of the available laguges can be retrieved as follows:

📙 What you'll learn#

Configurations#

Usage#

Set SDK's configurations#

Set store configuration#

Set theme configuration#

Get SDK's configurations#

📙 What you'll learn

Configurations

Usage

Set SDK's configurations

Set store configuration

Set theme configuration

Get SDK's configurations