Column sort order images and Theme Switcher

[Blaise]

Not sure if this topic belongs here or in "Tips and Tricks". Feel free to move it if required.

 

Hi all, been lurking on here for a few days and have recently started building an online store using osCommerce v2.3.1. I was unhappy with the standard "+" and "-" column sort indicators employed in product listing headers and stumbled across the Column Sort Arrows contribution that uses images instead. However, I also use Theme Switcher to set the colour scheme of my site and the arrow images used in aforementioned contribution are of a fixed colour and sort-of break the look of a theme (e.g. le-frog, sunny, redmond, start etc). I wanted something that didn't require any additional images to manage (other than what's already supplied within a theme from Theme Roller) and kept the look-n-feel of the active theme.

 

So, what's needed to achieve this? Surprising little as it turns out... modify 2 files - catalog/stylesheet.css and catalog/includes/functions/general.php using the instructions below -

 

In catalog/stylesheet.css, add a new style rule (I added this below the main ".productListingHeader" entry):

.productListingHeader .ui-icon {
 display: inline-block;
 vertical-align: bottom;
}

 

 

In catalog/includes/functions/general.php, find within the tep_create_sort_heading() function (around line 892):

$sort_suffix = (substr($sortby, 0, 1) == $colnum ? (substr($sortby, 1, 1) == 'a' ? '+' : '-') : '') . '</a>';

and replace the code with:

$sort_suffix = '[b]<span class="ui-icon ' . (substr($sortby, 0, 1) == $colnum ? (substr($sortby, 1, 1) == 'a' ? 'ui-icon-triangle-1-n' : 'ui-icon-triangle-1-s')  : 'ui-icon-carat-2-n-s') . '"></span></span></a>';

 

Replace the return of the function tep_create_sort_heading() from:

return $sort_prefix . $heading . $sort_suffix;

with:

return $sort_prefix . '<span>' . $heading .  $sort_suffix;

 

Please note the use of the <span> tags (frustratingly, this took the most amount of time to get right). They are required to ensure the title justification remains unbroken, the hyperlinks don't extending across the entire column and prevents the titles running over two lines.

 

I hope this is of some help to others.

Edited June 8, 2012 by Blaise

[Blaise]

Please note the replacement code in my instructions:

$sort_suffix = '[b]<span class="ui-icon ' . (substr($sortby, 0, 1) == $colnum ? (substr($sortby, 1, 1) == 'a' ? 'ui-icon-triangle-1-n' : 'ui-icon-triangle-1-s')  : 'ui-icon-carat-2-n-s') . '"></span></span></a>';

should read:

$sort_suffix = '<span class="ui-icon ' . (substr($sortby, 0, 1) == $colnum ? (substr($sortby, 1, 1) == 'a' ? 'ui-icon-triangle-1-n' : 'ui-icon-triangle-1-s')  : 'ui-icon-carat-2-n-s') . '"></span></span></a>';

 

Couldn't update the previous post (timeout on edits I assume).

Edited June 8, 2012 by Blaise