Styling the Search Results

[ajhauser]

Hello,
I am working on my first ShopSite site and was wondering if there was any online documentation about further editing the layout of the search results page? As you can see I have the basic code in place, but my results are far from aesthetically pleasing...

http://brotherscountrysupply.com/cgi-bin/sc/productsearch.cgi?http%3A%2F%2Fbrotherscountrysupply.com%2Fstore%2Fmedia%2Fcountry-pet-supply-form-button-search-2.png.x=0&http%3A%2F%2Fbrotherscountrysupply.com%2Fstore%2Fmedia%2Fcountry-pet-supply-form-button-search-2.png.y=0&search_field=dog&storeid=*1e8471a159014817ab2094b6e99e04b86d

Thanks very much.

[Jim]

Beauty is in the eye of the beholder.

What do you mean by "my results are far from aesthetically pleasing..."

What don't you like? What do you want changed?

[ajhauser]

True, and I meant no offense by any means. Chances are there is more I can do through the Back Office. If you go to the site and search "iams", for example.

http://brotherscountrysupply.com/store/

If Granny wants item #2, there is no distinct spacing between the blue links above and below the can. She can only add 1 to the cart. The items span the entire page, which would be ok if the title of the item was in line with the picture, price and button. It would also be nice to get the links to pages underneath the name, not the pic, as well as some spacing above and below each item so the page was a little less congested...

I have been really impressed with the way that ShopSote functions. I like that it uses static (in a sense) pages, I like that it has been easy for my clients to use, but - and this may be because I am using the custom templates code - stuff like the search results and cart need some work done on them layout-wise for this clients website.

[Jim]

There are a couple of things that are causing the title to not line up with the row. First, the cell the product name is in has 'valign="top"' which puts the text at the very top of the cell. It might be better if it was valign="middle". Second, the product image cell is also valign="top" which puts the images at the top, but some images have blank space above the image so that pushes it down a little in the cell.

Are you using a product template that you created for the search results? or is it a ShopSite provided one?

[ajhauser]

Well, it is my template, but I copy/pasted from the quick template tutorial(s). I'm just trying to get some direction before I start ripping stuff apart...

[Jim]

The important thing to remember about search is that you get 2 sets of results back for each product that matches the search criteria , (1) the product and (2) the page links for the product. The product info comes back first followed by all page links where the product can be found. So when you layout your search product template you need to include the placement of product data in such a way that it is all displayed before the page links are displayed.

In the code that you currently have a table is created with the first row being for the product info (description, price, image etc) and then a separate row is output for each page link associated with that product.

If you want the page links under the product name you could perhaps use <div>s instead of a table and position the <div> so that the page links <div> is below the product name <div>.

To do it with a table you could put the links in the first cell of a separate table row instead of the second one as is forced by the <td/> shown in this code on the page.

Code: Select all

<tr>
    <td/>

    <td valign="top" align="left">
    <b>
<a href="http://brotherscountrysupply.com/store/food-dog-wet-ss2.html#120">- Food - Dog - Wet</a>

Another thing that you could probably leave out is the <td> for the product description since none of the products seem to have descriptions.

Code: Select all

 <td valign="top" align="left" style="font-size: smaller;">
    [-- product.productdescripton --]</td>

 <td align="center">

The code is already differentiating between product and page links types of [-- SEARCHRESULT --] so just make sure that you make the edits to the correct section of the search product template.

If you have specific questions please post them along with the sections of the template that you are working on.

[ajhauser]

First, thank you for the reply. I think that I am starting to understand this... I've gotten to the point where I have removed a few table elements and popped a few divs in, so at least I can KIND of see what I'm doing. These are the next steps:

1. I need to get access to the product name, picture, price and add to cart button so I can style them using divs instead of table elements - is this possible?
Do I need to be making changes within [-- SEARCHRESULT --] - or is that even possible?

2. The client asked that items with multiple sizes / prices dropdown menues show up. Personally, I'd put them right after price.

3. As you can see, my div with the grey border around the page link is repeating, but I'm not sure how else to place this to prevent it from hallening.

The page is here (search in top right and sidebar): http://www.brotherscountrysupply.com/store/
My search query for testing is "iams"

