Jump to content

Add search box to main site


joelmalach

Recommended Posts

Hi

My setup is that I have a main site with just an index.html page and the shop in a subfolder, like this

www.mainsite.com/shop

Is there any way to add the shop's search box to my main site homepage (www.mainsite.com/index.html), so that clients can search the shop from the homepage?

Thanks in advance

Joel

Link to comment
Share on other sites

  • 1 month later...

Hi.

The Google search wasn't satisfactory, so I tried again and managed to get a search box on the main page of my website.

Here's how I did it

Go to a page in your shop, and right click, view source

Copy everything and paste into an empty html file

Remove everything except the div with the search box and some necessary CSS and JS links

I was left with this

 

<!DOCTYPE html>
<html class="no-js" xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-GB">
   <head>
      <title>Search results - </title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="http://www.mysite.com/shop/skins/foundation/css/normalize.css" rel="stylesheet">
      <link href="http://www.mysite.com/shop/skins/foundation/css/foundation.css" rel="stylesheet">
      <link href="http://www.mysite.com/shop/skins/foundation/css/cubecart.css" rel="stylesheet">
      <link href="http://www.mysite.com/shop/skins/foundation/css/cubecart.common.css" rel="stylesheet">
      <link href="http://www.mysite.com/shop/skins/foundation/css/cubecart.helpers.css" rel="stylesheet">
            <link href="http://www.mysite.com/shop/skins/foundation/css/cubecart.default.css" rel="stylesheet">
      <link href="http://www.mysite.com/shop/skins/foundation/css/jquery.chosen.min.css" rel="stylesheet">
      <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type='text/css'>
      
      <script src="http://www.mysite.com/shop/skins/foundation/js/vendor/modernizr.min.js"></script>
      <script src="http://www.mysite.com/shop/skins/foundation/js/vendor/jquery.js"></script>
      
   </head>

<body>

 <svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <symbol id="icon-search" viewBox="0 0 1792 1792">
            <path d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z"></path>
        </symbol>
    </defs>
</svg>       

            <div class="off-canvas-wrap" data-offcanvas>
             <div class="inner-wrap">
                 <div class="row marg-top" id="top_header">
               <div class="small-4 large-3 columns">
                 &nbsp;
               </div>
               <div class="small-8 large-9 columns nav-boxes">
                  <div class="row" id="nav-actions">
                     <div class="small-12 columns">
                        <div class="right text-center">
                         </div>
                            <div class="right text-center show-for-small"><a class="left-off-canvas-toggle button white tiny" href="#"><svg class="icon icon-x2"><use xlink:href="#icon-bars"></use></svg></a> <a class="button white tiny show-small-search" href="#"><svg class="icon icon-x2"><use xlink:href="#icon-search"></use></svg></a>
                            </div>
                     </div>
                 </div>
              <div class="row show-for-medium-up">
                <div class="small-12 columns">
                    <div>
                       <form target="_blank" action="http://www.mysite.com/shop/search.html" class="search_form" method="get">
                              <div class="row collapse">
                                 <div class="small-10 large-11 columns">
                                    <input name="search[keywords]" type="text" class="nomarg" placeholder="Search our store" required><small><a href="http://www.mysite.com/shop/search.html">Advanced Search</a></small>
                                 </div>
                                     <div class="small-2 large-1 columns">
                                        <button class="button postfix nomarg nopad" type="submit" value="Search"><svg class="icon"><use xlink:href="#icon-search"></use></svg></button>
                                     </div>
                                  </div>
                                      <input type="hidden" name="_a" value="category">
                                       <input type="hidden" name="token" value="020a24e1ef940b36da26674e98a860d0"></form>
                                           <div class="hide validate_search">Please enter a search keyword
                                           </div>
                                </div>
                            </div>
                          </div>
                       </div>
                </div>
                    <div class="row hide" id="small-search">
                           <div class="small-12 columns">
                            <div>
                                   <form target="_blank" action="http://www.mysite.com/shop/search.html" class="search_form" method="get">
                                      <div class="row collapse">
                                         <div class="small-10 large-11 columns">
                                            <input name="search[keywords]" type="text" class="nomarg" placeholder="Search our store" required><small><a href="http://www.mysite.com/shop/search.html">Advanced Search</a></small>
                                         </div>
                                         <div class="small-2 large-1 columns">
                                            <button class="button postfix nomarg nopad" type="submit" value="Search"><svg class="icon"><use xlink:href="#icon-search"></use></svg></button>
                                         </div>
                                      </div>
                                  <input type="hidden" name="_a" value="category">
                                   <input type="hidden" name="token" value="020a24e1ef940b36da26674e98a860d0"></form>
                                       <div class="hide validate_search">Please enter a search keyword
                                       </div>
                            </div>
                           </div>
                    </div>
                    <div class="row">
                           <div class="small-12 columns small-collapse">
                  <div class="hide" id="val_lang_back">Back
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="small-12 columns small-collapse">
               </div>
            </div>
        </div>
    </div>
      
 <script src="http://www.mysite.com/shop/skins/foundation/js/1.foundation.min.js" type="text/javascript"></script>
 <script src="http://www.mysite.com/shop/skins/foundation/js/2.cubecart.js" type="text/javascript"></script>
   </body>
</html>

 

I saved this as search.html

*** Note that you must put  target="_blank" in the form tags or it won't work ***

Then, on the home page of my site, I added an iframe, like this

<iframe src="search.html" height="50px" width="100%" scrolling="no" frameborder="0"></iframe>
 

That's it. The search box now shows on my website's home page and opens a new tab with the search result

Hope this helps someone

 

 

Edited by joelmalach
put my website address in code by accident. changed to mysite.com
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...