Skip to content

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>

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>

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>

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>