LemonStand Version 1 Has Been Discontinued
This documentation is for LemonStand Version 1. LemonStand is now offered as a cloud-based eCommerce platform.
You can try the new LemonStand and learn about upgrading here.
Guide to Front-End Customization
LemonStand gives you fine grain control over the design and functionality of any page in your ecommerce store. You can use any front-end code you like, without restriction. Save development time by using partials, page actions, and content blocks.
This guide will give you an overview of how to access and customize each of the components of your ecommerce store:
- Adding a Layout
- Creating Your First Page
- Creating a Partial
- Using Page Head Declarations
- Using Page Blocks
- Creating Editable Blocks
- Combining and Minifying Javascript and CSS Files
- Using Global Content Blocks
- Managing Resources
- Programming Pages
- Using Page Actions
- Using AJAX
Adding a Layout
When you create multiple pages with LemonStand you will soon find that you repeat the same HTML code in all pages – the HEAD and BODY tags declarations, page headers and footers. Layouts allow you to reuse the common code. Layouts act as wrappers for your pages. They usually contain the required HTML tags like HEAD, TITLE and BODY, as well as common blocks of your pages – website navigation, footer, header, sidebar etc. You can have as many layouts as you need. For simple websites two layouts usually are enough – for the Home page and for inner pages.
<layout>
<page>
<partial>
</partial>
</page>
</layout>
Creating your First Page
Go to the CMS/Pages page and click the Add page button. You will see the Page Editor page – the tool for creating and managing pages. For any page in LemonStand you should specify at least 3 parameters:
- Page Title
- Page URL
- Page Content
Creating a Partial
Partials are an important component of LemonStand's template engine. Partials enable you to share code blocks among multiple pages. Code reusing allows you to save much time when you develop complicated websites. For example, you can create a partial for rendering a product list and use this partial on the Category page and on the Home page. Instead of writing the same code in each page, you can just ask LemonStand to render the partial.
Using Page Head Declarations
The Head Declarations field on the Create/Edit Page form (the Head & Blocks tab) allows you to separate page-specific HEAD declarations from the common templates code. In this field you can define code which you want to be rendered in the page HEAD element - for example SCRIPT or CSS resource references. Then you can output the content defined in the field using the $this->render_head() call in your page templates.
Using Page Blocks
The page blocks feature allows you to inject page-specific code blocks to the page layout. It is helpful, for example, when you have a page which contains a main area and a sidebar, and the sidebar should contain some page-specific data. In this case you can define the sidebar layout markup in the page layout and define a sidebar block in the page. LemonStand will inject the page sidebar content to the layout. It will simplify the page and layout code, because the page code will not contain any layout-specific markup.
Creating Editable Blocks
Editable content blocks allow you to separate your pages HTML code and pages content. You may add any number of content blocks on a page and then edit them separately from the page code, in WYSIWYG or text mode. The benefit of this approach is that page content can be managed by non-technical people. It protects pages from being corrupted by accident and makes page editing simpler.
Creating Global Content Blocks
Global content blocks are similar to the regular content blocks, but they can be used not only on pages, but also in layouts and partials. Global content blocks are also shared across themes. You can define a single content block and use it in different themes. Its content will be the same in all themes.
Combining and Minifying JavaScript and CSS Files
The page controller class has two methods which allow you to combine and minify JavaScript and CSS resources. These methods are js_combine and css_combine. With these methods you can:
- Combine multiple JavaScript or CSS files into a single file, reducing the number of external requests on a page.
- Minify the resource files. LemonStand automatically minifies and compresses resource files with GZIP.
These methods allow you to include both local and remote files. LemonStand automatically processes relative URLs in CSS combined files.
Managing Resources
LemonStand has an integrated resource manager which allows you to upload, modify and organize resource files. LemonStand's directory structure includes a special directory /resources, designed for keeping resource files. With resource manager you can create subdirectories in this directory and upload your files to them.
Programming Pages
Programming LemonStand pages is a simple process due to the API and programming techniques built into the system. The main component of the LemonStand page programming API is the Action. Another important component is the LemonStand AJAX implementation.
Action - is a PHP code written by you or provided by LemonStand modules, executed before a page is displayed. Actions are used for preparing data to be displayed on a page and for processing page forms.
AJAX - allows you to process forms and update page content without reloading the whole page.
Next: Installing A Theme
Previous: Adding or Editing a Product
Return to Beginner's Guide