Add Side Bar In Magento2

Do think adding sidebar in Magento 2 is a daunting task? Well, it’s not! Here is how to add side bar blocks in magento2 with ease. Sidebar block allow you to add some text or products or anything you want into sidebar (left or right).

Attachment 3510

Through the simple module it can be easily displayed how to add out block or template to sidebar.

But before that there is one thing that we should notice “Earlier Magento has left and right sidebar layout elements, so can add either in left or right.” and you need to set blocks for right and left layout respectively.

But in Magento2 “there is no specific layout for left and right”, sidebar position is based on page layout.

For example: We have a page that has 2column-left layout, then your sidebar will be shown in left side.

And if there is a page which has 2column-right layout, then your sidebar will be shown in right side.

Now we begin with the lesson:

You must be aware how to create a module, but let’s move further step by step.

So, here is the list of files created:

app/code/Softprodigy/Sidebar/Block/Sidebar.php
app/code/Softprodigy/Sidebar/etc/module.xml
app/code/Softprodigy/Sidebar/view/frontend/layout/default.xml
app/code/Softprodigy/Sidebar/Block/Sidebar.php
app/code/Softprodigy/Sidebar/view/frontend/templates/sidebar/custom_template.phtml
app/code/Softprodigy/Sidebar/registration.php
app/code/Softprodigy/Sidebar/composer.json
The name of our module is “Sidebar”. You need to begin with “registration.php” and “module.xml”.

registration.php

<?php

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::M ODULE, 'Softprodigy_Sidebar', __DIR__);

the we will create composer.json

{

"name": "softprodigy/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:framewo rk:Module/etc/module.xsd">

<module name="Softprodigy_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/Softprodigy/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:framewo rk:View/Layout/etc/page_configuration.xsd">

<body>

<referenceContainer name="sidebar.additional">

<block class="Softprodigy\Sidebar\Block\Sidebar" name="sps.sidebar.custom" template="Softprodigy_Sidebar::sidebar/custom_template.phtml " before="-" />

</referenceContainer>

</body>

</page>

The code is readable, but the above codes needs to be understood first.

Inside <body> 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 Softprodigy\Sidebar\Block\Sidebar and template Softprodigy_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 eg: 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: Softprodigy\Sidebar\Block\Sidebar.php

<?php

namespace Softprodigy\Sidebar\Block;

/*

* To change this license header, choose License Headers in Project Properties.

* To change this template file, choose Tools | Templates

* and open the template in the editor.

*/

class Sidebar extends \Magento\Framework\View\Element\Template {

/**

* Constructor

*

* @param Template\Context $context

* @param array $data

*/

public function __construct(

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

,array $data = [])

{

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

}

}

Now File: app/code/Softprodigy/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>

Now we are done with sidebar, and now we should enable our module and can see our sidebar.

Before executing below common please flush your cache from magento admin.

Enable extension: Command inside your magento2 directory

1. php bin/magento module:enable Softprodigy_Sidebar

2.then execute php bin/magento setup:upgrade