ZMThemeInfo

Creating a new theme requires to write a subclass of ZMThemeInfo.

While the minimun requires consists mostly of the name, description and version, there are a few more things that can be done here. Before doing that, though, let’s examine the anatomy of a ZenMagick theme page.

Anatomy of a theme page

The HTML for each page is made up by a number of different template files. Those can be divided into three different types:

• Layout
  The layout file controls the main page layout. It creates the header/footer and the main columns that will be filled with the main contents and the sideboxes.
• View
  Views are stored in the views folder of the theme. They are responsible for rendering the main contents. This could be the login form, the shopping cart, etc
• Boxes
  Boxes, or sideboxes, are the smallest pieces in this puzzle. Each box template will render the HTML for a specific sidebox; for example: categories, new products, manufacturers, etc.

Configuring layouts

The default theme includes two layout files: default_layout.php and popup_layout.php. default_layout.php corresponds to the tpl_main_page.php file in zen-cart and is used to layout all normal pages, while popup_layout.php is responsible to layout all popups.

Now, in zen-cart you may create an individual tpl_main_page.php file for each page, While this is quite nice to have, it leaves the problem of duplicating code. When multiple pages (for example, all checkout pages) share a common layout that is different from the rest of the site, a copy of that file needs to be in each page folder.

To avoid this redundancy, ZenMagick gives you the option to configure alternative layout files for pages. This is done using the method with the original name setLayout(..). For example, to use a different file to structure the shopping cart, the following code could be used:

$this->setLayout('shopping_cart', 'cart_layout');

You will also find that the popup layout for the implemented popups is cofigured in this way.

But there is more. There might be cases where no layout should be used at all. In that case, the view would be reponsible for that. In other words, if no layout exists, the view must contain the whole HTML.

Example:

$this->setLayout(null, 'index');

This code would allow to use a custom view to generate the theme’s homepage.

The error page

ZMThemeInfo is also the place to configure the error page. As far as Zenmagick is concerned, the error page is treated like any other view. That means the default layout will be used and the configured error view be used to create the contents.

Example:

$this->setErrorPage('error');

This will make Zenmagick use the error.php view file to display an error page using the default layout (unless, of course, the layout for the error page has been set to null).

Custom JavaScript

This feature has been somewhat neglected. The reason is, that with the current quality of JavaScript libraries, it is easier to use those to register event handler, etc rather than relying on the body tag’s onload attribute.

Still, it’s there and works.

There are methods for common onload events and also for page specific code. For example, the default theme sets up some JavaScript to focus the mouse on the email input field when displaying the login form:

$this->setPageEventHandler('onload', 'login', "focus('email_address');");