JavaScript is an excellent way to improve site interaction and behavior. In this episode, I will use simple JavaScript to add a transition to the Pine Theme's product detail page. This transition will replace an otherwise abrupt content change that happens at the page's tabbed product description section.
As is, when a shopper clicks on "We Also Recommend" or any un-active tab, a JavaScript changes the display attribute for that tab's related content and the content for the active tab's content so that new information is shown to the shopper.
Since the content from one tab might differ in height from the content of another tab, the page is re-rendered and the page's footer moves up or down accordingly. Personally, I think this abrupt change in content height and footer position can be distracting, so I am going to change it.
A Magento Theme Start to Finish, Part 19
The Magento Theme Series, To Date
- Part One: Prolegomena
- Part Two: Page Planning, Templates, & HTML 5
- Part Three: HTML Validation and "Your" Labels
- Part Four: The CSS Work Begins
- Part Five: The Home Page CSS Continues
- Part Six: Product Navigation and CSS Rounded Corners
- Part Seven: More Rounded Corners
- Part Eight: The Boring Middle
- Part Nine: A Content Slider
- Part Ten: The Home Page Home Stretch
- Part Eleven: The Footer
- Part Twelve: The Search Form
- Part 13: Turning the Page
- Part 14: Facing the Horror
- Part 15: Style and Graphics for the Category Page Sidebar
- Part 16: Category Page Image and Font
- Part 17: The Category Page Grid
- Part 18: CSS for the Product Detail Page
- Part 19: Smooth Sliding Tabs
Magento and JavaScript
A typical Magento implementation will have about 15-to-20 JavaScript files concatenated into some 12,000 or so lines of code. So finding a particular function can be something like finding the proverbial needle in a haystack. But in this case, it is a search I need to make.
If I were adding functionality to the page, I would just write some fresh JavaScript and be done. But I know that JavaScript is already acting on the product detail page tabs, so it is far better to identify the code that is making the tab content appear and disappear and modify it, rather than writing some new code and superseding what is already in place.
There are a number of methods for finding the proper spot in the code. But I tend to just search for likely terms in the concatenated JavaScript file, and then use context to identify the proper JavaScript file in the site hierarchy. In this case, my normal modus operandi didn't work, so I browsed through the JavaScript using the Firefox add-on, Firebug.
Having done of all this, I found that the script I needed was actually not in the concatenated JavaScript files but actually coded on page, via the template file tabs.phtml at app > design > frontend > default > pine > template > catalog > product > view.
showContent: function(a) {
var li = $(a.parentNode), ul = $(li.parentNode);
ul.getElementsBySelector('li', 'ol').each(function(el){
var contents = $(el.id+'_contents');
if (el==li) {
el.addClassName('active');
contents.show();
} else {
el.removeClassName('active');
contents.hide();
}
});
}
Next, I made the changes and reloaded the page. And nothing happened. Why? Well, after intensive code review, it turned out that I had an older version of the Script.aculo.us effects JavaScript file in my Magento install. Script.aculo.us is the Prototype JavaScript library extension that Magento uses to manage many onsite effects. How I got this older version of Script.aculo.us, I cannot say. But I headed over to Script.aculo.us site to download an updated version.
With my nice, fresh Script.aculo.us files saved in the scriptaculous folder at js > scriptaculous, I simply replaced show() and with blindDown({ duration: 2.0 ]).
showContent: function(a) {
var li = $(a.parentNode), ul = $(li.parentNode);
ul.getElementsBySelector('li', 'ol').each(function(el){
var contents = $(el.id+'_contents');
if (el==li) {
el.addClassName('active');
contents.blindDown({ duration: 2.0 });
} else {
el.removeClassName('active');
contents.hide();
}
});
}
The result is a smooth sliding transition that seems more natural than the abrupt change we replaced.
The product detail page is coming along very nicely, and I have reached another natural stopping spot for this episode. In the next episode, I will use some PHP, Facebook's XFBML, and a short JavaScript to add a "Like" button to the product detail pages.
