How to create Custom Product Sliders in Hyva Magento 2 ?

Written by Aadil Popatiya

Mar 13, 2023

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

Experienced Magento Developer adept in backend work, proficient with Alpine JS and Hyva theme. Passionate about optimizing eCommerce experiences and staying updated on the latest Magento advancements.

We can help you with

  • Dedicated Team
  • Setup Extended Team
  • Product Development
  • Custom App Development

Schedule a Developer Interview And Get 7 Days Risk-Free Trial

Fill out This Form and one of Our Technical Experts will Contact you Within 12 Hours.

    Google
    |

    4.8

    Google
    |

    4.8

    Google
    |

    4.9

    Google
    |

    4.8

    Google
    |

    4.9

    Copyright © 2024 DOLPHIN WEB SOLUTION. All rights reserved.

    TO TOP