How to add widget in magento??

 

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).

How to add widget in magento??

 

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).

Codes to display the product in magento homepage

New products

Go to “CMS - Manage Pages” and select “Home Page” from the list of pages.

Use this code snippet to show products labeled as “new” on your front page:

1. {{block type="catalog/product_new" name="home.catalog.product.new" alias="product_homepage" template="catalog/product/new.phtml"}}

(Note that you must have some new products in your catalogue for anything to show when you do this. In this context newdoesn’t mean that you’ve recently added them; only products explicitly marked as new using ‘Set Product as New from Date’ and ‘Set Product as New to Date’ options in the ‘General’ product information page in the admin tool will be shown.)

All Products

Go to “CMS - Manage Pages” and select “Home Page” from the list of pages.

Use this code snippet to show all products in your catalog on your front page:

1. {{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" template="catalog/product/list.phtml"}}

All Products from one Category

Go to “CMS - Manage Pages” and select “Home Page” from the list of pages.

Use this code snippet to show one category on your front page:

1. {{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" category_id="4" template="catalog/product/list.phtml"}}

The category ID can be found when you go to “manage category” and then select the category you want. The ID is written in the header.

Examples are outdated, dosent work in magento 1.4.1

Layout Update XML for magento 1.4

Because in 1.4 version Layout update is different than in 1.3 version, you can use this example:

1. <reference name="content">
2.     <block type="catalog/product_list" name="featured" template="catalog/product/list.phtml">
3.         <action method="setCategoryId"><category_id>[category id here]</category_id></action>
4.     </block>
5. </reference>

Note: source taken from BrightEyesDavid’s post

It’s possible to add the ‘Root category’ ID here to show all products (Is Anchor Yes required!)

New products - Layout Update XML for magento 1.4

To display new product / latest product, you can use this following XML code in layout xml file or layout display in backend. You can use also the widgets to display the products. The code below has been inspired by the widget.

diglin

1. <reference name="content">
2.     <block type="catalog/product_new" template="catalog/product/new.phtml">
3.         <action method="setProductsCount"><count>5</count></action>
4.         <action method="addColumnCountLayoutDepend"><layout>empty</layout><count>6</count></action>
5.         <action method="addColumnCountLayoutDepend"><layout>one_column</layout><count>5</count></action>
6.         <action method="addColumnCountLayoutDepend"><layout>two_columns_left</layout><count>4</count></action>
7.         <action method="addColumnCountLayoutDepend"><layout>two_columns_right</layout><count>4</count></action>
8.         <action method="addColumnCountLayoutDepend"><layout>three_columns</layout><count>3</count></action>
9.     </block>
10. </reference>

New products with pagination - Layout Update XML for Magento 1.4.1

By default the Magento New.php and New.phtml block and template do not provide a way for you to display new products with pagination. The pagination and toolbar elements of Magento belong to the Mage_Catalog_Block_Product_List class. It is possible for one to overwrite the New.php file that Magento provides so that it extends the Mage_Catalog_Block_Product_List class and therefore has access to the pagination and toolbar. Found this article which shows how to do this. The steps are a bit long to re-post here, however. This works in Magento 1.4.1 -http://www.dnawebagency.com/displaying-new-products-in-magento-with-pagination