Magento: filter opmaak

Het filter in Magento opmaken door er een class aan toe te voegen

Een van de mooie dingen van Magento is de mogelijkheid om te filteren op basis van attributen. Maar soms wil je dat filter een beetje mooier weergeven.

Bij het filteren op maat zie je bijvoorbeeld het volgende:

De Maat wordt als een lange rij gegevens weergegeven en dat is eigenlijk niet echt mooi. Vooral omdat er veel witruimte is aan de zijkant. Daarbij kun je  je voorstellen dat dit een erg lange lijst kan worden. Veel mooier is om het als volgt weer te geven:

Om dit te realiseren heb ik een simpele oplossing bedacht. Het is namelijk zaak om de attributen in een DIV te zetten en er een class aan toe te voegen om het te stylen.

Allereest is het zaak om filter.phtml te openen. Deze staat in dit geval onder /app/design/frontend/TEMPLATE/TEMPLATE/catalog/layer/filter.phtml

Als je de hints even aanzet kun je zien waar je het filter kunt vinden.

Vervolgens heb ik de volgende aanpassingen aangebracht(vet):
?>
<div class="omlijning">
<ol>
    <?php foreach ($this->getItems() as $_item): ?>
<div class="<?php echo $_item->getName() ?>">
           <li>
            <a href="<?php echo $this->urlEscape($_item->getUrl()) ?>" >
                <span class="count"><?php echo $_item->getCount() ?></span>
                <?php echo $_item->getLabel() ?>
            </a>
        </li>
</div>   
    <?php endforeach ?> </div>
</ol>

 

Wat gebeurt er? Er worden 2 klassen aangemaakt in dit geval, namelijk UW en MAAT. De omschrijving (getname) is namelijk Uw Maat. We gebruiken de class Maat om de boel te stylen:

.maat {
    font-size: 13px;
    display:block;
    width: 25px;
    float: left;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    padding: 2px 2px 2px 10px;
    margin: -4px 4px 8px 4px;
}

Hierna hebben we een mooi gestyled filter.

 

Geef een reactie