Templating in OXID eShop

Customization of the filter display

Task

Filtering by "colors" is to be visualized in the store frontend using color tiles.

Solution

In Makaira, different representations can be selected for the filters.

In addition to the standard templates, so-called "custom templates" can also be configured there. These templates are supplied in the Connect module and play the standard template for the selected filter type without further configuration.

In the store theme, a custom template can now be overridden to customize the display for a selected filter.

The following example shows how the color tiles were implemented in the Makaira Demo-Shop.

After first selecting a custom template for the color filter in the Makaira, this template is overwritten in the store theme:

[{*  ../Application/views/makaira/tpl/makaira/filter/list_multiselect_custom_1.tpl  *}]

<ul class="makaira-filter__list makaira-filter__list--colors">
    [{foreach from=$aggregation->values item="item" name="items"}]
        <li class="makaira-filter__color-item makaira-filter__color-item--[{$item->key|replace:" ":""}][{if $item->selected}] makaira-filter__color-item--active[{/if}]">
            <label>
                <input
                        type="checkbox"
                        name="makairaFilter[[{$aggregation->key}]][]"
                        class="makaira-input makaira-input--checkbox"
                        value="[{$item->key}]"
                        [{if $item->selected}]checked="checked"[{/if}]
                />
                [{$item->key}] [{if $blShowDocCount}]([{$item->count}])[{/if}]
            </label>
        </li>
    [{/foreach}]
</ul>

Using CSS, the filters can then be designed according to the respective specifications:

.makaira-filter__color-item {
    height: 30px;
    width: 30px;
    margin: 5px;
}

.makaira-filter__list--colors label {
    display: flex;
    height: 100%;
    font-size: 0;
    border: 1px solid #e6e7e7
}

.makaira-filter__color-item--Blau label {
    background-color: blue;
}

.makaira-filter__color-item--Clover label {
    background-color: #324D12;
}

// ...etc

Output of a variant screen

Task

If a value is selected for the "Color" filter, the image of the corresponding variant is to be displayed in the store frontend, if available.

Solution

In Makaira, the best variants  can optionally be returned in addition to the parent items.

The return is carried out taking into account the fields sent in the Connect. Accordingly, the same data is sent for the variant as for the father.

The following example shows the simple implementation for the case that the image of the associated variant is played when a value for the filter "Color" was selected.

<?php

/**
 * @param array $productIds
 * @param Result $productResult
 * @return oxArticleList|oxarticlelist
 */
public function loadProducts(array $productIds = [], Result $productResult)
{
    /** @var oxArticleList $oxArticleList */
    $articleList = [];

    foreach ($productResult->items as $productItem) {
        $article = oxNew('oxarticle');
        $article->assign($productItem->fields);

        $article = $this->overrideImageIfColorFilterActive($article);

        $articleList[] = $article;
    }

    /** @var oxArticleList $oxArticleList */
    $oxArticleList = oxNew('oxarticlelist');
    $oxArticleList->assign($articleList);

    return $oxArticleList;
}

protected function overrideImageIfColorFilterActive($article)
{
    if (isset($this->query->aggregations['farbe'])) {
        $variantImage = $article->oxarticles__variant->rawValue['OXTHUMB'];

        if ($variantImage) {
            $article->oxarticles__oxthumb = new \OxidEsales\Eshop\Core\Field($variantImage);
        }
    }

    return $article;
}