PHP Magento Tips

Add Your Custom Widget Templates To Any Widget Options In Magento

Rate this posting:
{[['']]}

It is very easy to add your own custom templates to the Template choice in the Magento built in widget configuration!

Magento’s Core Widget’s XML configuration files are designed in a such a way that it allow us to do everything and we can easily override and inject our own custom code into the default module configurations.
Here, first we create a dummy local module for our widget and add a local widget.xml configuration file which override magentos’s core widget.

Let’s see how we can add another template to the ‘catalog product link’ widget. By default, it comes with one Block and one inline template:


Step 1. Create Your Module

Under the app/code/local directory, create the following folder structure:

/app/code/local/Vijay/Custom/etc/

First, make the module officiallay necessary file, Vijay_Custom.xml in /app/etc/modules/:

<?xml version="1.0" encoding="UTF-8"?>

<config>

    <modules>

        <Vijay_Custom>

            <active>true</active>

            <codePool>local</codePool>

            <depends>

                <Mage_Widget />

            </depends>

        </Vijay_Custom>

    </modules>

</config>


Create a config.xml in /app/code/local/Vijay/Custom/etc/ containing:

<?xml version="1.0" encoding="UTF-8"?>

<config>

    <modules>

        <Vijay_Custom>

            <version>0.1.0</version>

        </Vijay_Custom>

    </modules>

</config>


Also create a blank file called widget.xml. We will add our custom widget configuration option there later.

Step 2. Find the Widget Configuration

Find the widget configuration file under the Magento Core Catalog module. In the file /app/code/core/Mage/Catalog/etc/widget.xml we see the following XML that is relevant to our customization:


   <catalog_product_link type="catalog/product_widget_link" translate="name description" module="catalog">

        <name>Catalog Product Link</name>

        <description>Link to a Specified Product</description>

        <is_email_compatible>1</is_email_compatible>

        <parameters>

            <id_path translate="label">

                <visible>1</visible>

                <required>1</required>

                <label>Product</label>

                <type>label</type>

                <helper_block>

                    <type>adminhtml/catalog_product_widget_chooser</type>

                    <data>

                        <button translate="open">

                            <open>Select Product...</open>

                        </button>

                    </data>

                </helper_block>

                <sort_order>10</sort_order>

            </id_path>

            <anchor_text translate="label description">

                <visible>1</visible>

                <label>Anchor Custom Text</label>

                <description>If empty, the Product Name will be used</description>

                <type>text</type>

            </anchor_text>

            <title translate="label">

                <visible>1</visible>

                <label>Anchor Custom Title</label>

                <type>text</type>

            </title>

            <template translate="label">

                <label>Template</label>

                <visible>1</visible>

                <type>select</type>

                <value>catalog/product/widget/link/link_block.phtml</value>

                <values>

                    <default translate="label">

                        <value>catalog/product/widget/link/link_block.phtml</value>

                        <label>Product Link Block Template</label>

                    </default>

                    <link_inline translate="label">

                        <value>catalog/product/widget/link/link_inline.phtml</value>

                        <label>Product Link Inline Template</label>

                    </link_inline>

                </values>

            </template>

        </parameters>

    </catalog_product_link>

Here Under the <template> node find the <value> node which contains the paths and label names for the display of the available templates. There are “Product Link Block Template” and “Product Link Inline Template” are available.

Now, we will make our custom template and put it into the list below these two templates.

Step 3. Create Custom Template(s)

We’ll just create one custom template but you are not limited to only one. You can create as many as you need. We will create our custom template in our own template directory so, make: /app/design/frontend/base/default/template/vijay/widget/

Copy the /app/design/fontend/base/default/catalog/product/widget/link/link_block.phtml file over to the new directory and rename it to custom_product_link.phtml.

Step 4. Add Your Custom Template to the Widget Configuration:

now add below code in widget.xml file that we created before:

<?xml version="1.0" encoding="UTF-8"?>
<widgets>
    <catalog_product_link>
        <parameters>
            <template>
                <values>
                    <custom_product translate="label">
                        <value>vijay/widget/custom_product_link.phtml</value>
                        <label>Display Custom Product Link Information</label>
                    </custom_product>
                </values>
            </template>
        </parameters>
    </catalog_product_link>
</widgets>

Here we didn’t added everything from the original widget.xml but only the nodes we wanted to “inject” with our template. Magento will simply add our template value to the default values and show our new option in the widget configuration:


Note that our value for the template node is: < custom_product>. It is necessary that this is a unique value so don’t use <default> <grid> or <list>. Always add your own like <my_custom>, <my_custom_list>.

Step 5. Customize your Template

Now, This one is the most important part of this Blog Post. After creating your custom .phtml file, you are always thinking what to write in this file. Check file in /app/code/core/Mage/Catalog/Block/Widget/Link.php. you will find some good stuff over there. Now add below code in your custom template.

<?php
$idPath = explode('/', $this->_getData('id_path'));
if (isset($idPath[0]) && isset($idPath[1]) && $idPath[0] == 'product') {
    $productId = $idPath[1];//get product ID from here.
    $product=Mage::getModel('catalog/product')->load($productId);//Load Product object with Product ID.
    Zend_Debug::dump($product);
    //after getting product object do whatever what you want to customize your template.
}
?> 
Tag : Magento
3 Comments On "Add Your Custom Widget Templates To Any Widget Options In Magento"

The blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents...Great job, keep it up..
ecommerce website development company | ECommerce Development Company in Bangalore|Ecommerce Website Design and Development Company in Bangalore | Magento Development Company

Thanks for the best blog.it was very useful for me.keep sharing such ideas in the future as well.this was actually what i was looking for,and i am glad to came here!
magento development company in bangalore 

I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in Typo3, kindly contact us http://www.maxmunus.com/contact
MaxMunus Offer World Class Virtual Instructor led training on Typo3. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
For Demo Contact us:
Name : Arunkumar U
Email : arun@maxmunus.com
Skype id: training_maxmunus
Contact No.-+91-9738507310
Company Website –http://www.maxmunus.com


Back To Top