Pre-programmed Search Link

[malljess]

I have the following on my page:

SEARCH OUR BOOKS AND DVD'S BY CATEGORY

• Traumatic Stress
• Anxiety


I want the words (i.e., Traumatic Stress and Anxiety) to become links to start a search for books that contain those words. For example, if someone clicks on Anxiety a search will automatically take place that will return all books and dvds with the keyword Anxiety on the search results page. I don't want to have to assign books to pages and then link the work Anxiety to the page containing all books and dvds related to Anxiety. Thank will be very cumbersome since I plan on having many products. I want to link the keyword to a search.

Can anyone show me the code for this? I have searched and tried different thing, but to no avail.

As always, it is appreciated.

[GiftSpecialists]

I also would like to know how to do this.

[malljess]

I tried using Javascript to do this. I think I can but not working correctly.

[Jim]

Here is the search form from one of the ShopSite templates.

Code: Select all

<form action="http://mydomain.com/cgi-bin/ssinstall/sc/productsearch.cgi?storeid=*1826919bd07ed168a063a8481505" method="get">
 <input name="storeid" value="*1826919bd07ed168a063a8481505" type="hidden">
 <div id="search">
 <input value="" id="search_field" name="search_field" type="text">
 <input value="GO" id="search_button" type="submit">
 </div>
</form>

You need to modify that code for each of your search terms.
Make the search_field be type="hidden" with the the value="" being set to the word you want to search for.
Make the submit value be the text that will display that the shopper clicks on to do the search.
Use the <div id="search"> to style the text.

So it would be something like this, where <searchterm> would be what you want to search for.

Code: Select all

<form action="http://mydomain.com/cgi-bin/ssinstall/sc/productsearch.cgi?storeid=*1826919bd07ed168a063a8481505" method="get">
 <input name="storeid" value="*1826919bd07ed168a063a8481505" type="hidden">
 <div id="search">
 <input value="<searchterm>" id="search_field" name="search_field" type="hidden">
  <input value="<searchterm>" id="search_button" type="submit">
  </div>
  </form>

[malljess]

Thank you for the reply.

One question - How would you create the link? Would you use the <div id=search> as the link?

[Jim]

I'm not sure I understand what you are asking. If you mean you want to change the font, color, underline etc. then yes you would create a style for the the div. But I think more important would be a style for the id="search_button" since that is the only part that will be visible.

I added the following style definition to the page where I tested the code in my previous post.

Code: Select all

<style type="text/css" >
#search_button  {
 text-decoration: underline;
 padding: 0.1em 0.2em;
 margin: -0.1em -0.2em;
 color: #666;
 background: pink;
 font-size: 200%;
}
</style>

The result is the text for the <searchterm> displays as large underlined text on a pink background. Note that if the style is used elsewhere on the page that area will also be changed, so you may want to create a new class just for the search_button text.

[Jim]

I did some experimenting and was able to create a page template and a product template that could automatically generate search links. It requires some setup but once done it wouldn't be hard to include it on all the pages in your store.

For this to work you need to create a new page template with just the [-- DEFINE LINK_TO_PAGE --] section as outlined below. You would also need to use one of the custom page fields to indicate that the page is to be used for a "search category" page. The example uses the page extra field 1. The page template with this define link to page section is named search-category which will be used to specify that template for the links in the loop links section. You would assign the search category pages to what ever pages you want the search links to appear on. The search term will be the page name.

Code: Select all

[--DEFINE LINK_TO_PAGE--]
[-- if page.field1 "search category" --]
<form action="[-- SHOPPING_CART_URL Base --]/productsearch.cgi?storeid=[-- STORE.ID --]" method="get">
    <input name="storeid" value="[-- STORE.ID --]" type="hidden">
    <div id="search">
          <input value="[-- page.name --]" id="search_field" name="search_field" type="hidden">
          <input value="[-- page.name --]" id="search_button"  type="submit">
   </div>
</form>
<br>
[-- end_if --]
[--END_DEFINE LINK_TO_PAGE--]


Then in your normal page template where you want the search links to appear you would put the following code. Note the template override of "search-category" ,

Code: Select all

[-- loop links --]
[-- link search-category --]<br>
[-- end_loop links --]

To use products as the "search category" values you could do it like this. (again using the product extra field1 for "search category" and the product template named search-category so you can override the default template with this special one.

Code: Select all

[-- DEFINE PRODUCT --]
# product template just for search links.
[-- if product.field1 "search category " --]
<form action="[-- SHOPPING_CART_URL Base --]/productsearch.cgi?storeid=[-- STORE.ID --]" method="get">
 <input name="storeid" value="[-- STORE.ID --]" type="hidden">
 <div id="search">
 <input value="[-- product.name --]" id="search_field" name="search_field" type="hidden">
  <input value="[-- product.name --]" id="search_button"  type="submit">
  </div>
  </form>
<br>
[-- end_if --]
[-- END_DEFINE PRODUCT --]


If using the product method you would assign the search category products to the page and then on the page template where you want the search links to go you would have the following code. Note that the product name will be used for the search term.

Code: Select all

[-- loop products--]
[-- product search-category --]<br>
[-- end_loop products --]

Hope that gives you some ideas of how this could be used.

[malljess]

Thank you for your reply. I got it working. However, trying to get rid of the button and use regular text as the link. For example, the word Anxiety would not be in a button box but on its own like this:

• Anxiety

I played with the CSS code and the box remains.

Any way of getting rid of it?

[Jim]

There is really no such thing as a text button, it is just text with a box of some type drawn around using styles.
It just as if I put
_____________
| jim is here |

So turn off the border on the button by adding "border:none;" to the style.

<style type="text/css" >
#search_button , input.submit {
border:none;
text-decoration: underline;
padding: 0.1em 0.2em;
margin: -0.1em -0.2em;
color: #666;
background: pink;
font-size: 200%;
}
</style>

[malljess]

Thank you for your help.

[Jim]

Glad to be able to help out. I learned some in the process as well.

[jerseysoutlet]

Thank you for this article. That's all I can say. You most definitely have made this blog into something special. You clearly know what you are doing, you've covered so many bases.Thanks!