Magento: Facebox and jQuery installation.
- Details
- Created on Sunday, 05 June 2011 01:22
Facebox and jQuery
After installing Magento, I hated all of the popup windows that are used in Magento, so I decided to use Facebox, I have used it in many of my web projects over the years, so I decided to use it on my current e-commerce project. This is by no means a step by step guide, I am making the basic assumtion that you know how to code and understand PHTML, XML, JavaScript, CSS and all of the other tools that power Magento
JavaScript header placement
When you add javascript or CSS files in magento, you will have to specify the location of these files so that Magento can add the information into the header tag when it builds the pages. All of the construction of the webpages are driven by XML files, so you will have to understand how XML works before you start messing around with the files in Magento.
Here is the location of the page.xml file
app/design/frontend/tilluminati/default/layout/page.xml
I started out by putting all of the facebox and jquery file links in the page.xml file, but after experiencing numerous problems with getting the files to render inside of the Header tab, I had to find a better solution. What I discovered was that even after I got the links to show up in the header tag they still did not work right, even with the no conflict code installed. The quick fix was to manually paste all of the links for the jquery and facebox files inside of each CMS Page, this is fine, but it will not solve the long term problem.
That was when I discoverd a article about how to manually get jQuery to work on Magento, and this lead to my discovery of jQuery Base, which is the solution to my problems. So far it has been running just fine.
jQuery and jQuery Base
By default, Magento uses Prototype and Scriptaculous as it's default JavaScript Library. In order to get Facebox running you will need to add a plugin so that jQuery will work properly, and automatically insert the NoConflict commands needed for both to coexist. Of course you can do all of this manually, but it's much easier to use a plugin.
There are lots of jQuery plugins avaliable for magento, I use jQuery Base by Mxpert. All you have to do is install the plugin via Magento Connect and the Download Manager that is included with Magento. Go to Magento connect and get the URL for the plugin code, then cut and paste it in the install text field in the Download manager and let the install script take care of the whole process. When you are done go back into the magento e-commerce manager and enable the jquery base plugin. to do this go to the system menu and select configuration.
There will now be a menu item added on to the left side column, it will be called jQuery Base. Click on this button and go to the menu, there you will be able to select the jquery version you want to use, enable or disable the plugin. Further down the page you will be provided a few windows to insert javascript trigger scripts, these two boxes will allow you to insert any trigger script that will appear through out the site. Below that are windows that will allow you to reference the JavaScript and CSS files related to the JavaScript, simply move the javascript and CSS files to their appropriate folders in the Skins template folder, there will be folders for CSS and JS files.
Once you have added the JS and CSS file to the template folders and inserted the required commands, you will now be able to run facebox, after you have refreshed the caches, updated the index files, and recompiled magento.
Upgrading jQuery
After I installed jQuery Base, I noticed that the newest version of jQuery the were installing was 1.4.2; I manually replaced the old jQuery files with the new ones downloaded from jQuery.com. to do this navigate to the JS folder in magento and open the jQuery folder, I then opened up the two jQuery files and deleted the javascript code inside, then cut and pasted the more up to date code in from jQuery.
A very important thing to remember is that when you download facebox, you will have to do the work of setting up all of the links to the required image and CSS files and their locations in magento.
Another issue I have discoverd is that if you put information on a blank page, the duplicate header information will also load, this will cause magento to write the information again and again each time you close and open the modal window. If you are loading only images, this is not a issue, but if you are loading a CMS Page then this is a problem, to get around this issue, create a new Magento CMS Page template with out any headerinformation at the top and load it into magento, and apply that template to the page you want to have viewed in facebox.
Create a new page template in magento.
One thing to remember, when you open your modal window content inside of a website, you don't need to have to much CSS, infact you don't need to have any. The cotent that is being opened in the modal window either with a hidden DIV tag or a seperate externa page will inherit the CSS Styles in the containing page. So with that in mind you will still have to add in all of the CSS style ID and Class into the HTML tags like any other HTML Page.
So you will have a template with a empty header, body and footer tag. The template will look something like the code below.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>"
lang="<?php echo $this->getLang() ?>"> <head></head> <body class="page-empty <?php echo $this->getBodyClass()?$this->getBodyClass():'' ?>"> <div> <?php echo $this->getChildHtml('after_body_start') ?> <?php echo $this->getChildHtml('global_messages') ?> <?php echo $this->getChildHtml('content') ?> <?php echo $this->getChildHtml('before_body_end') ?> <?php echo $this->getAbsoluteFooter() ?> </div> </body> </html>
jQuery Links and resources.
jQuery Base
jQuery
Facebox code on GitHub
Facebox page, the code is not always up-to-date here.
If you feel adventurous and want to manually edit PHTML files in magento, here is a article from magento discussing the topic.
Magneto Article
Facebox Rel=facebox tag locations.
This is a sample of what the popup script that is in Magento by default looks like, when you install magento and get it up and running a JavaScript popup window is used to display images, outside html pages and other information. The highlighted code will be replaced with the Facebox tag "rel=facebox", the actual trigger script and CSS will be inserted inside of jQuery base, a plugin for Magento.
app/design/frontend/tilluminati/default/template/paypal/partner/logo.phtml
This is a sample of the actual code.
onclick="javascript:window.open('<?php echo $this->getAboutPaypalPageUrl() ?>','paypal',
'width=600,height=350,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"The above code is for the Paypal popup window, I commented out the "rel=facebox" tag because the paypal page was not loading properly. I ran out of time while setting up the store to figure out the problem, so I replaced the facebox tag with the old popup script code.
Replacement code locations
In the below file locations, you can see I removed the old popup onclick tag and the popup javascript trigger code, I replaced it with the "rel=facebox" code tag. Now when I click on the image, it will appear in a facebox window. I also added a " onClick="return false" command after the rel tag to stop the information from reloading repeatedly.
It is important to remember that your milage with facebox will vary, in some cases you will have to switch back to a popup window because the information will not display properly.
Product catalog images
Both media.phtml files govern control the product images and the images that they display, you will have to replace the onclick code in both locations.
app/design/frontend/tilluminati/default/template/catalog/media.phtml
app/design/frontend/tilluminati/default/template/catalog/product/view/media.phtml
Paypal and other partner logos
All of the logo.phtml files control the image and links for Magento partners that will be displayed on the side columns like PayPal, Visa and Mastercard. When you click on the logo you click on the logo, a window will pop up and display information from that vendor.
app/design/frontend/tilluminati/default/template/centinel/logo.phtml
Shipping information
The two locations below will display shipping information, again, all I did was replace the popup window code with the "rel="facebox"
app/design/frontend/tilluminati/default/template/sales/order/view.phtml
app/design/frontend/tilluminati/default/template/sales/order/shipment/item.phtml
Remeber, you can replace any of the popup windows with Facebox, just remember that not all of the information will display properly right away. You might ultimately have to go back to the popup window script until you find a different solution to the problem.