Creating a Magento Extension that uses a jQuery Plugin

The Zoom Position field is a drop-down that displays the zoom position options. Magento has many source models (yes/no, enable/disable), but there are times when you want to create a customoption.

<zoom_position translate="label">
        <label>Zoom Position</label>
        <frontend_type>select</frontend_type>
        <source_model>configurablecolors_adminhtml/system_config_source_zoomposition</source_model>
        <sort_order>2</sort_order>
        <show_in_default>1</show_in_default>
        <show_in_website>1</show_in_website>
        <show_in_store>1</show_in_store>
        <depends><show_zoom>1</show_zoom></depends>
</zoom_position>

The format for the location of your source model file is:

_adminhtml/system_config_source_

So I created my Zoom Position source model in:

/app/code/community/Grasshopperpebbles/Configurablecolors/Adminhtml/Model/System/Config/Source/Zoomposition.php

The file contains the values that I want to display in my select (drop-down):

class Grasshopperpebbles_Configurablecolors_Adminhtml_Model_System_Config_Source_Zoomposition
{
    public function toOptionArray()
    {
        return array(
            array('value'=>'inside', 'label'=>Mage::helper('adminhtml')->__('Inside')),
            array('value'=>'left', 'label'=>Mage::helper('adminhtml')->__('Left')),
            array('value'=>'right', 'label'=>Mage::helper('adminhtml')->__('Right')),                       
        );
    }
}

In order for Magento to properly locate the , I had to update the model section of config.xml:

<global>
        ...
        <models>
             <configurablecolors>
		    <class>Grasshopperpebbles_Configurablecolors_Model</class>       
             </configurablecolors>
             <configurablecolors_adminhtml>
	            <class>Grasshopperpebbles_Configurablecolors_Adminhtml_Model</class>
	     </configurablecolors_adminhtml>
        </models>    
        ...
</global>

With the completed, the Zoom Position drop-down appears in the admin panel.

configurable_colors_zoom_position

Default Values

I also want to my extension’s configuration fields to display default values. I add these values to the bottom of my config.xml file.

<default>
    	<configurablecolors>
    		<images>
    			<thumb_width>56</thumb_width>
    			<thumb_height></thumb_height>
    			<image_width>365</image_width>
    			<image_height></image_height>
    		</images>
    		<swatch_settings>
    			<swatch_width></swatch_width>
    			<swatch_height></swatch_height>
    			<swatch_selected_width></swatch_selected_width>
    			<swatch_selected_height></swatch_selected_height>
    			<swatch_selected_border_size></swatch_selected_border_size>
    			<swatch_selected_border_color></swatch_selected_border_color>
    		</swatch_settings>
    		<zoom_settings>
    			<show_zoom>1</show_zoom>
    			<zoom_position>inside</zoom_position>
    			<zoom_width>300</zoom_width>
    			<zoom_height>300</zoom_height>
    			<zoom_image_width>1000</zoom_image_width>
    			<zoom_image_height></zoom_image_height>
    		</zoom_settings>
    		<color_options>
    			<color_map></color_map>
    		</color_options>
    	</configurablecolors>	
</default>
Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks