Created a Basic Search Results Template, Need Help, Columns

[dZi]

Hi, I've been really enjoying the process of creating my Templates from Scratch and just either grabbing code from other templates or from that Tag list.

I created a simple, functioning Search Results page.

The only problem is that all the results display vertically, right down the page, one by one. This is because I have only put the basic loop into the Template.

I am wondering what code I would put to generate the results so they are 4 across, aligned and repeating for 4 rows until you have to go to the next page.

I am trying to make a deadline and need to figure this out some how. I have fooled around with it a bit by adding tags into my loop, but it just creates a mess on the page, here is the basic code working so far.

<h2 id="pageName">[--Store.SearchResults --]: [-- SearchString --]</h2><br>[-- Loop Search 4 --] [-- searchresult --] [-- end_loop search --]</td>
<div class="text1">
[-- IF SEARCHTOP --]
<div class="searchResultForm">

</div>
[-- END_IF --]

[-- VAR.anyresults "no" --]
[-- VAR.resultcount 0 --]
<table class="pa_products">
<tr>
[-- LOOP SEARCH --]
[-- VAR.anyresults "yes" --]
[-- IF SEARCHPRODUCT --]
[-- IF VAR.resultcount VAR.pr_cols --]
</td></tr><tr>
[-- VAR.resultcount 0 --]
[-- END_IF --]
[-- IF VAR.resultcount 0 --]
<td class="pa_product">
[-- ELSE --]
</td><td class="pa_product">
[-- END_IF --]
[-- VAR.resultcount INC --]
[-- END_IF --]
[-- IF SEARCHLINK --]
<div class="searchResultLink">
[-- SEARCHRESULT --]
</div>
[-- ELSE --]
<div class="searchResultPage">
<div></div>
</div>
[-- END_IF --]
[-- END_LOOP SEARCH --]
</td>
</tr>
</table>

[-- IF VAR.anyresults "no" --]
<h4>[-- Store.SearchNoResults --] [-- SearchString --]</h4>
[-- END_IF --]
</div>

[-- IF SEARCHBOTTOM --]
<div class="searchResultForm">

</div><!-- end searchResultForm -->
[-- END_IF --]

</div><!-- end text1 -->

[-- IF PAGE.Text3 --]
<div class="text3">
[-- PAGE.Text3 --]
</div>
[-- END_IF --]

[ShopSite Lauren]

When looping the search results you need to keep in mind that search results are both product results and the pages where those products are found. The page link search results are the things that throw off the columns.

One way to get around this is by going to Products > Edit Product Info, and in the search destination field you can select either 'make' or 'more information'. You will want to do this for all of your products. By doing this you know that there will only be one page link result for every product link result. Then in your search template you can setup the loop similar to:

<table border="0" cellpadding="5" width="95%">
[-- LOOP SEARCH 8 --]
[-- IF SEARCHLINK --]
<!--
[-- END_IF --]

[-- SEARCHRESULT --]

[-- IF SEARCHLINK --]
-->
[-- END_IF --]
[-- END_LOOP SEARCH--]

With this setup ShopSite will go through 8 search results (both page and product) before creating a new row. You know that there will be one page link for every product result so you will have 4 product results and 4 page results for every row. However, with the IF SEARCHLINK tags all of the page link results will be commented out so they will not be displayed on your page, only the 4 product results will be displayed.

-Lauren

[dZi]

I used that exact code and followed your instructions to change the Search Destination to More Info, but my results are still a vertical list of one item on top of each other. On an individual basis the results look great, it's just that they are stacked on top of each other on the page. For example the results still look like:

Result
Result
Result
Result
Result
Result
etc.

And here is My Code (fyi, the larger table that the results are sitting in is 1000px wide):

---------------My Code--------------------------------

<td bgcolor="#ffffff"><table bgcolor="#ffffff" border="0" bordercolor="#330000" width="1000">
<tbody><tr>
<h2 id="pageName">[--Store.SearchResults --]: [-- SearchString --]</h2><br><table border="0" cellpadding="5" width="95%">
[-- LOOP SEARCH 8 --]
[-- IF SEARCHLINK --]
<!--
[-- END_IF --]

[-- SEARCHRESULT --]

[-- IF SEARCHLINK --]
-->
[-- END_IF --]
[-- END_LOOP SEARCH--] </tr>
<div class="text1">
[-- IF SEARCHTOP --]
<div class="searchResultForm">

</div>
[-- END_IF --]

[-- VAR.anyresults "no" --]
[-- VAR.resultcount 0 --]
<table class="pa_products">
<tr>
[-- LOOP SEARCH --]
[-- VAR.anyresults "yes" --]
[-- IF SEARCHPRODUCT --]
[-- IF VAR.resultcount VAR.pr_cols --]
</td></tr><tr>
[-- VAR.resultcount 0 --]
[-- END_IF --]
[-- IF VAR.resultcount 0 --]
<td class="pa_product">
[-- ELSE --]
</td><td class="pa_product">
[-- END_IF --]
[-- VAR.resultcount INC --]
[-- END_IF --]
[-- IF SEARCHLINK --]
<div class="searchResultLink">
[-- SEARCHRESULT --]
</div>
[-- ELSE --]
<div class="searchResultPage">
<div></div>
</div>
[-- END_IF --]
[-- END_LOOP SEARCH --]
</td>
</tr>
</table>

