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!
Hiya... why don't you just remove the search, and put in the code for google seach in your header.tpl?
Hand Dryers
Bookstore Mod
QuickShop Module
Restricted Access - Compulsory Login
Template Override - Category Specific (vQmod)
Template Override - Brand Specific (vQmod)
How did you find out about us register question mod
Compulsory Login vQmod
Brands In Top Menu
zoom - Product Image - Auto on hover
Active Member
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.
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.
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.
http://forums.deviatedhacking.com (did this for ipb forums)
I am gonna be waiting for a proper solution as well though.
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
and change that into the below code
I hope this helps
Chears
Jem
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;
}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;
}Chears
Jem
Hand Dryers
Bookstore Mod
QuickShop Module
Restricted Access - Compulsory Login
Template Override - Category Specific (vQmod)
Template Override - Brand Specific (vQmod)
How did you find out about us register question mod
Compulsory Login vQmod
Brands In Top Menu
zoom - Product Image - Auto on hover
Active Member
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!
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...
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...
Hand Dryers
Bookstore Mod
QuickShop Module
Restricted Access - Compulsory Login
Template Override - Category Specific (vQmod)
Template Override - Brand Specific (vQmod)
How did you find out about us register question mod
Compulsory Login vQmod
Brands In Top Menu
zoom - Product Image - Auto on hover
Active Member
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
replace with this
/catalog/view/theme/default/template/product/search.tpl
On line 98, find these
Replace with these.
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
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 {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 {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>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>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
STN
Fantastic! I think this should be voted into the core files in the next version. Thanks a million!
Fantastic! I think this should be voted into the core files in the next version. Thanks a million!
My first opencart extension w00t! 
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.
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.
Who is online
Users browsing this forum: No registered users and 126 guests
