Customizing ProductCart - Search Text Highlighter

Print Page | Close Window

Search Text Highlighter

Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Customizing ProductCart
Forum Description: Exchange messages with other users that are customizing ProductCart.
URL: https://forum.productcart.com/forum_posts.asp?TID=2389
Printed Date: 22-July-2025 at 9:43pm
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: Search Text Highlighter

Posted By: JamesD
Subject: Search Text Highlighter
Date Posted: 25-January-2009 at 5:33pm

Here are the simple steps I used to add search text highlighting to my ProductCart.

FYI: I did this to a ProductCart v.3.5 cart, however I believe this will work on most versions. The text in green below refers to code you'll need to insert.

Step 1: Unzip this file: http://www.earlyimpact.com/forum/uploads/1255/highlighter.zip - uploads/1255/highlighter.zip , and place in the existing /includes/javascripts folder.

Step 2: Add a link to the js file in the existing header.asp file: <script src="../includes/javascripts/highlighter.js" type="text/javascript"></script>

Step 3: Insert the following line of code in header.asp, right after the <body> tag

Step 4: Insert the following line of code in footer.asp, right before the </body> tag

</div>

Step 5: Add the following code at the end of the existing file pcHeaderFooter08.css:

/* ----- Search Text Highlighting styles ----- */

span.term0 {
background-color: #99ccff;
}
span.term1 {
background-color: #99ccff;
}
span.term2 {
background-color: #99ccff;
}

** Note regarding the css code: Each span.term style refers to the number of search terms entered by the user. In other words, if they enter more than one search term, each term can be given a different style (term0, term1, etc.) You can add additional term styles if you want; just name them as shown: term0, term1, term2, term3, etc.

Replies:

Posted By: JamesD
Date Posted: 25-January-2009 at 5:38pm

I would like to mention that credit for the js code goes to Eric Wendelin: http://eriwen.com/javascript/highlight-search-results-with-js/ - http://eriwen.com/javascript/highlight-search-results-with-js/

Posted By: leeflang
Date Posted: 27-January-2009 at 10:39am

Does this script highlight entered search terms only in search results page or also in individual product pages?

-------------
Peter http://208.112.123.87/LeeFlang/Default.aspx (site under development)

Posted By: JamesD
Date Posted: 27-January-2009 at 11:13am

It searches the entire page content for the search terms and shows those terms highlighted on the search results page only.

You can see it in action on this site I did: http://www.batteriesonthego.com - http://www.batteriesonthego.com

Posted By: leeflang
Date Posted: 27-January-2009 at 12:01pm

That is then only a partial solution (BTW, I saw it does not work on main search, only on search result page), usable for 'short product descriptions'. With 'long product descriptions' it would not work, since buyers would still have to take a lot of time navigating the actual descriptions.

There are quite a lot of 'hosted search engine services out there and they offer both search highlighting functionalities. Maybe it is a better option to use such a service?

-------------
Peter http://208.112.123.87/LeeFlang/Default.aspx (site under development)

Posted By: JamesD
Date Posted: 27-January-2009 at 12:38pm

Yes, I see that on the advanced search it's not working... thanks for pointing that out. I realized that's due to the fact that ProductCart sends the keyword variable as "keyWord" (with a capital W), and since Javascript is case-sensitive it's not seeing it. I've edited the code in the external js to fix this:

function highlightOnLoad() {
// Get search string
//if (/keyword\=/.test(window.location.search)) {
   if (/keyword\=/.test(window.location.search) || /keyWord\=/.test(window.location.search)) {
//if (window.location.search != "") {
    var searchString = getSearchString();
    // Starting node, parent to all nodes you want to search
    var textContainerNode = document.getElementById("content");

// Informational message for search
var searchInfo = 'Search Results for: ';

    // Split search terms on '|' and iterate over resulting array
    var searchTerms = searchString.split('|');
    for (var i in searchTerms) {
      // The regex is the secret, it prevents text within tag declarations to be affected
      var regex = new RegExp(">([^<]*)?("+searchTerms+")([^>]*)?<","ig");
      highlightTextNodes(textContainerNode, regex, i);
    }
}
}

// Pull the search string out of the URL
function getSearchString() {
// Return sanitized search string if it exists
var rawSearchString;
if(/keyword\=/.test(window.location.search)) {rawSearchString = window.location.search.replace(/[a-zA-Z0-9\?\&\=\%\#]+keyword\=(\w+)(\&.*)?/,"$1");}
else {rawSearchString = window.location.search.replace(/[a-zA-Z0-9\?\&\=\%\#]+keyWord\=(\w+)(\&.*)?/,"$1");}
// Replace '+' with '|' for regex
// Also replace '%20' if your cms/blog uses this instead (credit to erlando for adding this)
return rawSearchString.replace(/\%20|\+/g,"\|");
}

function highlightTextNodes(element, regex, termid) {
var tempinnerHTML = element.innerHTML;
// Do regex replace
// Inject span with class of 'highlighted termX' for google style highlighting
element.innerHTML = tempinnerHTML.replace(regex,'>$1<span class="highlighted term'+termid+'">$2</span>$3<');
}

window.onload = highlightOnLoad;