Overview

Magento Widgets allow business users with no technical knowledge to easily add dynamic content (including product data, for example) to pages in Magento Stores. This allows for greater control and flexibility in creating informational and marketing content through administrator tools, enabling intuitive and efficient control of content such as:

1. Dynamic product data in Marketing Campaign Landing Pages
2. Dynamic Information such as Recently Viewed Items into Content Pages
3. Promotional images to position in different blocks, side columns and other locations throughout the storefront
4. Interactive elements and action blocks (external review systems, video chats, voting and subscription forms)
5. Alternative navigation elements (tag clouds, catalog image sliders)
6. Create interactive and dynamic flash elements easily configured and embedded within content pages for enhanced user experience
7. And lots more ...

What are Widgets?

Magento Widgets are frontend blocks with a predefined set of configuration options. These configuration options are displayed in a special edit form in the backend panel when a widget is being added or edited by a store owner. The ability to easily set widget configuration options allows for the full control of widget placement on a page to store owners.

Configuration options for selecting a product link widget to be inputted in the header of all product pages and in all Pages using a Three-Column layout

The Magento Community Edition Version 1.4, and the Enterprise Edition Version 1.6, facilitate the ease of using custom frontend extensions even more by introducing this new concept of customizable Magento Widgets, which can help Magento contributors and commercial extension developers provide more control over the frontend extension behavior and visual block placement to store owners.

How to Develop a Widget

Typically, developing a widget doesn’t differ much from developing a regular Magento extension which provides frontend functionality. If you want to allow a store owner to define different configuration options per block instance and to have full control over the placement of the block instance on a page (that also includes ability to add block into a CMS page or CMS static block) – the widget format will help you to do so.

Extension can then have any number of Magento Widgets. Widgets are typically related to the functionality which is provided by the extension itself. You can also develop widgets which add configuration options and placement control to the functionality which already exists in extensions.

Your Magento extension can also create and add pre-configured widget instances to defined pages right upon the extension installation.

You can package Magento extensions with widgets as you would any other extension and then upload them to Magento Connect under the Widgets category.

There is a new tutorial available in the Magento Knowledge Base which covers creating custom widgets:

• Tutorial: Creating a Magento Widget, Part 1 is a quick introduction to widget development which describes creating simple widgets for adding social bookmarking links on a page.

• Tutorial: Creating a Magento Widget, Part 2 introduces widget configuration options. You will learn how to define widgets configuration options that can be modified by a store owner and create another simple widget which adds a configurable list of bookmarking links on a page.

All the sample widgets described in the tutorial are available to download on Magento Connect. Please note that the widgets are compatible with Magento 1.4.0.0-alpha3 and up. You can also download the full source code of the sample widgets in archived format from the tutorial pages.

Terminology

You can check the Magento Designer’s Guide Design Terminologies chapter to get a general understanding of the blocks concept.

1. Frontend Block – an element which creates the visual output either by assigning visual structure or by producing the actual content.
2. Magento Widget – a frontend block that implements a special widget interface which allows for having different configuration options per each block instance, and the ability to have multiple independent block instances on pages.
3. Magento Widget Instance – a concrete block on a single page or multiple pages which receives its configuration options as defined by a store owner in the backend. The same widget can be added to the frontend multiple times producing multiple instances of the same widget.
   * Please note, that a single widget instance can also be added to multiple pages (with the same configuration options values) and managed as a single entity.

Widget Examples in Magento CE 1.4, EE 1.6

Magento Widgets' flexibility provides many possible uses. Magento CE 1.4 and EE 1.6 includes the following configurable widgets, and new widgets can be created by developers as detailed in the sections above.

1. CMS Page Link – displays a link to a selected CMS Page, and allows specifying custom text and title. Two templates are available for this widget – inline link and block template.

2. CMS Static Block – displays content of a selected static block.

3. Catalog Category Link – displays a link to a selected catalog category, and allows specifying custom text and title. Two templates (inline and block) are available.

4. Catalog Product Link – displays a link to a selected catalog product, and allows specifying custom text and title. Two templates (inline and block) are available.

5. Recently Compared Products - displays a block which contains recently compared products. This Widget allows for specifying the number of products to be displayed and has two templates available (product list or product grid view).

6. Recently Viewed Products - displays a block which contains recently viewed products. This Widget allows for specifying the number of products to be displayed and has two templates available (product list or product grid view).