E-Commerce Website Design & Development Company

How to create Custom Product Sliders in Hyva Magento 2 ?

Written by Aadil Popatiya

Mar 13, 2023

706

How to create Custom Product Sliders in Hyva Magento 2 ?

Today we will learn How to create a custom product slider in hyva magento 2. On the basis of your need, you can add your own condition such as product attribute filter, category filter, price filter and many more.

For an attractive ecommerce website UI, the product sliders play an important role. A product slider that displays products in a slideshow is one way to help visitors easily browse your online store. Product sliders also group certain products together to highlight special deals and encourage more purchases.

There many ways to create custom product sliders in Hyva magento 2 they are listed below.

Using layout
Using hyva slider view modal
Using Magento page builder

Method 1 : Using Layout

Here are the steps to create custom product slider in Hyva Magento 2:

Step 1 : Register your module

You can create a module as per the given instruction in the following link.

https://dolphinwebsolution.com/how-to-create-module-in-magento-2/

Step 2 : Create your page layout

app/code/Dolphin/CustomProductSlider/view/frontend/layout/hyva_dolphin_index_index.xml

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

Here we load the all required renderer blocks on the page by applying the layout handle hyva_product_slider.

Then, we declared the slider block with a template.

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

Each product in the slider is rendered from the product list item template.

Magento_Catalog::product/list/item.phtml

The following is a list of customizable parameters for a product slider component:

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">2,4</argument>

include_child_category_products : ( Default value: false )

If true, and if the category is an anchor category, the slider will also include products assigned to child categories.

Note : The include_child_category_products attribute only has an effect if a single category ID is specified in category_ids argument.

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>

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>

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">Hot 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.

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>

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

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>

product_skus ( Default value: none )

A 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>

Let’s wrap up some of condition together

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="hyva_product_slider"/>
    <body>
        <referenceContainer name="content">
            <block name="red-slider" template="Magento_Catalog::product/slider/product-slider.phtml">
                <arguments>
                    <argument name="category_ids" xsi:type="string">2</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="red" xsi:type="string">58</item>
                            </item>
                            <item name="conditionType" xsi:type="string">in</item>
                        </item>
                    </argument>
                    <argument name="title" xsi:type="string" translate="true">Our favourites in Red</argument>
                    <argument name="price_from" xsi:type="string">1</argument>
                    <argument name="price_to" xsi:type="string">1000</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>
                    <argument name="include_child_category_products" xsi:type="boolean">true</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

Method 2 : Using Hyva view modal

You can create a product slider using hyva view modal as per the given instruction in the following hyva official docs.

How to create Custom Product Sliders Using hyva slider view modal in Hyva Magento 2

Method 3 : Using Magento page builder

You can create a product slider using page builder as per the given instruction in the following magento official docs.

https://docs.magento.com/user-guide/v2.3/cms/page-builder-add-content-products.html

And that’s it! This is how you can create product sliders in Hyva Magento 2.

If you’re struggling with any questions or confusion regarding custom product sliders in Magento 2, feel free to reach out to us through the comments section. We’re always happy to assist and provide the guidance you need.

Aadil Popatiya

Author

Adobe Certified Magento Developer & eCommerce Architect with over 3 years of web development experience. With expertise in Magento, PHP, JavaScript, React, AlpineJS, Docker, and Laravel, and extensive knowledge of open source software.