RocketTheme Magazine
Widgets are "frontend blocks with a predefined set of configuration options" as Magento puts it. The great thing about them is that they can be added to different parts of a page simply by selecting a "Layout Block" from the Widgets settings. This means no messing around with xml layout files or hard-coding elements.
In this article we'll show you how to use a Widget to show a CMS Static Block on the product page. Something that's been asked quite a few times in our Magento forum is how to add "social" elements to products, so we'll use that as an example. We'll use "AddThis" (http://www.addthis.com) for the sake of simplicity, but you can obviously replace that with something else if you wish.
Creating the Static Block
The first thing we need to do is to create a “CMS Static Block”, and add the script for our “AddThis” buttons. So, from the admin, go to CMS -> Static Blocks -> Add New Block. The name and the identifier aren't important here, but we'll use "addthis" to keep things simple. Select the store view you want it enabled for, and set the status to "Enabled".
Next, go to http://www.addthis.com and get the code for the buttons. Copy it and paste it into the "Content" input, making sure to hide the wysiwyg editor first, and save.
Creating the Widget
Next up, go to CMS -> Widgets -> Add New Widget Instance. For the "Type" select "CMS Static Block". For the "Design" select your current theme. The “Title” can again be anything, such as "Social", and then choose your store view to assign it to. Now comes the important bit - the "Layout Updates" section.
First, select the category/product/pages you wish this widget to appear on. For this example, we only want it on our product pages, so select "All Product Types". The "Block Reference" is the location the widget will be injected into. You can of course experiment here with different locations, but in this case, we want it somewhere around the price, so the "Product View Extra Hint" will suit us fine.
Next select the "Widget Options" tab on the left, click "Select Block", and choose the "AddThis" block we created previously, and save.
Fixing a Magento Bug with Widget Layouts
One last thing we need to do. This only applies to themes that use their own packages, such as ours. There's a bug with Magento that, for packages other than "default", you need to be sure to add the word "default" in the System -> Configuration -> Design -> Themes -> Layout input, as follows:
Without this the widget won't appear on the frontend. Leaving it blank should set it to use the default, but for some reason it doesn't. I submitted a bug report for that but who knows when it will be fixed!
So that's it, if you check a product page, you should now have a set of social sharing icons under the product price (make sure your cache is cleared):
Each button also gets it's own class, so you can easily reposition them with a little css:
I hope this gives you an insight into using Widgets and Static Blocks. There's many things they can be used for, you just need to get creative!
About the Author:
