Magento's out of the box search experience is not the best, we can all agree. One of the sorely missed points is that CMS Pages are not searched by default. This can be a painful experience for you, if you have a lot of worth Static Page Content.
Resolving the issue
There's two ways we go about resolving this issue and you can test it right here on our own website:
First, the Tangkok & Fidesio extension adds the ability to search CMS content, though it's not ideal on it's own. This is how it looks by default, ignoring the fact that it hasn't found anything. The real problem is that once it's populated with search data, people don't scroll down and effectively don't know you have searched your content either.
What I'm going to show you is how to improve it, so visitors searching are shown a visible clue that there are search results for content for them to view by making it tabbed. To do that, we use a simple tabbing library called tabber.js and you can see a demo here. When you're ready, right click this file and choose save as for the minimised tabber.js library.
As a general rule, I tend to keep my javascript libraries in /js/sitename/ as opposed to skinJs files mostly because it's easier to access and I am not distributing the theme files.
So in this example, for our site MageAustralia, I create a folder /js/mageaus/ and put tabber-minimized.js in there. We then open up our page.xml layout file for our template ie: app/design/frontend/default/mageaus/layout/page.xml and at approx. Line 50 after the cookies.js line, we add:
<action method="addJs"><script>mageaus/tabber-minimized.js</script></action>
We then save it and clear our cache, refresh the frontpage of your site and view the source to ensure it's loading and being linked to the file correctly.
Our next step involves modifying the default Tangkok & Fideso extenson template files. So what we want to do is copy the folder from: app/design/frontend/default/default/template/cmssearch/ to app/design/frontend/default//template/cmssearch/
Modifying the result.phtml file to contain the required Tab id / classes
First, we insert our first div's at Line 26:
<div class="page-head"> <h3><?php echo ($this->getHeaderText() || $this->getHeaderText() === false) ? $this->getHeaderText() : $this->__("Search results for '%s'", $this->helper('catalogSearch')->getEscapedQueryText()) ?></h3></div> <?php if($this->getResultCount()): ?>
So that it looks like this (note the tabber / tabbertab divs):
<div class="page-head"> <h3><?php echo ($this->getHeaderText() || $this->getHeaderText() === false) ? $this->getHeaderText() : $this->__("Search results for '%s'", $this->helper('catalogSearch')->getEscapedQueryText()) ?></h3></div> <div class="tabber"><div class="tabbertab" title="<?php echo $this->__('Products') ?>"><?php if($this->getResultCount()): ?>
We also jump to the very last line of the file and insert a closing div tag
That will add the code we need to create the tab for the products section. Now we add the code for the CMS Section. So find the following around Lines 57-60.
<div class="clear"><p></p></div> <h2><?php echo $this->__("Pages"); ?></h2></div>
and change it to look like this. This First closing div is there to close the code for the Products section
</div><div class="clear"><p></p></div><div class="tabbertab" title="<?php echo $this->__('Articles, Pages & News') ?>"><div class="page-head"> <h2><?php echo $this->__("Pages"); ?></h2></div>
<div class="tabbertab" title="<?php echo $this->__('Articles, Pages & News') ?"><div class="page-head"></div></div>
If we refresh the search results on our site, we should see something like this:
Now we just have to treat it to a little bit of CSS to make it look nice and we're done.
/* Tabber Elements for Search Results */
.tabberlive .tabbertabhide { display:none; }
.tabber { }
.tabberlive { margin-top:1em;}
.tabbertab .block-title{display:none;}
.tabbertab .block-homepage {border:none;}
ul.tabbernav { margin:0; padding: 7px 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; text-transform: uppercase;}
ul.tabbernav li{ list-style: none; margin: 0; display: inline;}
ul.tabbernav li a{
padding: 7px 1em;
margin-left: 3px;
border-radius: 5px 5px 0 0;
background: #3D4349;
background-image: -webkit-gradient(linear, left bottom,left top, color-stop(0.5, rgb(46,50,54)),color-stop(1, rgb(72,80,87)));
background-image: -moz-linear-gradient( center bottom, rgb(46,50,54) 50%, rgb(72,80,87) 100%);
border-bottom: none;
text-decoration: none;
}
ul.tabbernav li a:link { color: #FFF; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover{ color: #000; background: #DDD; border-color: #227;}
ul.tabbernav li.tabberactive a {background: #EAEAEA;border: 1px solid #333;border-bottom: 1px solid #EAEAEA;color: #333;}
ul.tabbernav li.tabberactive a:hover { color: #000; background: #EAEAEA; border-bottom: 1px solid white; }
.tabberlive .tabbertab { padding:5px; }
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 { display:none; }
And now, our finished results with CSS
