# JavaScript

### A working folder: `./src/scripts/`

To work with JS, a proxy server is used so that compiling files does not take much time.

I advise you to specify `preview_url` in config.yml so that there are no problems with App scripts, for example:

```yaml
preview_url: https://XXXXXXXXX.shopifypreview.com
```

If you do not specify `preview_url`, then the proxy target will be generated like this:

```javascript
`https://${shop.domain ? shop.domain : config.store}/?preview_theme_id=${config["theme_id"]}`
```

Use the `yarn watch` command to get started.
After launching, you will have a link to `localhost` through which you will work.
If you need to push all your changes to the theme, use the `yarn deploy` command.

## Features

| File   						| Automatically generated by the builder? | What keeps in itself      																| The file responsible for the logic of pulling these settings for further use 	|
|-------------------------------|:---------------------------------------:|:----------------------------------------------------------------------------------------|:------------------------------------------------------------------------------|
| `index.settings.liquid` 		| Yes 									  | Global theme settings that are defined in the file `./src/config/settings_schema.json`	| `./src/scripts/core/settings.js` 												|
| `index.objects.liquid` 		| No									  | Global theme settings and some global objects 											| `./src/scripts/core/objects.js` 												|
| `index.translations.liquid` 	| Yes									  | Translations 																			| `./src/scripts/core/translations.js` 											|

### How to use each

#### settings.js

For example, the file `./src/config/settings_schema.json` defines the following setting:

```json
{
	"type": "image_picker",
	"id": "placeholder",
	"label": "Placeholder image"
}
```

To get it from inside the JavaScript file, just import the core object and use `get` method.

`./src/scripts/components/test.js`

```javascript
import settings from "../core/settings";

settings.get("placeholder");
```

#### objects.js

In the file `index.objects.liquid` you can define whatever you need.
For example, I need to access `shop.money_format`,
for this I need to add the output of this setting inside the` index.objects.liquid` file:

```html
{
	"shop": {
		"currency": {{ shop.currency | json }}
	}
}
```

To get it from inside the JavaScript file, just import the core object and use `get` method.

`./src/scripts/components/test.js`

```javascript
import objects from "../core/objects";

objects.get("shop.currency");
```

If you need routes, you can also use the `objects.get()` method,
but we recommend using constants and the `objects.routes()` method.
In our prototype, we have already set all the necessary routes in the file `index.objects.liquid`:

```html
{
	"routes": {
		"root_url": {{- routes.root_url | json -}},
		"account_url ": {{- routes.account_url | json  -}},
		"account_login_url": {{- routes.account_login_url | json -}},
		"account_logout_url": {{- routes.account_logout_url | json -}},
		"account_register_url": {{- routes.account_register_url | json -}},
		"account_addresses_url": {{- routes.account_addresses_url | json -}},
		"collections_url": {{- routes.collections_url | json -}},
		"all_products_collection_url": {{- routes.all_products_collection_url | json -}},
		"search_url": {{- routes.search_url | json -}},
		"cart_url": {{- routes.cart_url | json -}},
		"cart_add_url": {{- routes.cart_add_url | json -}},
		"cart_change_url": {{- routes.cart_change_url | json -}},
		"cart_clear_url": {{- routes.cart_clear_url | json -}},
		"product_recommendations_url": {{- routes.product_recommendations_url | json -}},
		"checkout": "/checkout"
	}
}
```

We also already created constants for them inside the core file `./src/scripts/core/objects.js`:

```javascript
export const ROUTE_ROOT = "root_url";
export const ROUTE_ACCOUNT = "account_url";
export const ROUTE_ACCOUNT_LOGIN = "account_login_url";
export const ROUTE_ACCOUNT_LOGOUT = "account_logout_url";
export const ROUTE_ACCOUNT_REGISTER = "account_register_url";
export const ROUTE_ACCOUNT_ADDRESSES = "account_addresses_url";
export const ROUTE_COLLECTIONS = "collections_url";
export const ROUTE_ALL_PRODUCTS = "all_products_collection_url";
export const ROUTE_SEARCH = "search_url";
export const ROUTE_CART = "cart_url";
export const ROUTE_CART_ADD = "cart_add_url";
export const ROUTE_CART_CHANGE = "cart_change_url";
export const ROUTE_CART_CLEAR = "cart_clear_url";
export const ROUTE_PRODUCT_RECOMMENDATIONS = "product_recommendations_url";
export const CHECKOUT = "checkout";
```

If you need to access the routes,
all you need to do is export the constant you need and pass it as a parameter to the `objects.routes()` method.
Example:

`./src/scripts/components/test.js`

```javascript
import objects, { ROUTE_CART } from "../core/objects";

objects.routes(ROUTE_CART);
```

#### translations.js

For example, the file `./src/locales/en.default.json` defines the following translation:

```json
{
	"general": {
		"accessibility": {
			"skip_to_content": "Skip to content"
		}
	}
}
```

To get it from inside the JavaScript file, just import the core object and use `get` method.

`./src/scripts/components/test.js`

```javascript
import translations from "../core/translations";

translations.get("general.accessibility.skip_to_content");
```