Creating a Magento Extension that uses a jQuery Plugin

Config.xml

Next I need to add the other necessary files to the layout. These are CSS, Javascript, and other files that are specific to the Configurable Colors extension. I first need to tell Magento that this layout update file exists. I do this in the config.xml file (/app/code/local/grasshopperpebbles/configurablecolors/etc/config.xml).

<frontend>
      <layout>
           <updates>
                <configurablecolors>
                    <file>grasshopperpebbles_configurablecolors.xml</file>
                </configurablecolors>
            </updates>
      </layout>
</frontend>

Layout Updates

Next I add the CSS, Javascript, and other files – this includes the jQuery plugin that I created for the Configurable Colors extension (jquery.gpConfigurableColors).

/app/design/frontend/base/default/layout/grasshopperpebbles_configurablecolors.xml

<catalog_product_view>
 	<reference name="head">
		<action method="addCss"><stylesheet>css/grasshopperpebbles_configurablecolors.css</stylesheet></action>
		<action method="addCss"><stylesheet>css/cloud-zoom.css</stylesheet></action>
		<action method="addItem"><type>skin_js</type><name>js/gpconfigurablecolors/cloud-zoom.1.0.2.min.js</name></action>
		<action method="addItem"><type>skin_js</type><name>js/gpconfigurablecolors/jquery.gpConfigurableColors.min.js</name></action>	
	</reference>
	<reference name="product.info.options.wrapper">
		<block type="configurablecolors/settings" name="configurablecolors_settings" template="configurablecolors/settings.phtml" />
	</reference>
</catalog_product_view>

I only want to add the CSS and jQuery plugins to the section of the product view page, so I wrapped the addCss and addItem in:

<catalog_product_view>
      <reference name="head"></reference>
</catalog_product_view>

I am also loading a settings.phtml file. This file is used to instantiate the gpConfigurableColors jQuery plugin. It also creates a container to hold the color swatches.

Note: When packaging the extension so that it can be downloaded from Magento Connect, I loaded the jQuery library in this file rather than the page.xml.

<catalog_product_view>
 	<reference name="head">
		<action method="addCss"><stylesheet>css/grasshopperpebbles_configurablecolors.css</stylesheet></action>
		<action method="addCss"><stylesheet>css/cloud-zoom.css</stylesheet></action>
                <action method="addItem"><type>skin_js</type><name>js/jquery-1.7.1.min.js</name></action>
		<action method="addItem"><type>skin_js</type><name>js/gpconfigurablecolors/cloud-zoom.1.0.2.min.js</name></action>
		<action method="addItem"><type>skin_js</type><name>js/gpconfigurablecolors/jquery.gpConfigurableColors.min.js</name></action>	
	</reference>
</catalog_product_view>
Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks