Product Sliders

The Hyvä release 1.1.9 introduced server side rendered (SSR) product sliders.
Before that, product sliders where rendered client side with JavaScript, using GraphQL to fetch the data, but this introduced potential for layout shifts and redis session locking could cause delays in page rendering.
Also, the client side rendered sliders did not support swatches and add to cart.

The SSR sliders resolve these issues.

Backward Compatibility

The GraphQL based client side rendered slider template Magento_Theme/templates/elements/slider.phtml is deprecated but will remain for backward compatibility.

PageBuilder

Please note, the SSR product sliders this article is about are different from the PageBuilder product sliders.

How to use SSR product sliders

First, the layout handle hyva_product_slider needs to be included on the page, so all required renderer blocks are available. This layout handle can also be used as a customization point.

Then, the slider block is declared with the template

Magento_Catalog::product/slider/product-slider.phtml.

Each product in the slider is rendered using the product list item template Magento_Catalog/templates/product/list/item.phtml.

Block arguments are used to specify which products will be shown in the slider.

<page>
    <update handle="hyva_product_slider" />
    <body>
        <referenceContainer name="content">
            <block name="my-slider" template="Magento_Catalog::product/slider/product-slider.phtml">
                <arguments>
                    <argument name="title" xsi:type="string" translate="true">Watches</argument>
                    <argument name="category_ids" xsi:type="string">6</argument>
                    <argument name="page_size" xsi:type="string">4</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

Slider Configuration with Block Arguments

`category_ids`

Default value: none.

A comma separated list of category IDs. Products from these categories will be shown.

Example:

<argument name="category_ids" xsi:type="string">6,8</argument>

`include_child_category_products`

Default value: false.

Note: this argument is available since Hyvä release 1.1.18.

The include_child_category_products attribute only has an effect if a single category ID is specified using the category_ids argument.
If false (the default), only products directly associated with the given category are displayed. If true, and if the category is an anchor category, the slider will also include products assigned to child categories.

If it is used on another filter type, for example, multiple category IDs, or with a category that is not an anchor category, this argument has no effect.

Example:

<argument name="include_child_category_products" xsi:type="boolean">true</argument>

`page_size`

Default value: 8

The maximum number of products to show in the slider.

Example:

<argument name="page_size" xsi:type="number">12</argument>

The page_size argument does not work for crosssell sliders

For technical reasons, the page_size is not used by type crosssell type sliders.
Customizing the number of products in the crosssell slider requires setting the maxCrosssellItemCount constructor argument of \Hyva\Theme\ViewModel\ProductList in a etc/frontend/di.xml file of a module (not a theme).

`price_from`

Default value: none

Only show products that have a price equal to or higher than the specified value.

Example:

<argument name="price_from" xsi:type="string">15.50</argument>

`price_to`

Default value: none

Only show products that have a price equal to or lower than the specified value.

Example:

<argument name="price_to" xsi:type="string">100</argument>

`sort_attribute`

Default value: position

Sort the products based on the specified attribute.

Example:

<argument name="sort_attribute" xsi:type="string">created_at</argument>

`sort_direction`

Default value: ASC

The direction to sort the products in:

ASC for ascending order
DESC for descending order

Example:

<argument name="sort_direction" xsi:type="string">DESC</argument>

`title`

Default value: none

The title to render above the product slider.

Example:

<argument name="title" xsi:type="string">Special Deals</argument>

`hide_rating_summary`

Default value: false

Flag specifying if the product rating summary stars should be visible or hidden. By default, the rating summary is visible.

Example:

<argument name="hide_rating_summary" xsi:type="boolean">true</argument>

`hide_details`

Default value: false

Flag specifying if the product swatches should be visible or hidden. By default, swatches are visible. The flag is called details because the swatches block is rendered by the product details renderer.Theoretically, other details about the product might be rendered, too, depending on the product type.

Example:

<argument name="hide_details" xsi:type="boolean">true</argument>

`type`

Default value: none Possible values: related, upsell, crosssell

Flag indicating related products should be shown in the slider.The related and upsell type sliders can only be used on a product detail page.The crosssell type slider can be used anywhere and will show the crosssell relations of the items in the cart.

Example:

<argument name="type" xsi:type="string">crosssell</argument>

`additional_filters`

Default value: none

An array specifying filter criteria to be applied to the product collection shown in the slider.The data structure used matches the SearchCriteria filter syntax. The default conditionType is eq.

Possible conditionsType and value combinations:

from with a string of number value
to with a string of number value
eq (equals) with a string of number value (this is the default conditionType)
neq (not equals) with a string of number value
like with a string value where % is a special wildcard character.
in (in set) with an array value (see example below)
nin (not in set) with an array value
notnull with a boolean value
null with a boolean value
moreq (more or equal) with a number value
gt (greater than) with a number value
lt (less than) with a number value
gteq (greater than or equal) with a number value, same as moreq
lteq (less than or equal) with a number value
finset (find in set) with a string value
regexp (regular expression) with a string value

Example:

<argument name="additional_filters" xsi:type="array">
    <item name="color-filter" xsi:type="array">
        <item name="field" xsi:type="string">color</item>
        <item name="value" xsi:type="array">
            <item name="orange" xsi:type="string">56</item>
            <item name="red" xsi:type="string">58</item>
            <item name="yellow" xsi:type="string">60</item>
        </item>
        <item name="conditionType" xsi:type="string">in</item>
    </item>
</argument>

`item_template`

Default value: Magento_Catalog::product/list/item.phtml

The template for rendering slider items.

Example:

<argument name="item_template" xsi:type="string">Magento_Catalog::product/slider/custom-item.phtml</argument>

`container_template`

Default value: Magento_Catalog::product/slider/product-slider-container.phtml

The template for rendering the slider wrapper with the container HTML and the Alpine.js.

Chances are you will never use a custom container template.

`product_skus`

Default value: none

Note: this filter argument is available since Hyvä release 1.1.10.

A list of comma separated list of product SKUs specifying the products to show in the slider. SKUs containing a comma can not be specified.

Example:

<argument name="product_skus" xsi:type="string">WH07,WSH12,WP08</argument>

`maybe_purged_tailwind_slide_item_classes` and `max_visible`

Available since 1.3.6

The CSS classes on the <div> element wrapping each product in the slider can be specified by setting the maybe_purged_tailwind_slide_item_classes property on the slider block.
This is useful to control how many products are visible at different breakpoints, without overriding or creating a separate version of the product-slider-container.phtml template.
The slide item width related breakpoints for should match the max_visible value, which is the number of visible items on the largest breakpoint. The default max_visible is 4.

For example:

<?= $slider->getSliderForItems('My_Module::my-item.phtml', $items)
           ->setData('max_visible', 2)
           ->setData('maybe_purged_tailwind_slide_item_classes', 'py-1 md:w-1/2')
           ->toHtml() ?>

If no slider item classes are specified, the default py-1 md:w-1/2 lg:w-1/3 xl:w-1/4 are used.

Maybe purged?

The property name includes maybe_purged to indicate that if the classes are set in layout XML (instead of a .phtml template).
They may not be seen by Tailwind during the compilation, and thus might be missing from the production bundle, unless the XML files are also included in the content path in the Tailwind configuration.

Usually they will be set in a .phtml file like in the above example though, so likely this will be fine.

Full Example:

A slider showing red, yellow and orange products from category 5 and 6. Please note, if you want to try out this example that the color option IDs and category IDs may be different for your instance!

<block name="redish-products-slider" template="Magento_Catalog::product/slider/product-slider.phtml">
    <arguments>
        <argument name="category_ids" xsi:type="string">5,6</argument>
        <argument name="additional_filters" xsi:type="array">
            <item name="color-filter" xsi:type="array">
                <item name="field" xsi:type="string">color</item>
                <item name="value" xsi:type="array">
                    <item name="orange" xsi:type="string">56</item>
                    <item name="red" xsi:type="string">58</item>
                    <item name="yellow" xsi:type="string">60</item>
                </item>
                <item name="conditionType" xsi:type="string">in</item>
            </item>
        </argument>
        <argument name="title" xsi:type="string" translate="true">Our favorites in Red</argument>
        <argument name="price_from" xsi:type="string">30</argument>
        <argument name="price_to" xsi:type="string">100</argument>
        <argument name="sort_attribute" xsi:type="string">price</argument>
        <argument name="sort_direction" xsi:type="string">DESC</argument>
        <argument name="hide_rating_summary" xsi:type="boolean">true</argument>
        <argument name="hide_details" xsi:type="boolean">true</argument>
    </arguments>
</block>

Product Sliders

How to use SSR product sliders

Slider Configuration with Block Arguments

category_ids

include_child_category_products

page_size

price_from

price_to

sort_attribute

sort_direction

title

hide_rating_summary

hide_details

type

additional_filters

item_template

container_template

product_skus

maybe_purged_tailwind_slide_item_classes and max_visible

Full Example:

`category_ids`

`include_child_category_products`

`page_size`

`price_from`

`price_to`

`sort_attribute`

`sort_direction`

`title`

`hide_rating_summary`

`hide_details`

`type`

`additional_filters`

`item_template`

`container_template`

`product_skus`

`maybe_purged_tailwind_slide_item_classes` and `max_visible`