Hello Magento Friends,
In this blog, I will show the steps to Create Custom Product Slider in Magento 2 Hyvä Themes.
Building an engaging online store is today’s requirement for every store owner. To make product pages attractive, you must add interactive elements like a product slider. Here is how you can create a custom product slider for Magento 2 stores running on Hyvä Themes.
Steps to Create Custom Product Slider in Magento 2 Hyvä Themes:
Step 1: First, we need to create the Productslider.php file inside the extension at the following path.
app\code\Vendor\Extension\Block
Now, add the following code
<?php
namespace Vendor\Extension\Block;
use Magento\Catalog\Model\ResourceModel\Product\CollectionFactory;
use Magento\Framework\View\Element\Template\Context;
class Productslider extends \Magento\Framework\View\Element\Template
{
protected $productCollectionFactory;
public function __construct(
Context $context,
CollectionFactory $productCollectionFactory,
array $data = []
) {
$this->productCollectionFactory = $productCollectionFactory;
parent::__construct($context, $data);
}
public function getProductListCollection()
{
$collection = $this->productCollectionFactory->create();
$collection->addAttributeToSelect('*');
$collection->setPageSize(10);
return $collection;
}
}Step 2: After that, we need to create the product-slider.phtml file inside the extension at the following path.
app\code\Vendor\Extension\view\frontend\templates
Then add the code as follows
<?php
declare(strict_types=1);
use Vendor\Extension\Block\Productslider;
use Magento\Framework\Escaper;
use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\Slider;
/** @var Productslider $block */
/** @var Escaper $escaper */
/** @var ViewModelRegistry $viewModels */
$sliderViewModel = $viewModels->require(Slider::class);
$items = $block->getProductListCollection(); // 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(__('Update Products')))
->toHtml();
?>Step 3: Last, we need to create the cms_index_index.xml file inside the extension at the following path.
app\code\Vendor\Extension\view\frontend\layout
Then after include the below-mentioned code
<?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 class="Vendor\Extension\Block\Productslider"
name="homepage-product-slider"
template="Vendor_Extension::product-slider.phtml" />
</referenceContainer>
</body>
</page>Output:
Conclusion:
By following these steps, you have successfully created a custom product slider in Hyvä Themes. This interactive element can enhance user engagement and improve product visibility, leading to better conversions.
If you have any questions or need further enhancements, feel free to share your thoughts in the comments!
Happy Coding!
