Working with JavaScript in MageBridge - Yireo

Using YOOtheme patches for MageBridge

When building a MageBridge-based website and webshop, the Magento theme is combined with the Joomla! template. To get the look and feel right, you will need there for knowledge of both Joomla! templating as Magento theming. As a workaround, we have made several patches for YOOtheme templates available which integrate Magento smoothly into these templates. The YOOtheme template add-ons are available in our Yireo Shop, and function like a patch of the original YOOtheme template.

Purchase YOOtheme template

You will still need to purchase the original template at the YOOtheme website. Also note that this patch only functions with the Magento Default Theme.

Installing the MageBridge YOOtheme patch

The add-on can be downloaded after purchase in our Yireo Shop, and consists of a ZIP-file. The following steps will guide you trough the installation process of a YOOtheme addon. It is only required to modify Joomla!. Nothing needs to be changed within Magento.

• Make a file-backup of your current YOOtheme template.
• Unzip the YOOtheme addon, you will find a folder called yoo_template inside.
• Copy all files inside the yoo_template folder to the YOOtheme template-directory (for instance templates/yoo_studio) or your custom copy of this template. This will copy at least files into the css/ and the images/ folder.

Configuring MageBridge with the right theming options

After installation of the YOOtheme patch, it is important to configure the MageBridge extension with the right options. Login to your Joomla! Administrator and browse to the MageBridge Configuration page. Select the Theming-tab and make the modifications below:

• Set the option Disable Magento CSS to Yes.
• Set the option Disable MageBridge CSS to No.

MageBridge will now recognize the patch structure and will use the files of the template patch for the styling of the MageBridge shop.

Configuring the MageBridge YOOtheme plugin

To make sure the right CSS-parts are loaded in your webpages, we have created an additional MageBridge plugin specifically for YOOtheme. Go to MageBridge > Updates, select the YOOtheme plugin in the list and hit the button Update in the toolbar. This will install and activate the YOOtheme plugin.

Patched files

The template-patch contains the following files and folders:

• css/com_magebridge/default.css = Base MageBridge CSS-file for shop styling.
• css/variations/ = This folder contains modified YOOtheme template variations styles so MageBridge will use the variations for the shop. [Note: previous changes to the variations will be lost]
• images/com_magebridge/ = Images originating from Magento.

These files modify the YOOtheme template so that the MageBridge shop integrates nicely with it. Note that these files only work in combination with the default Magento theme.

JavaScript issues

Some functions of the YOOtheme template and extensions might not work properly on the MageBridge shop pages. Please follow the guidelines below:

• Set the option Disable Joomla! MooTools within the MageBridge Configuration to Yes
• Set the option Disable all Joomla! scripts within the MageBridge Configuration to Yes

When using MageBridge, MooTools needs to be disabled. The YOOtheme Warp template framework provides multiple JavaScript features for the menu animations and effects. Due to the disabled MooTools, some of these animation effects will not work on the MageBridge pages, but your menu will still function. You can use alternative settings for your menus, please visit the Warp documentation for more information about the menu settings.

The latest version of the MageBridge YOOtheme plugin includes parameters that allows you to enable JavaScript from Widgetkit, Warp and the template itself. Newer YOOtheme templates are solely based on jQuery, which makes it possible to enable these plugin options.