Themes
Creating themes is the goal of Surikata.io's frontend programming. This is where the website design and UI/UX is created.
Each theme is split into following logical parts:
- Page layouts. Your theme can define unlimited number of page layouts. Each page of the website is built using a selected layout.
- Assets. This is where your CSS, Javascript or image files are located.
- Templates. This is where the real design work with HTML takes place.
- PHP Main Class. This is where you configure the rest of your theme. A bit of PHP programming is necessary here.
- Javascript API. This is used for the interaction with the server using AJAX.
Introduction
Page - Layouts - Sections - Templates (or "How the rendering works")
Theme folder structure
Working with assets
Default themes
There are following default themes available in Surikata.io's package:
- HelloWorld: This is the simpliest theme possible. You should undertand it first.
- Basic: This theme contains the basic ecommerce functionality. You should understand it before creating your own full-featured theme.
Layouts
Each page (accessible over a certain URL) must have its layout attached. Read following chapters to understand how layouts work.
Templates
Each plugin must have its template written in TWIG. Template is a "front-end counterpart" of the plugin. Read following chapters to understand how you can create your templates or what variables you can use there.
Understanding templates
List of default variables available in TWIG templates
Javascript API
You will definitely need to do some Javascript coding to make your themes work. For example when adding a product to the shopping cart, you will need to call a certain Surikata.io's Javascript API method and most probably create (or re-use from the Basic theme) some wrapper around it.
Javascript programming in themes
Translations
You can prepare your theme to be used in multi-language projects.
Tutorials
Create the first empty theme
Add a homepage to your theme
Customize the theme