[-- IF VAR.anyresults "no" --]
<h4>[-- Store.SearchNoResults --] [-- SearchString --]</h4>
[-- END_IF --]
</div>

[-- IF SEARCHBOTTOM --]
<div class="searchResultForm">

</div><!-- end searchResultForm -->
[-- END_IF --]

</div><!-- end text1 -->

[-- IF PAGE.Text3 --]
<div class="text3">
[-- PAGE.Text3 --]
</div>
[-- END_IF --]



</tr>
</tbody></table> </td>

----------------------End of My Code-------------------------------------

but I would like it to approximately look like:

Result Result Result Result


Result Result Result Result


Result Result Result Result


Result Result Result Result


I know you are here to help us with Shopsite tags and coding, and not HTML, but that is approximately what I am aiming for and any help in the right direction would be most appreciated.

[dZi]

OK! Think I got it, here is my code:

-----------------------My Code-----------------------

<tr>
<td bgcolor="#ffffff"><table bgcolor="#ffffff" border="0" bordercolor="#330000" width="1000">
<tbody><tr>
<h2 id="pageName">[--Store.SearchResults --]: [-- SearchString --]</h2><br><table border="0" cellpadding="5" width="95%"><tr>
[-- LOOP SEARCH 8 --]<td>
[-- IF SEARCHLINK --]
<!--
[-- END_IF --]

[-- SEARCHRESULT --]</td>

[-- IF SEARCHLINK --]
-->
[-- END_IF --]
[-- END_LOOP SEARCH--] </tr>
<div class="text1">
[-- IF SEARCHTOP --]
<div class="searchResultForm">

</div>
[-- END_IF --]

[-- VAR.anyresults "no" --]
[-- VAR.resultcount 0 --]
<table class="pa_products">
<tr>
[-- LOOP SEARCH --]
[-- VAR.anyresults "yes" --]
[-- IF SEARCHPRODUCT --]
[-- IF VAR.resultcount VAR.pr_cols --]
</td></tr><tr>
[-- VAR.resultcount 0 --]
[-- END_IF --]
[-- IF VAR.resultcount 0 --]
<td class="pa_product">
[-- ELSE --]
</td><td class="pa_product">
[-- END_IF --]
[-- VAR.resultcount INC --]
[-- END_IF --]
[-- IF SEARCHLINK --]
<div class="searchResultLink">
[-- SEARCHRESULT --]
</div>
[-- ELSE --]
<div class="searchResultPage">
<div></div>
</div>
[-- END_IF --]
[-- END_LOOP SEARCH --]
</td>
</tr>
</table>

[-- IF VAR.anyresults "no" --]
<h4>[-- Store.SearchNoResults --] [-- SearchString --]</h4>
[-- END_IF --]
</div>

[-- IF SEARCHBOTTOM --]
<div class="searchResultForm">

</div><!-- end searchResultForm -->
[-- END_IF --]

</div><!-- end text1 -->

[-- IF PAGE.Text3 --]
<div class="text3">
[-- PAGE.Text3 --]
</div>
[-- END_IF --]



</tr>

----------------------------End of My Code-------------------------





It looks pretty good, now if I can only get the Next page of results and Assorting tags on there I will be all set. Thanks Lauren, and I hope this helps anyone who is trying to do something similar. We are creating a great Archive here! Thanks Shopsite team!

[Jim]

I think that the code you have will only work if you have exactly one link for each product. So if a product is on multiple pages I'm not sure you will get the expected results. You might want to try that scenario and see if it works.

In the [-- LOOP SEARCH 8 --] ShopSite will automatically generate a </tr><tr> sequence when 8 search results (either product or link) are found. So if you have a product that is assigned to 7 pages you would get a new row in your page after a single product with its 7 associated links.

If this is happening you will need to leave the '8' out of the [-- LOOP SEARCH --] tag and create a VAR that keeps track of how many product <td> s are created and then insert your own </tr><tr> sequence and reset the VAR back to the initial value.

[dZi]

I will only have one link per product because I am creating all other pages such as category pages, outside of Shopsite. The only Shopsite generated pages I have are one more info page per product.

The strange thing was I changed the Loop to 16 and it just created a long horizontal list of 8 results(fyi I only have 8 test products, all with same name currently).

I'd rather have it just continually pump out rows of 4, for as many results that come up. Which I'm assuming it will if I add 8 more products....?

[dZi]

Back with a Loop 8, which seems to work best for me, I notice that in some searches it duplicates the first result and cuts of the rest of my page when I search for specific terms.

For example,

All of my products are called Singing Bowls and I have 15 of these test products in my database. If I search just "Singing" I will get 16 results and the last result will be a duplicate of the first and skewed to the right a bit. If I search "Singing Bowls" the search results will display correctly, displaying all 15 products, evenly and without the rest of my HTML being cut off.