Layout Engine SDK

The Layout Engine SDK is a powerful toolkit for building layout engines. It provides a locally develop environment for SHOPLINE merchant

Installation

You can install the Layout Engine SDK via npm:

npm i -g layout-engine-sdk

Or just use npx to execute the command:

npx layout-engine-sdk

Usage

Create a new layout engine project

mkdir layout-engine-project
cd layout-engine-project
npx layout-engine-sdk project-init

The command will perform the following tasks:

• Initialize a new git repository in the current directory.
• Create a .gitignore file with common files and directories to be ignored in version control.
• Create a .prettierrc file with predefined formatting rules for code styling.
• Initialize account.json file
• Download the remote liquid files.

Get access tokens

npx layout-engine-sdk init

During the initialization process, you will be prompted to provide the following information:

• Email: Your email address with the SHOPLINE
• Password: Your password for the SHOPLINE
• Handle: Your unique handle for identification
• Merchant ID: The ID of the merchant with the SHOPLINE

Once you provide these details, the layout-engine-sdk will retrieve an access token that allows you to interact with the SHOPLINE API.

Please note that the access token has a validity period of one day.

Prerequisites

To use the project-init command, ensure that you have the following prerequisites installed:

• git: Install git on your system to initialize the git repository.

Refresh access tokens

npx layout-engine-sdk token-refresh

Download liquid files

npx layout-engine-sdk download

Upload liquid files

npx layout-engine-sdk upload

Upload liquid files by git diff

Will compare the branch name and the current branch changed file

branch name: default value is master

npx layout-engine-sdk upload-diff [branch name]

Publish liquid files

npx layout-engine-sdk publish

Publish liquid files by filename

• Will use regular expressions(regexp) to match filenames
• Please use spaces to separate the filenames

npx layout-engine-sdk publish-file [filename]

Publish the latest commit file changes from a branch

Fetch the commit and confirm the files to be published

branch name: default value is master

npx layout-engine-sdk publish-last-commit-files [branch name]

Retrieving Merchant ID

To retrieve the Merchant ID, you can use the Dev Tools of your web browser. Follow these steps:

1. Open the website where the Layout Engine is integrated.
2. Open the Dev Tools by right-clicking on the page and selecting "Inspect" or by using the keyboard shortcut (e.g., Ctrl+Shift+I or Cmd+Option+I).
3. In the Dev Tools console, execute the following JavaScript code:

angular.element("html").injector().get("mainConfig").merchantId;