Creating a Magento Extension that uses a jQuery Plugin

Admin Panel

So if the Magento Extension will only be used by you, there is nothing more that you have to do. But if you plan to submit the extension so other developers can use it, you need to make the plugin configurable in the Admin Panel.

In order for the extension’s configuration fields to display in the Admin Panel, I had to update the config.xml. I created a section and an Access Control List (acl) for the Image Settings.

<adminhtml>
        <acl>
            <resources>
                <admin>
                    <children>
                        <system>
                            <children>
                                <config>
                                    <children>
                                        <configurablecolors>
                                            <title>Image Settings</title>
                                        </configurablecolors>
                                    </children>
                                </config>
                            </children>
                        </system>
                    </children>
                </admin>
            </resources>
        </acl>
</adminhtml>

The next step is creating a system.xml file (/app/code/local/grasshopperpebbles/configurablecolors/etc/system.xml). This file will contain the extentsion’s configuration fields that will display in admin panel. In this case, the fields will be the options for the gpConfigurableColors plugin.

<config>
    <sections>
        <configurablecolors translate="label" module="configurablecolors">
            <label>GrasshopperPebbles Configurable Colors</label>
            <tab>general</tab>
            <frontend_type>text</frontend_type>
            <sort_order>1000</sort_order>
            <show_in_default>1</show_in_default>
            <show_in_website>1</show_in_website>
            <show_in_store>1</show_in_store>
	    <groups>
                <images translate="label">
                    <label>Image Settings</label>
                    <frontend_type>text</frontend_type>
                    <sort_order>1</sort_order>
                    <show_in_default>1</show_in_default>
                    <show_in_website>1</show_in_website>
                    <show_in_store>1</show_in_store>  
		    <fields>
			<thumb_width translate="label">
                            <label>Thumb Width</label>
                            <frontend_type>text</frontend_type>
                            <sort_order>1</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                        </thumb_width>
                        <thumb_height translate="label">
                            <label>Thumb Height</label>
                            <comment>If a height is not entered, it will be calculated based upon the width.</comment>
                            <frontend_type>text</frontend_type>
                            <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>
                        </thumb_height>
                        <image_width translate="label">
                            <label>Image Width</label>
                            <frontend_type>text</frontend_type>
                            <sort_order>3</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                        </image_width>
                        <image_height translate="label">
                            <label>Image Height</label>
                            <comment>If a height is not entered, it will be calculated based upon the width.</comment>
                            <frontend_type>text</frontend_type>
                            <sort_order>4</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                        </image_height>
                    </fields>
                </images>
                <swatch_settings translate="label">
                    <label>Swatch Settings</label>
                    <frontend_type>text</frontend_type>
                    <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>  
		    <fields>
                        <swatch_width translate="label">
                            <label>Swatch Width</label>
                            <frontend_type>text</frontend_type>
                            <sort_order>1</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                        </swatch_width>
                        <swatch_height translate="label">
                            <label>Swatch Height</label>
                            <frontend_type>text</frontend_type>
                            <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>
                        </swatch_height>
                        <swatch_selected_width translate="label">
                            <label>Selected Swatch Width</label>
                            <comment>A border is displayed around the selected swatch. The width of the swatch is dependent upon the size of the border.</comment>
                            <frontend_type>text</frontend_type>
                            <sort_order>3</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                        </swatch_selected_width>
                        <swatch_selected_height translate="label">
                            <label>Selected Swatch Height</label>
                            <comment>A border is displayed around the selected swatch. The height of the swatch is dependent upon the size of the border.</comment>
                            <frontend_type>text</frontend_type>
                            <sort_order>4</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                        </swatch_selected_height>
                        <swatch_selected_border_size translate="label">
                            <label>Selected Swatch Border Size</label>
                            <frontend_type>text</frontend_type>
                            <sort_order>5</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                        </swatch_selected_border_size>
                        <swatch_selected_border_color translate="label">
                            <label>Selected Swatch Border Color</label>
                            <comment><![CDATA[
					<p>Enter either a HTML Color Name (Black, White, Navy, etc. - see <a href="http://www.w3schools.com/html/html_colornames.asp" target="_blank">HTML Color Names</a>) or a Hex value (#cccccc, etc). </p>
			]]></comment>
                            <frontend_type>text</frontend_type>
                            <sort_order>6</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                        </swatch_selected_border_color>
                    </fields>
                	<comment>The Swatch Settings section is optional. The values are set using CSS and should be modified in the corresponding style sheet.</comment>
                </swatch_settings>
                <zoom_settings translate="label">
                    <label>Zoom Settings</label>
                    <frontend_type>text</frontend_type>
                    <sort_order>3</sort_order>
                    <show_in_default>1</show_in_default>
                    <show_in_website>1</show_in_website>
                    <show_in_store>1</show_in_store>  
		    <fields>
			<show_zoom translate="label">
                            <label>Show Image Zoom</label>
                            <frontend_type>select</frontend_type>
                            <source_model>adminhtml/system_config_source_yesno</source_model>
                            <sort_order>1</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                        </show_zoom>
                        <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>
                        <zoom_width translate="label">
                            <label>Zoom Width</label>
                            <comment>The width of the image container.</comment>
                            <frontend_type>text</frontend_type>
                            <sort_order>3</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_width>
                        <zoom_height translate="label">
                            <label>Zoom Height</label>
                            <comment>The height of the image container.</comment>
                            <frontend_type>text</frontend_type>
                            <sort_order>4</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_height>
                        <zoom_image_width translate="label">
                            <label>Image Zoom Width</label>
                            <comment>The width of the image.</comment>
                            <frontend_type>text</frontend_type>
                            <sort_order>5</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_image_width>
                        <zoom_image_height translate="label">
                            <label>Image Zoom Height</label>
                            <comment>The height of the image. If a height is not entered, it will be calculated based upon the width.</comment>
                            <frontend_type>text</frontend_type>
                            <sort_order>6</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_image_height>
                    </fields>
                </zoom_settings> 
                <color_options translate="label">
                    <label>Color Options</label>
                    <frontend_type>text</frontend_type>
                    <sort_order>4</sort_order>
                    <show_in_default>1</show_in_default>
                    <show_in_website>1</show_in_website>
                    <show_in_store>1</show_in_store>  
		    <fields>
			<color_selection translate="label">
                            <frontend_model>configurablecolors/adminhtml_system_config_form_field_colormap</frontend_model>
                            <sort_order>1</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                        </color_selection>
			<color_map>
			    <label>Color Map</label>
			    <frontend_type>textarea</frontend_type>
                            <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>
			</color_map>
                    </fields>
                    <comment><![CDATA[
			<p>Many colors have an HTML Color Name (Black, White, Navy, etc. - see <a href="http://www.w3schools.com/html/html_colornames.asp" target="_blank">HTML Color Names</a>). </p>
			<p>If you use a color that does not have an HTML color name, use the Color Map to create swatches. </p>
			<p>For Instance, if you use the color "Ash", you can enter a hex color of #CCCCCC (or whatever hex code you choose).
			<p>You can also use class that you have created in a CSS file.</p>
			<p>If you choose to use an image swatch, please upload the image to <strong>media/grasshopperpebbles_configurablecolors/</strong></p> 
		]]></comment>
                </color_options>
	    </groups>
        </configurablecolors>
    </sections>
</config>

The file creates four groups (fieldsets) Image Settings, Swatch Settings, Zoom Settings and Color Options:

configurable_colors_feildsets

I won’t go into too much detail about how to create fields. For more information, see XML Structures for Admin Configuration. I’ll only discuss a few of the items.

The option is the label for your extension that will display on the left side of the configuration page (System->Configuration). The option tells Magento the tab where the label will display.

<label>GrasshopperPebbles Configurable Colors</label>
<tab>general</tab>

configurable_colors_label_tab

– Displaying Fields Based Upon the Value of Another

Certain fields in the form are display-dependent, meaning the field will only display if another field has a certain value.

<zoom_width translate="label">
      <label>Zoom Width</label>
      <comment>The width of the image container.</comment>
      <frontend_type>text</frontend_type>
      <sort_order>3</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_width>

Using the option, the Zoom Width field will only display if the Show Zoom field has a value of true.

Also notice, the for the Color Options.

<frontend_model>configurablecolors/adminhtml_system_config_form_field_colormap</frontend_model>

Magento has a wide variety of field types that can be display in the configuration form (button, checkbox, hidden, etc.), but there are times when you may want format a specific display. The allows you to display a block of HTML in your configuration form. I want to display a table of fields so that the user can add an optional color map for the relevant system colors:

configurable_colors_color_options

To create this frontend_model, I created the block colormap (/app/code/local/Grasshopperpebbles/Configurablecolors/Block/Adminhtml/System/Config/Form/Field/Colormap.php)

class Grasshopperpebbles_Configurablecolors_Block_Adminhtml_System_Config_Form_Field_Colormap extends Mage_Adminhtml_Block_System_Config_Form_Field
{
   /**
    * Returns html part of the setting
    *
    * @param Varien_Data_Form_Element_Abstract $element
    * @return string
    */
   protected function _getElementHtml(Varien_Data_Form_Element_Abstract $element)
   {
       $this->setElement($element);
 
       $html = '<div id="configurable-colors-select-cntnr">';
       $html .= $this->_getColorOptionsTemplateHtml();
       $html .= '</div>';
       $html .= $this->_getConfigurableTableHtml();
 
       return $html;
   }
 
   protected function _getColorOptionsTemplateHtml()
   {
       $html = '<table>';
       $html .= '<tr>';
       $html .= '<td><label for="configurable-color-option">Color</label></td>';
       $html .= '<td><label for="configurable-color-type">Color Type</label></td>';
       $html .= '<td><label for="configurable-color-option">Color Value</label></td>';
       $html .= '<td></td>';
       $html .= '</tr>';
       $html .= '<tr>';
       $html .= '<td>';
       $html .= '<select name="configurable-color-option" id="configurable-color-option">';
       $colors = Mage::getSingleton('eav/config')->getAttribute('catalog_product', 'color')->getSource()->getAllOptions();
       foreach ($colors as $color) {
		$html .= '<option value="'. $color['label'].'">'.$color['label'].'</option>';
       }
       $html .= '</select>';
       $html .= '</td>';
       $html .= '<td>';
       $html .= '<select name="configurable-color-type" id="configurable-color-type">';
       $html .= '<option value="color_hex">Color Hex</option>';
       $html .= '<option value="color_class">Color Class</option>';
       $html .= '<option value="color_image">Color Image</option>';
       $html .= '</select>';
       $html .= '</td>';
       $html .= '<td>';
       $html .= '<input type="text" name="configurable-color-value" id="configurable-color-value" />';
       $html .= '</td>';
       $html .= '<td>';
       $html .= '<button id="configurable-color-add">Add Map</button>';
       $html .= '</td>';
       $html .= '</tr>';
       $html .= '</table>';
       return $html;
   }
 
   protected function _getConfigurableTableHtml() {
       $html = '<table id="configurable-color-table">';
       $html .= '<thead><tr><th>Color Name</th><th>Color Type</th><th>Color Value</th><th>Action</th></tr></thead>';
       $html .= '<tbody></tbody>';
       $html .= '</table>';
       return $html;
   }
 
}

This block uses jQuery to add the color map option to the table. I also need to add some styling to the form. So, I have to update the layout. This is done in the config.xml (again, in the adminhtml section).

<adminhtml>
    	<layout>
            <updates>
                <configurablecolors>
                    <file>grasshopperpebbles_configurablecolors.xml</file>
                </configurablecolors>
            </updates>
        </layout>
        <acl>
            <resources>
                <admin>
                    <children>
                        <system>
                            <children>
                                <config>
                                    <children>
                                        <configurablecolors>
                                            <title>Image Settings</title>
                                        </configurablecolors>
                                    </children>
                                </config>
                            </children>
                        </system>
                    </children>
                </admin>
            </resources>
        </acl>
</adminhtml>

I tell Magento to look in the file grasshopperpebbles_configurablecolors.xml for the layout options.

/app/design/adminhtml/default/default/layout/grasshopperpebbles_configurablecolors.xml

<?xml version="1.0"?>
<layout>
    <adminhtml_system_config_edit>
        <reference name="head">
          <action method="addCss"><stylesheet>grasshopperpebbles_configurablecolors/adminhtml.css</stylesheet></action>
          <action method="addItem"><type>skin_js</type><name>grasshopperpebbles_configurablecolors/jquery-1.7.1.min.js</name></action>
          <action method="addItem"><type>skin_js</type><name>grasshopperpebbles_configurablecolors/adminhtml.js</name></action>
        </reference>
    </adminhtml_system_config_edit>
</layout>

The file adminhtml.js (/skin/adminhtml/default/default/grasshopperpebbles_configurablecolors/adminhtml.js) adds the relevant code for the frontend_model block.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks