Search Text Highlighter

Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic

   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:  <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
<div id="content">

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.

Author	Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic
JamesD Members Profile Send Private Message Find Members Posts Add to Buddy List Newbie Joined: 10-July-2008 Status: Offline Points: 0	Post Options Post Reply Quote JamesD Report Post Thanks(0) Quote Reply Topic: Search Text Highlighter 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: <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 <div id="content"> 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.

JamesD Members Profile Send Private Message Find Members Posts Add to Buddy List Newbie Joined: 10-July-2008 Status: Offline Points: 0	Post Options Post Reply Quote JamesD Report Post Thanks(0) Quote Reply 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/

leeflang Members Profile Send Private Message Find Members Posts Add to Buddy List Newbie Joined: 24-June-2007 Location: United States Status: Offline Points: 0	Post Options Post Reply Quote leeflang Report Post Thanks(0) Quote Reply 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
	Peter http://208.112.123.87/LeeFlang/Default.aspx (site under development)

JamesD Members Profile Send Private Message Find Members Posts Add to Buddy List Newbie Joined: 10-July-2008 Status: Offline Points: 0	Post Options Post Reply Quote JamesD Report Post Thanks(0) Quote Reply 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

leeflang Members Profile Send Private Message Find Members Posts Add to Buddy List Newbie Joined: 24-June-2007 Location: United States Status: Offline Points: 0	Post Options Post Reply Quote leeflang Report Post Thanks(0) Quote Reply 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
	Peter http://208.112.123.87/LeeFlang/Default.aspx (site under development)

JamesD Members Profile Send Private Message Find Members Posts Add to Buddy List Newbie Joined: 10-July-2008 Status: Offline Points: 0	Post Options Post Reply Quote JamesD Report Post Thanks(0) Quote Reply 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;