js.md

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:

preview_url: https://XXXXXXXXX.shopifypreview.com

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

`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:

{
	"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

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:

{
	"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

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:

{
	"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:

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

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:

{
	"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

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

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