Creating a Magento Extension that uses a jQuery Plugin

Settings.phtml – Simple Plugin Instantiation

When I first created the Configurable Colors extension, I simply hard-coded the options for the gpConfigurableColors plugin in the settings.phtml file.

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $(document.body).gpConfigurableColors({
    	product_id: '<?php echo Mage::registry('current_product')->getId(); ?>',
	assoc_products_url: '<?php echo $this->getUrl('configurablecolors/configurablecolors/getassociatedproducts/'); ?>',
	swatch_container: 'gp-configurablecolors-swatch-container',
	swatch_class: 'gp-configurablecolors-swatch',
	swatch_class_selected: 'gp-configurablecolors-swatch-selected',
	thumb_size: '56',
	large_size: '365,400',
	zoom_image_size: '1000,1214',
	zoom_width: '300',
	zoom_height: '300',
	zoom_position: 'inside',
	hide_color_dropdown: true,
	color_map: [{ "color_name" : "Ash", "color_hex": "#cccccc"},
		    { "color_name" : "Black - MultiColor", "color_class": "gp-configurablecolors-swatch-multicolor-black"},
		    { "color_name" : "Navy - MultiColor", "color_class": "gp-configurablecolors-swatch-multicolor-navy"},
		    { "color_name" : "White - MultiColor", "color_class": "gp-configurablecolors-swatch-multicolor-white"}]
	});
});
</script>
 
<div id="gp-configurablecolors-swatch-container"></div>

First note the div at the bottom of the file:

<div id="gp-configurablecolors-swatch-container"></div>

This div will contain the color swatches. Remember in the layout, we added the settings.phtml file in the product.info.options.wrapper.

<reference name="product.info.options.wrapper">
	<block type="configurablecolors/settings" name="configurablecolors_settings" template="configurablecolors/settings.phtml" />
</reference>

So the div container will be placed in this block on the product view page.

The gpConfigurableColors plugin displays color swatches for configurable products, but it also controls the display of the relevant images. So on DevoutGeek.com, if you click on a black swatch, the plugin loads the large black t-shirt as well as the relevant thumb and zoom images. In my first iteration of the Configurable Colors Magento extension, I hard-coded the sizes for each image. This was fine for my personal use, but before I submitted it to Magento, I added the plugin options to the admin panel. More on this later.

MVC Controller

One of the most important options for the gpConfigurableColors plugin is assoc_products_url:

assoc_products_url: '<?php echo $this->getUrl('configurablecolors/configurablecolors/getassociatedproducts/'); ?>'

The plugin makes an ajax call to the Configurable Colors controller method (getassociatedproducts) which returns a JSON object that contains the relevant information about each image and associated images.

In order to use the controller, we have update the config.xml:

<frontend>
        <routers>
            <configurablecolors>
                <use>standard</use>
                <args>
                    <module>Grasshopperpebbles_Configurablecolors</module>
                    <frontName>configurablecolors</frontName>
                </args>
            </configurablecolors>
        </routers>
        <layout>
            <updates>
                <configurablecolors>
                    <file>grasshopperpebbles_configurablecolors.xml</file>
                </configurablecolors>
            </updates>
        </layout>
</frontend>

I added a Route, so that Magento knows where to access the controller. For information on controllers and routes (and MVC), see Magento Controller Dispatch.

The controller file (/app/code/local/Grasshopperpebbles/Configurablecolors/controllers/ConfigurableColorsController.php) has a single method: getassociatedproducts. It returns a JSON object.

class Grasshopperpebbles_Configurablecolors_ConfigurablecolorsController extends Mage_Core_Controller_Front_Action {
 
	var $_product = '';
 
        public function getassociatedproductsAction() {
 
		$product_id = $this->getRequest()->getParam('product_id');
		$thumb_size = $this->getRequest()->getParam('thumb_size');
		$large_size = $this->getRequest()->getParam('large_size');
		$zoom_size = $this->getRequest()->getParam('zoom_size');
		$_product = Mage::getModel('catalog/product')->load($product_id);
           $json_assoc = array();
 
		...	
		$data = json_encode($json_assoc);    
 
            echo $data;
        }
}

The gpConfigurableColors plugin sends a query string to the controller method. If you are familiar with Zend Framework, you see that I used the getParam method to retrieve each parameter value.

Note: Remember the suffix for all Action methods in your controller should be ‘Action’. But you do not include the suffix when calling the method.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks