How to Create Custom Product Slider in Hyva Theme Magento 2

In this tutorial, Today I will explain you how to create custom product slider in Hyva Theme Magento 2. In Hyva Theme, They offers many viewmodels with the Theme. Using that default feature we will build custom product slider. In Hyva Theme, It creates viewModels for sliders which will help to render Hyva default slider which is combination of Alpine JS and Tailwind CSS.

Let’s follow the below steps for create custom product slider in Hyva Theme Magento 2.

You may also like this :

1) Let’s assume that you have installed Hyva theme and custom module as well. Now, Create a Block file at app/code/RH/Helloworld/Block/Slider.php and paste the below code :

Copy Code


<?php
/**
* Created By : Rohan Hapani
*/
namespace RH\Helloworld\Block;

use Magento\Catalog\Model\ResourceModel\Product\CollectionFactory;
use Magento\Framework\View\Element\Template\Context;

/**
 * Class Slider
 * @package RH\Helloworld\Block
 */
class Slider extends \Magento\Framework\View\Element\Template
{
    /**
     * @var CollectionFactory
     */
    protected $productCollectionFactory;

    /**
     * Slider constructor
     * 
     * @param Context $context
     * @param CollectionFactory $productCollectionFactory
     * @param array $data
     */
    public function __construct(
        Context $context,
        CollectionFactory $productCollectionFactory,
        array $data = []
    ) {
        $this->productCollectionFactory = $productCollectionFactory;
        parent::__construct($context, $data);
    }

    /**
     * @return \Magento\Catalog\Model\ResourceModel\Product\Collection
     */
    public function getProductCollection()
    {
        $collection = $this->productCollectionFactory->create();
        $collection->addAttributeToSelect('*');
        $collection->setPageSize(10);
        return $collection;
    }
}

2) Then, Create a layout file at app/code/RH/Helloworld/view/frontend/layout/helloworld_index_index.xml for add phtml file in the container :

Copy Code


<?xml version="1.0"?>
<!--
/**
 * Created By : Rohan Hapani
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    layout="1column"
    xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="RH\Helloworld\Block\Slider"
                name="rh-product-slider"
                template="RH_Helloworld::custom-slider.phtml" />
        </referenceContainer>
    </body>
</page>

3) In last, Create a phtml file at app/code/RH/Helloworld/view/frontend/templates/custom-slider.phtml to call slider and it’s product data :

Copy Code


<?php

declare(strict_types=1);

use RH\Helloworld\Block\SliderItems;
use Magento\Framework\Escaper;
use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\Slider;

/** @var SliderItems $block */
/** @var Escaper $escaper */
/** @var ViewModelRegistry $viewModels */

$sliderViewModel = $viewModels->require(Slider::class);
$items = $block->getProductCollection(); // Render product collection which you want to display in slider.
$itemTemplate = 'Magento_Catalog::product/list/item.phtml';
$containerTemplate = 'Magento_Catalog::product/slider/product-slider-container.phtml';
?>

<?=
    $sliderHtml = $sliderViewModel->getSliderForItems($itemTemplate, $items, $containerTemplate)
        ->setData('title', $escaper->escapeHtml(__('RH Custom Product Slider')))
        ->toHtml();
?>

Output :

That’s it !!!

I hope this blog is easy to understand about how to create custom product slider in Hyva Theme Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment on this blog, I’ll get back with a proper solution.

Keep liking and sharing !!!

Post Views: 7