Türchen 12: Hyvä Produkt- & Custom-Slider
Einen Slider braucht man sowohl für Produkte, als auch manchmal für benutzerdefinierte Inhalte. Im Magento-Standard war es manchmal für uns frustrierend mit dem Slick-Slider rumzuhantieren, gerade wenn man die Inhalte und das Verhalten stark anpassen wollte. Unter Hyvä gibt es hierfür eine schöne und sehr simple Lösung. In diesem Türchen erfahrt ihr alles, was ihr grundlegend wissen müsst.
Simpler Produktslider
Um einen Produktslider anzuzeigen müssen wir in Hyvä nur einfach einen Block über eine XML einbinden. Hier können wir einfach über die „Arguments“ so gut wie alles regeln, was wir am Slider anpassen wollen. Mehr zu den Argumenten weiter unten.
<!-- in einer XML, wo der Slider -->
<!-- eingebunden werden soll.
<!-- z.B.: cms_index_index.xml -->
<?xml version="1. 0"?>
<page>
<update handle="hyva_product_slider" />
<body>
<referenceContainer name="content">
<block
name="my-slider"
template="Magento_Catalog::product/slider/product-slider.phtml"
>
<!-- Hier gibt es diverse Argumente -->
<arguments>
<argument name="title">Titel</argument>
<argument name="category_ids">6</argument>
<argument name="page_size">4</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>Benutzerdefinierter Slider
Für einen Slider mit benutzerdefinierten Inhalten binden wir einfach ein eigenes PHTML-Template über eine beliebige XML ein und packen folgendes in dieses Template:
<?php
use \Hyva\Theme\ViewModel\Slider;
use \Hyva\Theme\Model\ViewModelRegistry;
use \Codex\Slider\ViewModel\CustomData;
/** @var ViewModelRegistry $viewModels */
// Hyvä SliderViewModel einbinden um einen
// Slider zu erzeugen.
$sliderViewModel = $viewModels->require(Slider::class);
// Eigenes PHTML Item-Template
$itemsTemplate = 'Codex_Slider::slider-item.phtml';
$dataVm = $viewModels->require(CustomData::class);
$items = $dataVm->getItems();
?>
// So simpel rendern wir einen eigenen Slider
// mit eigenen Slider-Items
<?=
$sliderViewModel
->getSliderForItems(
$itemsTemplate,
$items
)
->setData('title', __('Slider-Titel'))
->toHtml();
?>In dem eigenen Slider-Item Template „Codex_Slider::slider-item.phtml“ können wir nun wie folgt die benutzerdefinierten Daten anzeigen:
<?php
use \Magento\Framework\View\Element\Template;
/** @var Template $block */
$item = $block->getData('item');
?>
<div class="data-container w-full">
<p><?= $item['title'] ?></p>
<p><?= $item['description'] ?></p>
<p><?= $item['other'] ?></p>
</div>Beispiel mit allen Argumenten
Hier noch einmal ein Produktslider Beispiel mit allen XML-Argumenten, die es so gibt:
<block
name="full-product-slider"
template="Magento_Catalog::product/slider/product-slider.phtml"
>
<arguments>
<argument name="category_ids">5,6</argument>
<argument name="additional_filters">
<item name="color-filter">
<item name="field">color</item>
<item name="value">
<item name="orange">56</item>
<item name="red">58</item>
<item name="yellow">60</item>
</item>
<item name="conditionType">in</item>
</item>
</argument>
<argument name="title">Volles Beispiel</argument>
<argument name="price_from">30</argument>
<argument name="price_to">100</argument>
<argument name="sort_attribute">price</argument>
<argument name="sort_direction">DESC</argument>
<argument name="hide_rating_summary">true</argument>
<argument name="hide_details">true</argument>
</arguments>
</block>
Wenn ihr mehr Informationen zu den Slidern benötigt oder euch die Argumente nochmal im Detail durchlesen wollt, findet ihr hier die Seite zu der Dokumentation: Produktslider & Customslider
Hinterlasse einen Kommentar
An der Diskussion beteiligen?Hinterlasse uns deinen Kommentar!