Post by SherlockHolmes » Sat Oct 22, 2011 10:18 pm

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!

New member

Posts

Joined
Mon Sep 19, 2011 6:37 pm

User avatar
Active Member

Posts

Joined
Thu Nov 11, 2010 6:11 pm
Location - New Zealand (Tokomaru, Palmerston North)

Post by SherlockHolmes » Sun Oct 23, 2011 2:57 pm

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.

New member

Posts

Joined
Mon Sep 19, 2011 6:37 pm

Post by STN » Mon Oct 24, 2011 2:50 am

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.

Game Trainers


STN
New member

Posts

Joined
Fri Jul 01, 2011 6:45 am


Post by Jeremy Fisk » Tue Oct 25, 2011 2:35 pm

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

If i have helped... please click here to donate

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


User avatar
Active Member

Posts

Joined
Thu Nov 11, 2010 6:11 pm
Location - New Zealand (Tokomaru, Palmerston North)

Post by SherlockHolmes » Tue Nov 01, 2011 4:46 pm

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!

New member

Posts

Joined
Mon Sep 19, 2011 6:37 pm

Post by Jeremy Fisk » Tue Nov 01, 2011 4:56 pm

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...

If i have helped... please click here to donate

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


User avatar
Active Member

Posts

Joined
Thu Nov 11, 2010 6:11 pm
Location - New Zealand (Tokomaru, Palmerston North)

Post by STN » Tue Nov 01, 2011 9:25 pm

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

Game Trainers


STN
New member

Posts

Joined
Fri Jul 01, 2011 6:45 am


Post by SherlockHolmes » Fri Nov 04, 2011 7:56 pm

STN
Fantastic! I think this should be voted into the core files in the next version. Thanks a million!

New member

Posts

Joined
Mon Sep 19, 2011 6:37 pm

Post by doodlemoonch » Wed Nov 09, 2011 8:45 pm

Anybody know how to integrate the custom search form into the existing opencart search field?

New member

Posts

Joined
Wed May 12, 2010 9:27 pm

Post by STN » Thu Dec 01, 2011 6:03 pm

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.

Game Trainers


STN
New member

Posts

Joined
Fri Jul 01, 2011 6:45 am

Who is online

Users browsing this forum: No registered users and 15 guests