Understanding Template Hierarchies of Oxid eShop

In OXID eShop, templates form the heart of the front-end, determining how the online store appears to end-users. The system offers a rich hierarchy to manage templates, providing developers with a flexible and modular approach to design. This article offers a detailed exploration of this hierarchy.

Structure of the Template Directory

OXID eShop installation contains the /out/ directory where all template-related assets are stored. For instance:

• /out/azure/ (or /out/flow/): These directories contain the default templates.
• /out/myshoptheme/: A custom template directory.

Each of these directories further breaks down into:

• tpl/: Contains the Smarty templates.
• img/: Contains theme-specific images.
• src/: Contains CSS and JS files.

Core and Custom Templates

The OXID eShop system first checks if a custom template exists for a specific request. If it does, that’s rendered. Otherwise, it falls back to the base template.If both exist, the system will render the custom version.

Here’s a practical example:

• Core: /out/azure/tpl/page/shop/start.tpl
• Custom: /out/myshoptheme/tpl/page/shop/start.tpl

Template Blocks

Blocks are named sections within a template that can be individually overridden or extended. They use the {block} Smarty tag.
Example:
In the core template, you might have:

{block name="details_productmain_price"}

<span class="price">{$product->getPrice()}</span>

{/block}

To override this in your custom template:

{block name="details_productmain_price"}

<span class="discounted-price">{$product->getDiscountedPrice()}</span>

{/block}

Theme Settings

Each theme can have a theme.php file located in its root directory. This file defines metadata and settings for the theme. Settings defined here can be used within the template files.
Example: In theme.php:

$aTheme = [
'id' => 'myshoptheme',
'title' => 'My Shop Theme',
'description' => 'A custom theme for OXID eShop',
'thumbnail' => 'theme.jpg',
'version' => '1.0',
'author' => 'Your Name',
];

In the template:
<h1>Welcome to {$oViewConf->getActiveTheme()->getInfo('title')}</h1>

Child Themes in OXID

OXID eShop allows the creation of child themes. This ensures that any updates to the parent theme don’t disrupt your customizations.

Steps to set up:

• In your child theme’s theme.php, define a ‘parentTheme’ key:

$aTheme = [
'id' => 'myshopchildtheme',
'title' => 'My Shop Child Theme',
'parentTheme' => 'myshoptheme',
'parentVersions' => ['1.0'],
];

This means myshopchildtheme will inherit from myshoptheme.

The OXID eShop template hierarchy, with its structured directories, blocks, child themes, and widgets, offers unparalleled flexibility. Developers can create distinct and dynamic designs, while also ensuring that core functionalities remain untouched and updatable. As with any intricate system, understanding its intricacies can greatly improve your development efficiency and the final outcome of your online store.