Use MageBridge with Advanced Module Manager - Yireo

Using OneStepCheckout with MageBridge

OneStepCheckout is a popular Magento extension that replaces the default Magento checkout with a clean checkout-page that lists all fields in one overview. The extension can be used without problems within MageBridge, and this tutorial lists the steps to integrate OneStepCheckout within Joomla!.

Install OneStepCheckout

First, follow the guidelines of OneStepCheckout to install the extension within Magento, and make sure the module is working fully in the standalone Magento backend.

Configuration in Joomla!

Once the extension has replaced the normal Magento checkout, the same rules that apply to Magento apply to Joomla! and the extension will be usable right away. However, OneStepCheckout also needs the right CSS-code and JavaScript-code to be loaded within Joomla!, and this might conflict with settings you have made before.

Getting the CSS right

Within the MageBridge setting Disable Magento CSS make sure you load the CSS-file onestepcheckout.css. You can do this either by setting the options to No (which re-enables all Magento stylesheets) or All except (which allows you to only load the OneStepCheckout stylesheet).

If this doesn't work for you - for instance because you are using MageBridge/Joomla! CSS-code instead of Magento CSS-code - you can just copy the file onestepcheckout.css to your Joomla! template and load the stylesheet through your Joomla! template-code. This requires modification of your Joomla! template and therefor knowledge of webdesign. The CSS-file of OneStepCheckout is located by default in skin/frontend/base/default/onestepcheckout/onestepcheckout.css. Make sure to copy also all the images that are referred to from that CSS-code. You might also need to change the relative location of those images.

Getting the JavaScript right

OneStepCheckout uses a file called js/onestepcheckout.js for additional checks, and this file again requires the ProtoType library. Within the MageBridge configuration you need to make sure that Magento scripts are enabled (including ProtoType and including onestepcheckout.js). Note that any MooTools-effect enabled on your Joomla! pages will conflict with ProtoType, so therefor you need to disable MooTools through the MageBridge configuration as well.

Also, make sure to configure a MageBridge Custom Block module that displays the block before_body_end. It is best to add a new Joomla! module position to your template just before the </body> tag to add this module to.

Direct Output URLs

The following URLs needs to be added in the Magento options for MageBridge to make sure AJAX-output is properly handled:

onestepcheckout/index/save_address
onestepcheckout/index/updateshippingmethod

Adding SSL to the OneStepCheckout pages

If you are using SSL not on all pages, but only specific pages like the checkout, you need to instruct MageBridge that OneStepCheckout should actually be ran over HTTPS. To do this, modify the MageBridge option Secure URLs (previously called Payment URLs) and add the string onestepcheckout to the comma-separated list. This will turn all URLs starting with the keyword onestepcheckout to SSL-based URLs.

Another OneStepCheckout extension

Note that there is another OneStepCheckout extension released by ModuleSoft. This extension needs more or less the same procedure like above, however the following Direct Output URLs are required:

onestepcheckout/index/init
onestepcheckout/index/removeproduct
onestepcheckout/index/update