ProductCart Shopping Cart Software Forums : Search Text Highlighter

Search Text Highlighter : Yes, I see that on the advanced...

Tue, 27 Jan 2009 12:38:15 +0000

Author: JamesD
Subject: 2389
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$2$3<');
}

window.onload = highlightOnLoad;

Search Text Highlighter : That is then only a partial solution...

Tue, 27 Jan 2009 12:01:15 +0000
Author: leeflang
Subject: 2389
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?

Edited by leeflang - 27-January-2009 at 12:21pm

Search Text Highlighter : It searches the entire page content...

Tue, 27 Jan 2009 11:13:25 +0000
Author: JamesD
Subject: 2389
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

Search Text Highlighter : Does this script highlight entered...

Tue, 27 Jan 2009 10:39:41 +0000
Author: leeflang
Subject: 2389
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?

Edited by leeflang - 27-January-2009 at 10:39am

Search Text Highlighter : I would like to mention that credit...

Sun, 25 Jan 2009 17:38:01 +0000
Author: JamesD
Subject: 2389
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/

Search Text Highlighter : Here are the simple steps I used...

Sun, 25 Jan 2009 17:33:37 +0000
Author: JamesD
Subject: 2389
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: 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:

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

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

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.