Code to show different mode (list or grid mode) for different category

To show categories in a custom way, you need to create a new module and add an attribute considering it as show_mode name. Below is the code for the same:- Firstly you need to add setup/installData.php in your module and add the install function which will create the attribute(Magento 2.1+ version):-

<?php

namespace W3solver\Customcategorymode\Setup;

use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Framework\Setup\InstallDataInterface;


class InstallData implements InstallDataInterface {

    private $eavSetupFactory;

    public function __construct(EavSetupFactory $eavSetupFactory) {
        $this->eavSetupFactory = $eavSetupFactory;
    }

    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context) {
        $setup->startSetup();

        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
        $eavSetup->addAttribute(
                \Magento\Catalog\Model\Category::ENTITY, 'show_mode', [
            'type' => 'varchar',
            'label' => 'Show Mode',
            'input' => 'select',
            'required' => false,
            'source' => 'W3solver\Customcategorymode\Model\Category\Attribute\Source\Showmode',
            'sort_order' => 102,
            'visible' => true,
            'user_defined' => true,
            'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
            'group' => 'Display Settings',
                ]
        );


        $setup->endSetup();
    }

}

To view the show mode field in admin panel UI components needs to be created in view/adminhtml/ui_component/category_form.xml

<?xml version="1.0" encoding="UTF-8"?>
    <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
        <fieldset name="display_settings">
            <field name="show_mode">
                <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">W3solver\Customcategorymode\Model\Category\Attribute\Source\Showmode</item>
                    <item name="config" xsi:type="array">
                        <item name="sortOrder" xsi:type="number">102</item>
                        <item name="dataType" xsi:type="string">string</item>
                        <item name="formElement" xsi:type="string">select</item>
                        <item name="label" xsi:type="string" translate="true">Show Mode</item>
                    </item>
                </argument>
            </field>    
        </fieldset>
</form>

Also add a source model in Model/Category/Attribute/Source/Showmode.php and write below function:-

<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace W3solver\Customcategorymode\Model\Category\Attribute\Source;

/**
 * Catalog category landing page attribute source
 *
 * @author      Magento Core Team <core@magentocommerce.com>
 */
class ShowMode extends \Magento\Eav\Model\Entity\Attribute\Source\AbstractSource
{
     public function getAllOptions()
    {
        if (!$this->_options) {
            $this->_options = [
                ['value' => \Magento\Catalog\Helper\Product\ProductList::VIEW_MODE_LIST, 'label' => __('List')],
                ['value' => \Magento\Catalog\Helper\Product\ProductList::VIEW_MODE_GRID, 'label' => __('Grid')],
            ];
        }
        return $this->_options;
    }
}

Now you need to override list.phtml file in frontend/layout/catalog_category_view.xml

<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>
        <referenceBlock name="category.products.list" template="W3solver_Customcategorymode::product/list.phtml"/>
    </body>
</page>

Now you need to change the product listing code, add a file in view/frontend/templates/product/list.phtml
Add the code on line number 28

 $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');//get current category
 
    if ($category->getShowMode() == 'list') {
        $showGrid = 'list';
    } else {
        $showGrid = 'grid';
    }

    if ($showGrid == 'grid') {
        $viewMode = 'grid';
        $image = 'category_page_grid';
        $showDescription = false;
        $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
    } else {
        $viewMode = 'list';
        $image = 'category_page_list';
        $showDescription = true;
        $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW;
    }

6 Comments

  1. Hi – is a field supposed to be created in the database? I am not seeing a new column in any table although I do see the field in admin. It is not working for me i.e. the selected attribute in admin is not being applied and possibly because I am missing a database field? (Magento 2.1.4) Thanks

    Reply

Leave a Comment.