How to Insert a Widget into Sidebar in Magento 2

Magento 2 provides an XML Widget file that allows you to manage the page layout as well as place CMS Blocks at any position on the page. In the tutorial today, I will instruct you how to insert a Widget into Sidebar with two elements: “Configure a Widget” and “Configure a Layout Update”.

Insert a Widget into Sidebar in Magento 2

• Configure a Widget
  • Step 1: Select the Type
  • Step 2: Complete the Layout Updates
  • Step 3: Place the Block
• Configure a Layout Update

Configure a Widget

Widget is the awesome functionality you can insert to the CMS page from Magento 2 Configuration because it can be considered as a predefined set of configuration options. In the widget, you can add links that navigate diretly to any content page, category, or product as you need.

Step 1: Select the Type

• On the Panel Admin, Content > Elements > Widgets.
• In the upper-right corner of Widgets workplace, click on Add New Widget button.
• In the Settings section:
  • Choose CMS Static Block type in the Type box.
  • Choose the current theme you are applying in the Design Theme.
  • Click Continue button.

• In the Storefront Properties section,
  • Enter Widget Title for the internal reference.
  • Assign the block to all store views in the Assign to Store View field or to any store view you want to apply the block.
  • Set the Sort Order if many blocks are placed at the same container. The block is at the top if the inserted value is zero.

Step 2: Complete the Layout Updates

• In the Layout Updates section, click on Layout Update to set the layout.
  • Choose the category, product, or page where shows the block in the Display on field.
  • If set to a specific page, you need to choose Page you want to the block to display and set Container that is the position of the page the block appears.

Step 3: Place the Block

• Continue to select Widget Options tab on the left panel.
• Click on Select Block to choose the block from the list you want to place.
• Click Save to complete.
• Remember to flush the cache by getting the Cache Management link in the system message at the top of the workplace.
• Go to your storefront to check the position of the block. If you want to the block, back to the widget settings and try a different page or block reference.

Configure a Layout Update

To insert the widget into sidebar, you need to make a layout update to the XML code by changing lightly in the code. Due to that, it is simple to place the CMS Block Static on right or left sidebar even or different positions on the page.

• On the Admin Panel, Content > Elements > Blocks.
• In the list of blocks, select the block you want to place, and then modify the Identifier.
• On the Admin Panel, Content > Elements > Pages.
• Choose the page where you want to place the block, then open the edit mode.

• On the left panel, select Design tab, in the Layout Update XML box, insert the code for the right or left sidebar.

  Code for CMS Block in Sidebar

  <reference name="right">
  <block type="cms/block" name="right.permanent.callout">
  <action method="setBlockId"><block_id>your-block-id</block_
  id></action>
  </block>
  </reference>
  

  • Change the reference name to identify either the “right” or “left” column, according to the layout of the page.
  • Change the block_id to the identifier of the block that is being placed.
• Save Page to complete.

Related Post

• Limiting block access, adding labels and setting display schedule
• Add Social Widget without extension
• Magento 2 Insert New Products List in Widget
• Orders and Returns Widget in Magento 2
• Prompt Widget in Magento 2