Answered SimpleSearch: Displaying search results with thumbnail images?

- 79 Posts
Deyan Reply #1, 9 years, 10 months ago

Hi,
is there any way to display the search results from Simple Search as thumbnail images.
It's about products search inside the catalog and especially about Minishop2 - I want to display the results from the catalog search not like a text, but with thumbnail images and the info/title/pagetitle for them.
Thank you in advance!
This question has been answered by deyand. See the first response.
[ed. note: deyand last edited this post 9 years, 10 months ago.]
peace&love / bike&ride

discuss.answer

79 Posts

Deyan Reply #2, 9 years, 10 months ago

OK, I found the solution myself

My SimpleSearch call:

[[!SimpleSearchForm? 
	&landing=`21`]]

SimpleSearch chunk:

<section id="search-results">
    <h4>Search Results:</h4>
    [[SimpleSearch?
    &containerTpl=`mySearchContainerTpl`
    &tpl=`mySearchResultsTpl`
    &ids=`3` //it's my Catalog Resource ID
    &minChars=`3`
    &depth=`10`
    &perPage=`10`
    &limit=`10`]]
</section>

mySearchContainerTpl:

<p class="sisea-results">[[+resultInfo]]</p>
<div class="sisea-results-list">
    [[+results]]
</div>
<div class="sisea-paging"><span class="sisea-result-pages">[[%sisea.result_pages? &namespace=`sisea` &topic=`default`]]</span>[[+paging]]</div>

mySearchResultsTpl (shows [[+results]], it’s actually the tpl.msProducts.row chunk inside, from Minishop2 folder with chunks. The default SearchResultsTpl replaced by mySearchResultsTpl is placed in core/components/simplesearch/elements/chunks/searchresults.chunk.tpl folder):

<div class="sisea-result">
<!-- tpl.msProducts.row-->
<ul class="search-products-row">
    <li class="products-list">
<a href="[[~[[+id]]]]">
        <div class="image-wrapper">
	    <img class="items" src="[[+image:phpthumbof=`w=180&h=180`&`zc=1`]]" alt="[[+pagetitle]]"/>
	    </div>
	    <div class="products-details">
			<div class="title"><h4>[[+pagetitle]]</h4></div>
			<div class="price"><h4>[[+price]] EUR</h4></div>
		</div>
        </a>
</li>
</ul>
<div class="extract"><p>[[+extract]]</p></div>
</div>

Of course you can place and customize everything you want to display the search results and style it for yourself

peace&love / bike&ride