Here is the code in my SEARCH template (I'm only using inline styles for testing purposes) - I'm stuck...

Code: Select all

<div style="width:600px; padding:10px; margin-right:auto; margin-left:auto; margin-top: 25px; margin-bottom: 25px; border: 2px dashed #FF0; ">


    [-- VAR.pa_search_result "false" --]
    [-- LOOP SEARCH --]
    [-- IF SEARCHLINK --]

<div style="border: 1px dashed #CCC; padding: 10px; font-weight:bold;">
This item is available on the following pages:<br />

    [-- END_IF --]

    [-- SEARCHRESULT --]

    [-- IF SEARCHLINK --]

</div><!--SearchLinkedPagesWrapper-->

    [-- END_IF --]
    [-- VAR.pa_search_result "true" --]
    [-- END_LOOP SEARCH--]
    [-- IF VAR.pa_search_result "false" --]
    <tr><td align="left" valign="top">[-- STORE.88 --] [-- SEARCHSTRING --]</td></tr>
    [-- END_IF --]


    [-- IF VAR.Quantityproduct "yes" --]
    <tr><td>[-- Store.QuantityPricingFlag --] [-- Store.QuantityPricingMsg --]</td></tr>
    [-- END_IF --]


    [-- IF VAR.Variableproduct "yes" --]
    <tr><td>[-- Store.VariablePricingFlag --] [-- Store.VariablePricingMsg --]</td></tr>
    [-- END_IF --]   

</div><!--SearchResultsWrapper-->

Thanks so much.

[Jim]

Code: Select all

1. I need to get access to the product name, picture, price and add to cart button so I can style them using divs instead of table elements - is this possible?  Do I need to be making changes within [-- SEARCHRESULT --] - or is that even possible?

You style the product info in the product template that is assigned for search results. This will either be the normal product template or the Override product template configured on Preferences >Search Settings > Search Layout

Code: Select all

2. The client asked that items with multiple sizes / prices dropdown menues show up. Personally, I'd put them right after price.


This would also be done in the product template. It would be the same as if you were doing it on the normal page.

Code: Select all

3. As you can see, my div with the grey border around the page link is repeating, but I'm not sure how else to place this to prevent it from hallening.

You need to move the code out of the loop and put it into the product template so that it is output by the Product and not by the loop. You will need to use a VAR to indicate when the code needs to be started and when it needs to be closed.

Also if you want the text "This item is available on the following pages:" to only display once per product move that line of text into the Page template or Lin override template. Then put in a VAR to check if it has been output for a particular product and if it has then skip it and just put the link.

Code: Select all

[-- VAR.ProductDivOpen "NO" --]
 [-- VAR.FirstLink "Yes" --]
[-- loop search --]
  [-- IF SEARCHPRODUCT --]
# need to close div for links if they are open
          [-- IF VAR.FirstLink "NO" --]
#   close the div around the product page links
                 </div>
                 [-- VAR.FirstLink "Yes" --]
         [-- END_IF --]
      [-- IF VAR.ProductDivOpen "YES" --]
#      close the div because we are starting a new product and need to close the old div but first time we don't close div.
      </div .....
       [-- ELSE --]
#         open the div because we are at the start of a new product
           <div .....>
#     set ProductDivOpen to YES for the next time we have a product we know we need to close it.
          [-- VAR.ProductDivOpen "YES" --]
#   and set a var to keep track of first link for outputting text string

    [-- END_IF --]
    [-- SEARCHRESULT --]
  [-- ELSE --]
#  if it isn't a product the search result must be a link.
      [-- SEARCHRESULT --]
[-- END_LOOP  SEARCH--]
# clean up any open divs
#      close the div because we are starting a new product and need to close the old div but first time we don't close div.
# last link div needs to be closed
      </div .....>
# last product div needs to be closed also
  </div....>

and in the link template you would have something like

Code: Select all

[-- DEFINE LINK_TO_PAGE --]
      [-- IF VAR.FirstLink "Yes" --]
#     Output the text message and associated style
           <div xmlns="http://www.w3.org/1999/xhtml" style="border: 1px dashed rgb(204, 204, 204); padding: 10px; font-weight: bold;">
               This item is available on the following pages:<br/>
#   set VAR.FirstLink to NO
           [-- VAR.FirstLink "NO" --]
       [-- END_IF --]
# output the link format you want.
     <a href=..... > ...</a>
[-- END_DEFINE LINK_TO_PAGE --]

The code may not be exactly correct but maybe it will give you an idea of what you need to do.

[ajhauser]

This is working out really really well - thank you Jim, again. Your response was super helpful and I appreciate you spending some time on it.