Magento 2 custom product collection with layered navigation
Vinh Jacker | 3 days ago
The Most Popular Extension Builder for Magento 2
With a big catalog of 224+ extensions for your online store
The digital age has revolutionized the ways for business operation and when the website is used streamingly as a powerful tool for its success. The more advanced technologies are, the more convenience store owners are supposed to offer their customers. Of course, no one wants to challenge their client’s patience and make them find it hard to look up for some of their favorite items in millions. As a result, they will immediately abandon shopping carts as their online purchasing is time-consuming and unsatisfying.
Coming as the most updated and best versatile solution for every business, Layered Navigation for Magento 2 not only helps the online site have better SEO performance but also provides customers a fantastic navigation tool by minimizing the unnecessary time for shopping time and increasing user’s filtering experience. Among its attractive features, Layered Navigation Ultimate also allows the store admin to custom their product collection at the product page with ease. With this smart feature, the path to get the most conversion rate have never been easier.
Default Magento limitations
Confuse customers with too many items
When it comes to filters for product navigation, Magento 2 default has its limitations. A site with a bunch of items with various attributes makes people overwhelmed when it lacks a smart navigation tool for quick searching. And the case is much more difficult when the shoppers are looking for items without knowing exactly what category they belong to. For example, it is challenging for them to filter their desired jacket which costs around 100-200 USD and has red color on just one page.
Poor user experience
Besides, by default, Magento 2 requires users to reload the whole page, even products that are in the same collection after they add other filters. Not mention another drawback that SEO performance can not be fully prioritized to enhance your website position on search engines.
Solutions with Layered Navigation for Magento 2
When it comes to smart searching, all of Magento 2 default disadvantages can be effectively solved by Layered Navigation. Here are outstanding advantages this excellent extension can provide with custom product page features.
Best user-experience
Although online purchasing has integrated into our modern life since the robust development of technology, an E-commerce site is not always a familiar place to the shoppers, in particular on their first visit. In such a case, they may feel confused to get their favorite items as a hundred attributes are displayed at the same time. With unprofessional skills for searching, they may end up with stopping shopping right away.
For Layered Navigation Ultimate, shoppers don’t need to find the precise category page somewhere. With just a few mouse clicks, the client’s favorite items of all kinds are well displayed in just one page. That will be a delightful experience for all online buyers as they can shop with excellent assistance from the latest technology.
Consequently, the shoppers will fall in love with your store and prefer to visit for future purchases.
Marketing your product
When potential customers visit your store, they are likely to be attracted to items on the top of categories naturally. Therefore, it is entirely useful for any marketing strategy if new coming attributes are displayed first by default. It is a big chance that a potential product may get its fame and generate considerable revenue when launching. If you are running an online cloth store, do not hesitate to introduce the most attractive styles to boost sales.
Enhance the SEO performance
Besides the excellent custom product page to filter attributes, Mageplaza Layered Navigation also offers intelligent tools to optimize your site ranking. SEO-friendly URL composes of your site’s agenda which supports you on search engines and reminds customers for the next search.
Furthermore, by proper configuration for Meta Keywords, Meta Titles, and Meta Descriptions, store owners can increase the site rank in the search engine result pages. Don’t make your customers tired of shopping in your store with an amateur site. Taking advantage of Layered Navigation significantly to improve SEO performance as well as enhance customers’ experience and increase conversion rate.
How to manage Custom Product Collection
To meet the requirement of classifying a hundred kinds of products, Magento 2 Layered Navigation Ultimate will allow you to create as many Custom product pages as you want.
Adding a new product page and editing the existing product page, follow this structure Admin Panels > Mageplaza > Layered Navigation > Custom Product Pages. The configuration includes two sections:
Page information
After choosing/creating a specific Product page, select Page Information and scroll down to see some essential information:
There are three fields related to SEO performance.
Default attribute
This outstanding feature allows you to set the default attribute for the all products page. That means when the shoppers open the all products page, you can decide which products will be displayed first. For example, if you set the option Cool and Cold of the attribute Climateas the Default Attributes, the items which have Cool and Cold will be displayed first when the shoppers go to the Custom Product Pages.
How to create layered navigation on a custom page in Magento 2?
1. Create di.xml with the following code under Mageplaza/LayeredNavigation/etc/ folder
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
<preference for="Magento\Catalog\Model\Layer\ContextInterface" type="Magento\Catalog\Model\Layer\Context" />
<preference for="Magento\Catalog\Model\Layer\ItemCollectionProviderInterface" type="Magento\Catalog\Model\Layer\Category\ItemCollectionProvider" />
<preference for="Magento\Catalog\Model\Layer\StateKeyInterface" type="Magento\Catalog\Model\Layer\Category\StateKey" />
<preference for="Magento\Catalog\Model\Layer\CollectionFilterInterface" type="Magento\Catalog\Model\Layer\Category\CollectionFilter" />
<preference for="Magento\Catalog\Model\Layer\FilterableAttributeListInterface" type="Magento\Catalog\Model\Layer\Category\FilterableAttributeList" />
<preference for="Magento\Catalog\Model\Layer\AvailabilityFlagInterface" type="Magento\Catalog\Model\Layer\Category\AvailabilityFlag" />
<preference for="Magento\Catalog\Model\ResourceModel\Layer\Filter\Price" type="Mageplaza\LayeredNavigation\Model\ResourceModel\Layer\Filter\Price" />
</config>
2. Add the following in the layout file which in my case is layerednavigation_index_index.xml under Mageplaza/LayeredNavigation/view/frontend/layout/ folder
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<attribute name="class" value="page-products"/>
<referenceContainer name="content">
<block class="Mageplaza\LayeredNavigation\Block\Product\ListProduct" name="layerednavigation_index_index" as="product_list" template="Magento_Catalog::product/list.phtml">
<container name="category.product.list.additional" as="additional" />
<block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers" as="details.renderers">
<block class="Magento\Framework\View\Element\Template" name="category.product.type.details.renderers.default" as="default"/>
</block>
<block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="category.product.addto" as="addto">
<block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
name="category.product.addto.compare" as="compare"
template="Magento_Catalog::product/list/addto/compare.phtml"/>
</block>
<block class="Magento\Catalog\Block\Product\ProductList\Toolbar" name="product_list_toolbar" template="Magento_Catalog::product/list/toolbar.phtml">
<block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>
</block>
<action method="setToolbarBlockName">
<argument name="name" xsi:type="string">product_list_toolbar</argument>
</action>
</block>
</referenceContainer>
<referenceContainer name="sidebar.main">
<block class="Mageplaza\LayeredNavigation\Block\Navigation" name="catalog.leftnav" as="navigation" before="-" template="Magento_LayeredNavigation::layer/view.phtml">
<block class="Mageplaza\LayeredNavigation\Block\Navigation\State" name="catalog.navigation.state" as="state" template="Magento_LayeredNavigation::layer/state.phtml" />
<block class="Magento\LayeredNavigation\Block\Navigation\FilterRenderer" name="catalog.navigation.renderer" as="renderer" template="Magento_LayeredNavigation::layer/filter.phtml">
<arguments>
<argument name="product_layer_view_model" xsi:type="object">Magento\LayeredNavigation\ViewModel\Layer\Filter</argument>
</arguments>
</block>
</block>
</referenceContainer>
<referenceBlock name="layerednavigation_index_index">
<arguments>
<argument name="viewModel" xsi:type="object">Magento\Catalog\ViewModel\Product\OptionsData</argument>
</arguments>
</referenceBlock>
</body>
</page>
In the above code, we have added class page-products to the body tag to inherit the default styling.
3. Then, we will override the model files to get required data. Create Layer.php under Mageplaza/LayeredNavigation/Model/ folder with following code
<?php
namespace Mageplaza\LayeredNavigation\Model;
use Magento\Catalog\Api\CategoryRepositoryInterface;
use Magento\Catalog\Model\ResourceModel\Product\Attribute\CollectionFactory as AttributeCollectionFactory;
use Magento\Catalog\Model\ResourceModel\Product\CollectionFactory;
class Layer extends \Magento\Catalog\Model\Layer
{
public function __construct(
\Magento\Catalog\Model\Layer\ContextInterface $context,
\Magento\Catalog\Model\Layer\StateFactory $layerStateFactory,
AttributeCollectionFactory $attributeCollectionFactory,
\Magento\Catalog\Model\ResourceModel\Product $catalogProduct,
\Magento\Store\Model\StoreManagerInterface $storeManager,
\Magento\Framework\Registry $registry,
CategoryRepositoryInterface $categoryRepository,
CollectionFactory $productCollectionFactory,
array $data = []
) {
$this->productCollectionFactory = $productCollectionFactory;
parent::__construct(
$context,
$layerStateFactory,
$attributeCollectionFactory,
$catalogProduct,
$storeManager,
$registry,
$categoryRepository,
$data
);
}
public function getProductCollection()
{
if (isset($this->_productCollections['mageplaza_custom'])) {
$collection = $this->_productCollections['mageplaza_custom'];
} else {
//here you assign your own custom collection of products
$collection = $this->productCollectionFactory->create();
$this->prepareProductCollection($collection);
$this->_productCollections['mageplaza_custom'] = $collection;
}
return $collection;
}
}
4. After that, create Resolver.php under Mageplaza/LayeredNavigation/Model/Layer/ folder with following code
<?php
namespace Mageplaza\LayeredNavigation\Model\Layer;
class Resolver extends \Magento\Catalog\Model\Layer\Resolver
{
public function __construct(
\Magento\Framework\ObjectManagerInterface $objectManager,
\Mageplaza\LayeredNavigation\Model\Layer $layer,
array $layersPool
) {
$this->layer = $layer;
parent::__construct($objectManager, $layersPool);
}
public function create($layerType)
{
}
}
5. Then under Mageplaza/LayeredNavigation/Model/ResourceModel/Layer/Filter/ folder create Price.php file
<?php
namespace Mageplaza\LayeredNavigation\Model\ResourceModel\Layer\Filter;
use Magento\Framework\App\Http\Context;
use Magento\Framework\Indexer\DimensionFactory;
use Magento\Framework\Search\Request\IndexScopeResolverInterface;
class Price extends \Magento\Catalog\Model\ResourceModel\Layer\Filter\Price
{
public function __construct(
\Magento\Framework\Model\ResourceModel\Db\Context $context,
\Magento\Framework\Event\ManagerInterface $eventManager,
\Mageplaza\LayeredNavigation\Model\Layer\Resolver $layerResolver,
\Magento\Customer\Model\Session $session,
\Magento\Store\Model\StoreManagerInterface $storeManager,
$connectionName = null,
IndexScopeResolverInterface $priceTableResolver = null,
Context $httpContext = null,
DimensionFactory $dimensionFactory = null
) {
parent::__construct($context, $eventManager, $layerResolver, $session, $storeManager, $connectionName, $priceTableResolver, $httpContext, $dimensionFactory);
}
}
So, we are done with the model and we will override the block to show proper data.
6. Now create Navigation.php file under Mageplaza/LayeredNavigation/Block/ folder with following content
<?php
namespace Mageplaza\LayeredNavigation\Block;
class Navigation extends \Magento\LayeredNavigation\Block\Navigation
{
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
\Mageplaza\LayeredNavigation\Model\Layer\Resolver $layerResolver,
\Magento\Catalog\Model\Layer\FilterList $filterList,
\Magento\Catalog\Model\Layer\AvailabilityFlagInterface $visibilityFlag,
array $data = []
) {
parent::__construct($context, $layerResolver, $filterList,
$visibilityFlag);
}
}
7. Create State.php file under Mageplaza/LayeredNavigation/Block/Navigation/ folder with following code
<?php
namespace Mageplaza\LayeredNavigation\Block\Navigation;
class State extends \Magento\LayeredNavigation\Block\Navigation\State
{
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
\Mageplaza\LayeredNavigation\Model\Layer\Resolver $layerResolver,
array $data = []
) {
parent::__construct($context, $layerResolver, $data);
}
}
8. Then under Mageplaza/LayeredNavigation/Block/Product/ folder create ListProduct.php and add following code
<?php
namespace Mageplaza\LayeredNavigation\Block\Product;
class ListProduct extends \Magento\Catalog\Block\Product\ListProduct
{
public function __construct(
\Magento\Catalog\Block\Product\Context $context,
\Magento\Framework\Data\Helper\PostHelper $postDataHelper,
\Mageplaza\LayeredNavigation\Model\Layer\Resolver $layerResolver,
\Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository,
\Magento\Framework\Url\Helper\Data $urlHelper,
array $data = []
) {
parent::__construct($context, $postDataHelper, $layerResolver,
$categoryRepository, $urlHelper, $data);
}
}
That’s all, we have overridden all the required files.
Final words
In summary, customer product collection is a great feature for e-commerce stores. Incorporating Magento 2 custom product collection with layered navigation helps to enhance smart navigation and improve your e-commerce store’s performance. By providing a streamlined and personalized shopping experience, you can boost customer satisfaction, increase sales, and enhance SEO. Follow this guide to set up your custom collections and layered navigation properly, and monitor their performance to ensure your e-commerce store gets success in marketing.
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
Related Post
Top 10 Shopify ERP Solutions to Improve Operation Efficiency
Discover the top 10 Shopify ERP solutions to streamline your business operations, improve efficiency, and automate inventory management & order fulfillment.
Set Up Subscriptions On Shopify In 3 Minutes
Easily set up subscriptions on Shopify! Follow our guide for adding subscription products, creating policies, and choosing the best apps for your store's needs.
How to Connect Your Shopify Store to ActiveCampaign?
Learn how to connect Shopify to ActiveCampaign and unlock automated marketing strategies. In no time, synchronize consumer data and develop customized email campaigns.
Magento 2 Vue Storefront: Power Up Your Online Business
Unlock your Magento 2 store’s potential with Vue Storefront, a modern PWA solution that enhances performance, flexibility, and customer experience across all devices
Magento Self-Hosted vs Managed Hosting: What’s the Different
Differentiate Magento Self-hosted and Managed Hosting, examine each option’s pros and cons, and find out which is the most suitable choice for your business.
Top 10 Shopify ERP Solutions to Improve Operation Efficiency
Discover the top 10 Shopify ERP solutions to streamline your business operations, improve efficiency, and automate inventory management & order fulfillment.
Set Up Subscriptions On Shopify In 3 Minutes
Easily set up subscriptions on Shopify! Follow our guide for adding subscription products, creating policies, and choosing the best apps for your store's needs.
How to Connect Your Shopify Store to ActiveCampaign?
Learn how to connect Shopify to ActiveCampaign and unlock automated marketing strategies. In no time, synchronize consumer data and develop customized email campaigns.
Magento 2 Vue Storefront: Power Up Your Online Business
Unlock your Magento 2 store’s potential with Vue Storefront, a modern PWA solution that enhances performance, flexibility, and customer experience across all devices
Magento Self-Hosted vs Managed Hosting: What’s the Different
Differentiate Magento Self-hosted and Managed Hosting, examine each option’s pros and cons, and find out which is the most suitable choice for your business.
& Maintenance Services
Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.
Get Started