Page 1 of 1

How to replace Opencart Search with Google Custom Search

Posted: Sat Oct 22, 2011 10:18 pm
by SherlockHolmes
Hi
I want to replace the opencart default search bar and mechanism with google custom search for websites: https://www.google.com/cse/

Appreciate some precise instructions as I do not know much of coding.
Thanks in advance!

Re: How to replace Opencart Search with Google Custom Search

Posted: Sun Oct 23, 2011 6:33 am
by Jeremy Fisk
Hiya... why don't you just remove the search, and put in the code for google seach in your header.tpl?

Re: How to replace Opencart Search with Google Custom Search

Posted: Sun Oct 23, 2011 2:57 pm
by SherlockHolmes
Hi Jeremy,
Thanks for your reply. But I do not have too much knowledge of code. Could you point out exactly what I need to replace in header.tpl with the google code? I do not want to mess it up. Look forward to your reply.

Re: How to replace Opencart Search with Google Custom Search

Posted: Mon Oct 24, 2011 2:50 am
by STN
I need the same thing done, i will post my code when i am done. I think i can achieve this easily that user searches on site but redirects to your google custom search and then do the actual search there. Of course the page is the one you make through google cse. Take a look here

http://forums.deviatedhacking.com (did this for ipb forums)

I am gonna be waiting for a proper solution as well though.

Re: How to replace Opencart Search with Google Custom Search

Posted: Tue Oct 25, 2011 2:35 pm
by Jeremy Fisk
All righty... i had a look, and it is easy as...

all you have do do is grab the code that you get from google, and paste it into the correct .tpl file (depending on where you want the search box to be displayed... in most cases this will be at the top of the page, somewhere around where the last search box was, so it will be the header.tpl that you will need to edit...

Instead of modifying the .tpl files by removing the opencart search, I would either comment it out or else i would change the below code in the stylesheet.css

Code: Select all

#header #search {
	position: absolute;
	top: 15px;
	right: 0px;
	width: 298px;
	z-index: 15;
}
#header .button-search {
	position: absolute;
	left: 0px;
	background: url('../image/button-search.png') center center no-repeat;
	width: 28px;
	height: 24px;
	border-right: 1px solid #CCCCCC;
	cursor: pointer;
}
#header #search input {
	background: #FFF;
	padding: 1px 1px 1px 33px;
	width: 262px;
	height: 21px;
	border: 1px solid #CCCCCC;
	-webkit-border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px 3px 3px 3px;
	-khtml-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;
	-webkit-box-shadow: 0px 2px 0px #F0F0F0;
	-moz-box-shadow: 0px 2px 0px #F0F0F0;
	box-shadow: 0px 2px 0px #F0F0F0;	
}
and change that into the below code

Code: Select all

#header #search {
	display: none;
	position: absolute;
	top: 15px;
	right: 0px;
	width: 298px;
	z-index: 15;
}
#header .button-search {
	display: none;
	position: absolute;
	left: 0px;
	background: url('../image/button-search.png') center center no-repeat;
	width: 28px;
	height: 24px;
	border-right: 1px solid #CCCCCC;
	cursor: pointer;
}
#header #search input {
	display: none;
	background: #FFF;
	padding: 1px 1px 1px 33px;
	width: 262px;
	height: 21px;
	border: 1px solid #CCCCCC;
	-webkit-border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px 3px 3px 3px;
	-khtml-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;
	-webkit-box-shadow: 0px 2px 0px #F0F0F0;
	-moz-box-shadow: 0px 2px 0px #F0F0F0;
	box-shadow: 0px 2px 0px #F0F0F0;	
}
I hope this helps

Chears

Jem

Re: How to replace Opencart Search with Google Custom Search

Posted: Tue Nov 01, 2011 4:46 pm
by SherlockHolmes
Thanks Jeremy. So I edit the stylesheet and add the google code. Just wanted to know where in the header.tpl I add the google code. I do not know programming and your advice will be really helpful. I am using opencart 1.5.1.2. Thanks!

Re: How to replace Opencart Search with Google Custom Search

Posted: Tue Nov 01, 2011 4:56 pm
by Jeremy Fisk
Hiya...

edit the stylesheet to hide the old search... (instead of removing it)

and then put your google code in your header.tpl
where you put the code depends on where you want the seach box in the page...

If you want the search box where you had the old one, just put the google code above the old search code...

Re: How to replace Opencart Search with Google Custom Search

Posted: Tue Nov 01, 2011 9:25 pm
by STN
Hi,

Got time and worked on it. I changed it to show Google search only when it can't find any products since it fits my needs perfectly. Here's how it looks.

http://deviatedhacking.com/index.php?ro ... egory_id=0

If you're interested, just do these changes.

/catalog/view/theme/default/stylesheet/stylesheet.css

On line 39

Code: Select all

/* layout */
#container {
replace with this

Code: Select all

/* layout */
.gcse {
	width: 100%;
}
.gcse_usetext {
	color: #000000;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	/*text-transform: uppercase;*/

}
#container {
/catalog/view/theme/default/template/product/search.tpl

On line 98, find these

Code: Select all

    <?php } else { ?>
    <div style="background: #F7F7F7; border: 1px solid #DDDDDD; padding: 10px; margin-top: 3px; margin-bottom: 15px;"><?php echo $text_empty; ?></div>
    <?php }?>
 </div>
Replace with these.

Code: Select all

   <?php } else { ?>
    <div style="background: #F7F7F7; border: 1px solid #DDDDDD; padding: 10px; margin-top: 3px; margin-bottom: 15px;">
	<p class="gcse_usetext">
	<?php echo $text_empty;?>
	<br /><br />Try again using 
	<font size="4"><font size="4" color ="#0000FF">G</font><font size="4" color ="#FF1000">o</font><font size="4" color ="#FFA000">o</font><font size="4" color ="#0FAA0F">g</font><font size="4" color ="#0000FF">l</font><font size="4" color ="#FF0000">e</font> Search</font>
	for best results <br />
	</p>
	
	<table class ="gcse">
	<tr>
<!--- GOOGLE CUSTOM SEARCH CODEE GOES HEREE!! --!>

</tr>
</table>	
	
<?php }?>
	</div>
You should be all set. I am using v1.4.9.6 but i guess the 1.5x version would be same as well. You can of course change the styling etc if you don't like what i used but this is the places you need to edit for showing it.

I think removing the whole search function is not a good idea since opencart lists the products in a very nice way that Google won't and i have also seen google search random stuff and crawl those search results. You wouldn't want that removed, would you ?. Google search is good when opencart fails since google brings relevant results and doesn't require exact terms.

Cheers

Re: How to replace Opencart Search with Google Custom Search

Posted: Fri Nov 04, 2011 7:56 pm
by SherlockHolmes
STN
Fantastic! I think this should be voted into the core files in the next version. Thanks a million!

Re: How to replace Opencart Search with Google Custom Search

Posted: Wed Nov 09, 2011 8:45 pm
by doodlemoonch
Anybody know how to integrate the custom search form into the existing opencart search field?

Re: How to replace Opencart Search with Google Custom Search

Posted: Thu Dec 01, 2011 6:03 pm
by STN
My first opencart extension w00t! :drunk:

Replace Opencart search with Google Custom Search completely or partially.

If i get enough attention with it, i may start releasing more mods that i personally made for my own site.