Working with PHTML templates

When working with Loki themes, the aim is to create as little template overrides as possible. However, if we do create template overrides, let's focus on a couple of principles to create better templates.

Guidelines for cleaner templates

• Use ViewModel classes instead of Block classes;
• Create as many ViewModel classes as needed;
• Move as much logic into ViewModel classes instead of keeping it in the template;
• Keep templates small and readable;
• Use as little JavaScript bindings (including Alpine.js bindings) as possible;
• Use the Loki $css() utility;

Cleaning up legacy JavaScript

With Loki Theme Kit, a template override of the original Luma theme is needed to create a better alternative. The first step here is to remove all Knockout, Require and jQuery shit and clean things up.

• data-mage-init
• x-magento-init
• data-bind
• require()
• ...

Recreate client-side logic

Next, try to reproduce as much logic of the removed JavaScript: Preferably this is done with plain HTML and CSS. If new JavaScript is needed, carefully choosen between JavaScript components and Alpine.js components.

$css() util from Loki_CssUtils module

The Loki_CssUtils module adds a variable $css() to PHTML templates, which allows for defining CSS classes for a given HTML attribute. By doing this via PHP (instead of hard-coded in HTML) is that PHP-based parsers can be used to replace and modify CSS classes. Even better, you can append and override CSS classes via the XML layout as well.

<label class="<?= $css('label', scope: 'label') ?>" 

Ideally, the default CSS class in PHTML templates is either empty or semantically correct. Utility classes should be avoided.