Tutorials for Magento and Joomla! - Yireo

Two VirtualHosts but one domain

With MageBridge, we always recommend to use two separate VirtualHosts for Magento and Joomla! - this guarantees optimal performance and security. But because each VirtualHost also uses a separate domain, this would require you to purchase two SSL-certificates as well. To bypass this problem, you could try to remove the Magento URL from each MageBridge page. This tutorial explains how to do this.

The problem in general

Every time a MageBridge page is loaded, you actually receive HTML-code from the Joomla! site (www.example.com) but - besides HTML - the webpage also needs images, JavaScripts and CSS stylesheets, which are partially served by Joomla! but also partially served by Magento (shop.example.com).

The problem is: If you enable SSL for the Joomla! domain, you also need to add a SSL-certificate for the Magento domain. Otherwise browsers will start to complain about mixed content on the page.

The trick in general

But we can get rid of the Magento URLs, so that we only need a single SSL-certificate for the Joomla! domain. If you would inspect the HTML source-code of a MageBridge-generated webpage, you can see that there are three different types of Magento URLs still being used:

• http://MAGENTO/media: Mainly product images
• http://MAGENTO/js: Core JavaScript files
• http://MAGENTO/skin: The Magento skin

If each of these URLs is replaced with a Joomla! equivalent, the MageBridge webpage would be served entirely from the Joomla! site.

Getting rid of the Magento skin

The Magento skin is mainly composed of CSS-files and images defined in those CSS-files. By copying the entire CSS-code to the Joomla! template, you can eliminate the need for a Magento skin altogether. Within your Joomla! template you can create a CSS-file that is only loaded if MageBridge requires it:

templates/YOUR_TEMPLATE/css/com_magebridge/default.css

Within the MageBridge configuration you can find options to use this file (Disable MageBridge CSS: No) while you want to disable all other Magento CSS-code (Disable Magento CSS: Yes).

Modifying the Magento Configuration

But this doesn't solve the problem of the other Magento URLs. Luckily enough, you can change the URLs that Magento uses. So by reconfiguring settings in the Magento Admin Panel, you can alter the original Magento URLs in Joomla! URLs instead.

If you browse to System > Configuration > General > Web > Unsecure, you can see that you can modify the Base Skin URL, Base Media URL and Base JavaScript URL. The same applies to the tab Secure.

While the value of Base URL points to Magento, when this configuration is loaded by MageBridge, the Base URL will automatically be changed into the Joomla!/MageBridge URL. But for the skin, media and JavaScript, MageBridge will use the original values. We can change these values into the following:

Creating symbolic links from Joomla! to Magento folders

Now, the screenshot above reveals that the media-images are now read from the Joomla! URL www.example.com/sdata/media/. But this URL does not exist yet, because the Joomla! folder sdata/media is not there. We can now create a folder JOOMLA/sdata.

But if we create a new folder JOOMLA/sdata/media, we will need to copy all the contents from the original Magento media-folder to the new Joomla! media-folder. Worse: Every time a product image is changed in the Magento backend, we have to resync both folders. If it is much smarter to sync both folders automatically, or even better: Make the Joomla! media-folder a symbolic link to the original Magento media-folder.

Creating symbolic links is generally something you can only do through SSH, but some control panels (DirectAdmin, CPanel) also allow you to do this as well. The steps for the media-folder should be repeated for the js-folder and the skin-folder as well.

Extra notes

In this case, we used the Joomla! folder-name sdata, but this can be anything you want, as long as it does not conflict with any Joomla! URL already created.

To allow symbolic links to be used, the Apache option FollowSymLinks should be enabled. If not in the VirtualHosts configuration, the option can also be enabled in the htaccess-file.

The Joomla! domain should be allowed to access Magento files. Make sure the PHP open_basedir restriction is not in the way.

Created on Monday, 28 June 2010
Modified on Wednesday, 22 December 2010