Templating im OXID eShop

Anpassung der Filter-Darstellung

Aufgabe

Die Filterung nach „Farben“ soll im Shop-Frontend mittels Farbkacheln visualisiert werden.

Lösung

Im Makaira können für die Filter verschiedenen Darstellungen ausgewählt werden.

Neben den Standard-Templates können dort auch so genannte „Custom-Templates“ konfiguriert werden. Diese Templates werden im Connect-Modul mitgeliefert und spielen ohne weitere Konfiguration das Standard-Template für die gewählte Filter-Art aus.

Im Shop-Theme kann ein Custom-Template nun überschrieben werden um die Darstellung für einen ausgewählten Filter nach eigenen Wünschen anzupassen.

Das folgende Beispiel zeigt, wie die Farbkacheln im Makaira Demo-Shop umgesetzt wurden.

Nachdem zunächst im Makaira ein Custom-Template für den Farb-Filter ausgewählt wurde, wird dieses Template im Shop-Theme überschrieben:

[{*  ../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>

Mittels CSS können die Filter dann nach den jeweiligen Vorgaben gestaltet werden:

.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

Ausgabe eines Variantenbilds

Aufgabe

Bei einem ausgewählten Wert für den Filter „Farbe“ soll im Shop-Frontend - falls vorhanden - das Bild der zugehörigen Variante ausgespielt werden.

Lösung

Im Makaira können optional zusätzlich zu den Elternartikeln die am besten treffenden Varianten zurückgegeben werden.

Die Rückgabe erfolgt unter der Berücksichtung der mitgeschickten fields im Connect. Es werden dementsprechend die gleichen Daten für die Variante wie für den Vater mitgeschickt.

Das folgende Beispiel zeigt die einfache Umsetzung für den Fall, dass das Bild der zugehörigen Variante ausgespielt wird wenn ein Wert für den Filter „Farbe“ ausgewählt wurde.

<?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;
}