Creating a Magento Extension that uses a jQuery Plugin

Updating the Settings.phtml File

Now that Admin Panel is complete, I need to update my Settings.phtml file. First, I get the image sizes:

$thumb_size = getConfigurableImageSizes('thumb');
$large_size = getConfigurableImageSizes('image');
$zoom_size = getConfigurableImageSizes('zoom_image', 'zoom_settings/');
 
function getConfigurableImageSizes($size_type, $setting_type='images/') {
	$size = Mage::getStoreConfig('configurablecolors/'. $setting_type . $size_type .'_width');
	$h = Mage::getStoreConfig('configurablecolors/'. $setting_type .$size_type .'_height');
	if ($h != '') {
		$size = $size . ',' . $h;
	}
	return $size;
}

I created a function to retrieve the options because I dislike writing the same code multiple times. In order to get the configuration options from the admin form, use the getStoreConfig method:

$thumb_width = Mage::getStoreConfig('configurablecolors/images/thumb_width');

I’m using the path that I created in the system.xml file.

<config>
    <sections>
        <configurablecolors translate="label" module="configurablecolors">
            ...
		<groups>
                <images translate="label">
                    ...  
			<fields>
			       <thumb_width> </thumb_width>
                               ...
                        </fields>
                </images>
            </groups>
        </configurablecolors>
    </sections>
</config>

I then instantiate the gpConfigurableColors plugin:

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    var c_map = <?php echo Mage::getStoreConfig('configurablecolors/color_options/color_map'); ?>;
    c_map = c_map.color_map;
    $(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: '<?php echo $thumb_size; ?>',
	large_size: '<?php echo $large_size; ?>',
	zoom_image_size: '<?php echo $zoom_size; ?>',
	zoom_width: '<?php echo Mage::getStoreConfig('configurablecolors/zoom_settings/zoom_width'); ?>',
	zoom_height: '<?php echo Mage::getStoreConfig('configurablecolors/zoom_settings/zoom_height'); ?>',
	zoom_position: '<?php echo Mage::getStoreConfig('configurablecolors/zoom_settings/zoom_position'); ?>',
	use_zoom: Boolean(<?php echo Mage::getStoreConfig('configurablecolors/zoom_settings/show_zoom'); ?>),
	hide_color_dropdown: true,
	color_map: c_map
    });
});
</script>

That’s it. It can take a lot of work to include a jQuery plugin in a Magento extension, but not much more than creating any other extension. Enjoy.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks