1

I want to add sidebar All Product tab in custom layout in magento2?

enter image description here

How to do that.

Thanks.

0

I do this by one of the module for adding sidebar

The name of module is Sidebar. You need to begin with registration.php and module.xml.

registration.php

 <?php
 use \Magento\Framework\Component\ComponentRegistrar;
 ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Vendor_Sidebar', __DIR__);

the we will create composer.json

 {
  "name": "Vendor/sidebar",
  "description": "A Magento 2 module that has sidebar",
  "type": "magento2-module",
  "version": "2.0.3",
  "license": [
    "OSL-3.0",
    "AFL-3.0"
  ],

  "require": {
    "php": "~5.5.0|~5.6.0|~7.0.0",
    "magento/framework": "~100.0"
  },

  "autoload": {
    "files": [ "registration.php" ]
  }

}

then we will create etc/module.xml

 <?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_Sidebar" setup_version="1.0.0" />
</config>

The structure of above files is readable, and its enough to define a module. Now sidebar will be added.

So with this app/code/Vendor/Sidebar/view/frontend/layout/ folder structure we'll create folders and then we will create a file with in layout folder default.xml.

Note: Here default.xml is used to add a block to side bar which is available throughout the site, but if you want to add side bar for some specific action then you can you need to write below code to that action xml file.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
      <body>
     <referenceContainer name="sidebar.additional">
            <block class="Vendor\Sidebar\Block\Sidebar" name="sps.sidebar.custom" template="Vendor_Sidebar::sidebar/custom_template.phtml " before="-" />
     </referenceContainer>
</body>
</page>

Inside tag there is tag referenceContainer which is named as sidebar.additional . This sidebar.additional adds your block to sidebar (left or right) based on page layout.

So here we have added a block which has class Vendor\Sidebar\Block\Sidebar and template Vendor_Sidebar::sidebar/custom_template.phtml . Here in template attribute you may have noticed we have written the module name beforehand :: (double colon) , why? So most importantly y ou need to know from which module you are using this template; Then there exist another sidebar/ which is folder name inside frontend/template.

Plus, there is one more thing before=”-” , this is because we want to display our block to be very top of sidebar. If you want to show you block after some block then you can specify block name here.

For example: I want to display my block after wishlist then we can define wishlist instead of '-'.

Magento also incorporating flexibility for you to add before or after of any block, so you can use after attribute here also instead of before.

Now we will create one block file and one template file as defined above.

File: Vendor\Sidebar\Block\Sidebar.php

<?php
namespace Vendor\Sidebar\Block;
class Sidebar extends \Magento\Framework\View\Element\Template {

    public function __construct(

            \Magento\Framework\View\Element\Template\Context $context

            ,array $data = [])

    {
        parent::__construct($context, $data);
    }
}

Now File: app/code/Vendor/Sidebar/view/frontend/templates/sidebar/custom_template.phtml

<div  class="block block-custom-sidebar">
    <div class="block-title">
        <strong>My Custom Sidebar</strong>
    </div>
    <div class="block-content">
         // you content here
        My first sidebar content
    </div>
</div>

I hope this will help

  • I dont need to customise side bar .... i want to add side bar in particular tab – Mano M Mar 8 at 9:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.