Selz-theme-kit NPM

Selz Theme Kit

Introduction

The Selz Theme Kit provides utilities for local development of Selz themes, offering an alternative workflow to the platform's online theme editor IDE and Store Builder.

Features

Hot-reloading development server

The Selz Theme Kit development environment uses an integrated build pipeline and browser synchronisation to render views that automatically reload as changes are made to your theme code.

Configurable data mocking for templates

Selz Theme Kit emulates aspects of the Selz platform's store building functionality to help preview how theme files would render in a live store context. Alongside critical store data, it also allows programmatic injection of arbitrary block configurations into the editable regions of your theme templates.

On-demand templating view changes

Selz Theme Kit's development environment features a client-side browser that detects theme files and manages routing of the development preview, allowing you to quickly switch between different templates and other code snippets while theming.

Live-editing of block template properties

Selz Theme Kit can preview how block templates will render in different scenarios based on a block's configurable properties and custom styling.

Theme initialisation

Selz Theme Kit can be used to clone an existing theme for beginning a new project, or initialise a bare-bones starter from boilerplate.

Getting started

The Selz Theme Kit development environment can be run right out of the box with very little additional configuration. Essentially, one need only nagivate to the desired working theme directory, and perform some first-time setup of the development environment.

Installation

In a terminal window, execute

yarn add global selz-theme-kit

npm install -g selz-theme-kit

to install the Selz Theme Kit command-line interface with your preferred package manager.

Environment setup

Before editing a theme for the first time with Selz Theme Kit, it is critical to initialise the mock data used to hydrate the template views.

Given an existing theme, navigate to its directory and execute

stk mock

which will generate the required files under a .stk folder in Selz Theme Kit's global installation directory.

Alternatively, a new theme can first be initialised by either using Selz's minimally-opinionated boilerplate theme or cloning an existing theme. This is easy to achieve by running

stk new

and following the prompts.

Selz Theme Kit is 'batteries-included' when it comes to getting started with sample store data, but offers advanced configuration options for bespoke use cases. Comprehensive documentation for Selz Theme Kit is available here.

Starting the development environment

The Selz Theme Kit development environment can subsequently be started using

stk start

after which the client view will be accessible via a browser.

Known issues

Some blocks (eg. Category List) are broken or do not yet render correctly.
Dates formatted using .NET formats do not work correctly with date filter (these will eventually be deprecated on the platform).
~~Block properties panel functionality is in an experimental state.~~
~~Side panels reset when the file preview reloads.~~
Mini-cart item remove action does not always revise the total price correctly.

Roadmap

Internal MVP release
Beta release targeted at selected agency/partner use
Addition of features that integrate with a Selz account via an API (eg. allow upload of a theme to a user's account, use store data locally)
Implementation of feedback from beta release
Official public release