How To Change Mail Order To Show Popup With Highslide, GUIDE How To show MailOrder popup with Highslide Options

[Web Design Seo]

How to change Mail Order to show popup with highslide instead of modal box - GUIDE.
This topic is Guide How To show Mail Order popup with popular javascript Highslide

Code is tested and work with: Opera, Firefox, Safari, IE 5, IE 6, IE 7, IE 8 and IE 9!

Note that this Guide is written with samples of code from Pro version, if you use free version of MailOrder you must modify this code.


First of all you must download attached package. In package is one folder that include:
- highslide javascript
- highslide css
- highslide graphics folder

In this folder are only necessary files, not an full highslide package! Full highslide is over 600 kb, here are only about 200 kb.

Unzip and upload folder "highslide" to folder media/system in your website. Path to highslide folder must be:

Код

/public_html/media/system/highslide

Than open file located in:

Код

/public_html/plugins/content/mailorder.php

And edit these parts of file:

Before:

Код

$document =& JFactory::getDocument();
        $document->addScript('media/system/js/modal.js');
        $document->addStyleSheet("/media/system/css/modal.css",'text/css',"screen");
        $document->addScriptDeclaration("
                        window.addEvent('domready',
                            function() {
                                SqueezeBox.initialize({size: {x: ".$modal['w'].", y: ".$modal['h']."}});
                            
                                $$('a.mailorder').each(function(el) {
                                    el.addEvent('click', function(e) {
                                        new Event(e).stop();
                                        SqueezeBox.setContent('iframe', el.toString() );
                                    });
                                });
                            }
                    );");

After:

Код

$document =& JFactory::getDocument();
$document->addScript('media/system/highslide/highslide-with-html.packed.js');
$document->addScript('media/system/highslide/easing_equations.js');
$document->addScript('media/system/highslide/highslide-sitesettings.js');
$document->addStyleSheet("/media/system/highslide/highslide.css",'text/css',"screen");
$document->addScriptDeclaration("
hs.graphicsDir = '/media/system/highslide/graphics/';
hs.outlineType = 'rounded-black';
hs.wrapperClassName = 'draggable-header';
");

You can use some other parameters here like: "rounded-white" instead of "rounded-black"

Before:

Код

return '<a rel="SqueezeBox" class="mailorder" href="'.$url.'">'.JText::_('Buy').'</a>';

After:

Код

return '<a rel="nofollow" href="'.$url.'" onclick="return hs.htmlExpand(this, { objectType: \'iframe\' } )">'.JText::_('Buy').'</a>';
}

All of this will work automatically in next version of mail order pro. In next update we will include option to change look of modal box. In component will be option that will change used script and look of popup.

If you like our component, please Vote for us or write review at Mailorder page in JED

Attached File(s)

 highslide.zip ( 81.98K ) Number of downloads: 34

 

[Web Design Seo]

Mail Order Demo with Highslide: http://extensionsjoomla.com/joomla-seo.html

Click on "Buy Now" button.

[Web Design Seo]

Guide is updated, files are updated also. Update is needed to unlock more features like equations in Highslide and custom link in "Powered by Highslide".