You can add widget in Magento using administrative tools.  Magento widgets add additional functionality to your shop and include effective ways to control the content:

  1. Dynamic information about products and marketing campaigns
  2. Dynamic information like "Recently viewed products" in static page.
  3. Promotional images that can be placed in different blocks, side panels, etc.
  4. Interactive elements and active components (additional systems reviews, video chat, forms for voting and subscription).
  5. Alternative navigation elements (for example tag cloud)
  6. Create interactive and dynamic flash elements that are easy to configure and integrate the content page.
  7. And even more…

What is Magento widget?

magento widget - widget

Magento widgets are blocks of the external interface with the predefined set of configuration options. These options are visible in the special edit form in admin panel when the widget is added by the store owner. Opportunity to customize configuration with ease allows web store owner to have full control over the location and content of Magento widget.

Magento widgets are designed to help people who fill sites and develops commercial expansion. They provide greater control over their behavior and makes their visual placement much easier.

How to add Magento widgets to your store page

Usually Magento widget development is not differs much from usual extension development, which provides better frontend performance. Magento widgets - if to say it simple - are extensions which are easy managed by webstore owner. You configure a widget as if you configure magento extension.

Extensions can have multiple corresponding Magento widgets. Widgets are tied to extension functionality.

The placement of the widget is implemented by user in the administrative panel. But there are at least two ways to insert Magento widget. Each of them should be used for right purpose.

Insert Magento widget with the help of WYSIWYG editor

This method should be used in case if you need to insert a widget in a certain part of the content of the CMS page, CMS block or whatever, where WYSIWYG editor is supported.

Just open or edit a page of the block, move the cursor to the location of the text where you want to insert the widget and click on the - the second button in the editor toolbar. Now you should  choose the form of your Magento widget. After selecting your widget, you will see all of the options in widget.xml.

Magento widget - wyswyg

After clicking on the Insert Widget the following code will be inserted in the editor:

When you will go to this page, Magento will “understood” that it should use the widget. Then you should work with it like with usual blocks: create specified class, and then call the toHtml method, which already generates the final HTML page.

Insert Magento widget in the admin panel

What to do if the first method is unsuitable.

Usually it happens in the following cases:

  1. If you need to insert Magento widget on the page where WYSIWYG editor is not available.
  2. If you need to insert a widget with the same settings on multiple pages, and you don’t want to repeat the procedure described above several times.
  3. If you need to insert a widget not in the main content, but header, footer, left column, etc.

Unfortunately, with the help of this method you can’t insert the widget between the first and second paragraphs of CMS pages, only after the entire contents. Also you can not insert widget on one particular CMS page (home page is an exception). In these cases you should choose the first method.

You should go to the Magento admin panel and choose CMS -> Widgets and click Add New Widget.  magento widget - add1

The first step is to create an instance of the widget. Here you choose the type of widget you want to insert and theme to use.

magento widget - add2

In the next step you could see the basic form of Magento widgets creation. It consists of two tabs: common for all widgets and specific for selected. The first tab is divided into 2 parts:

magento widget - add3

This section contains general settings, some of them you can’t change. If you have selected wrong widget type in the first step, you should repeat the whole procedure again. You can only change Instance Title and shop views on which you want to display the widget.

magento widget - add 4

Here are the most interesting and worthwhile points of this method. You have an opportunity to add your Magento widget to all pages or to some specific (even to specific category or product).

Click on Save and see the result of your work.

In case you need different values for different pages you should create new copy of your widget for each set.