LISE: How to keep filter values after performing a search?

[dvertex]

Hi all,

I am currently playing with this great module, and trying to figure out the best approach to search/filter action.
In general, I have two module calls, one for displaying the filter form and other for showing all items below.

Lets assume that I have ~100 product items in the list.
There are 3 custom fields which I need to filter results with: location, size, instock. All of these are dropdown type.

In the page I put the calls like this, to display search/filter form on top of the items.

Code: Select all

{LISEProduct action='search' filter='location,size,instock'}
{LISEProduct}

So, if I put this inside the {content} tag, results are replacing all this so I end up with only results.
If I put search call in the page template, and main lise call inside the {content}, search form will be there but after performing the search, dropdowns are set back to All.

Also tried to put search lise call inside the summary template, result is the same. Module is working, results are there but the search form dropdowns always getting reset to All. Its just not good UX in my opinion. Is there a solution for this, or am I missing something?

If I set the dropdowns to, for instance: Germany, 100, Yes, and hit the Search button, I would like to see results filtered below and the search form keeping these values.

As a nice addition to this, is there an option to add Reset button to go back to all results with one click?

Thank you all and keep up the good work.

[DIGI3]

You should be able to see most of the search parameters by putting this in your template temporarily:

Code: Select all

<pre>{$actionparams|print_r}</pre>

You can then use those variables in your templates to check for existing parameters and apply them to your dropdowns etc. Something along the lines of:

Code: Select all

<input name="mysearchfield" value="{$actionparams.mysearchfield}"></input>

To switch between filtered and all results without a new search/reload, you'd either need to perform the search via ajax, or have it show all results by default and filter them out with javascript. If a reload is ok, you can use {cms_action_url} (see Tags help) to make a new search button with your desired parameters.

[dvertex]

Thanks a lot DIGI3.

If I put the <pre>{$actionparams|print_r}</pre> into the search template, I am getting this:

Code: Select all

Array
(
    [action] => search
    [filter] => location,size,instock
    [module] => LISEProduct
)
1

And in the filter (search) template, actually for the dropdown this part of code should be changed, probably:

Code: Select all

<select name="{$actionid}search_{$fielddef->alias}" id="filter_{$fielddef->alias}">
	<option value=''>{$mod->ModLang('all')}</option>
	{foreach from=$fielddef->values item=value}
		<option>{$value}</option>
	{/foreach}
</select>

So instead of 'All' as first option, should be something else, right? I tried something like {$actionparams.filter->value} but no luck (obviously it is out of the inner foreach values loop).

{get_template_vars} is not showing me anything useful, either.
Any clue?

Thank you for your help so far.

[DIGI3]

I just checked one I did many years ago, and I retrieved the values from $smarty.post data after submission, something like:

Code: Select all

<input name="mysearchfield" value="{$smarty.post.mysearchfield}"></input>

Similar thing, you should be able to find the submitted values with {$smarty.post|print_r}

You could also write them to a session variable and retrieve them as needed, which would have the benefit of keeping them if the visitor went to another page then came back.

[dvertex]

Thank you, I managed to make it work.
You helped a lot with the latest smarty call to find submitted values. Still I needed to hard code {$actionid} parameter, as I couldn't make it work using variable.
Seems like a version with the dropdown, loops and selected option tags are more complicated.

One more question - once the search filter applied, if I click on the item and go to detail page, I can't go back - browser fires 'Confirm Form Resubmission' error page. Is this even possible with pretty_urls turned on?

I am sharing the code here (hopefully it will help others), for my search filter template that contains 3 dropdowns.
There was also a problem with sorting options within dropdowns, so I needed to solve that manually.

Code: Select all

{if $smarty.post}
   {assign var="form_submitted" value=true}
{/if}

<div id="{$modulealias}_filter" class="lisefilter">

	{$formstart}

		{foreach from=$fielddefs item=fielddef}
		<div class="form-group">

		{if $fielddef.type != 'Categories'}
			<label for="filter_{$fielddef->alias}">{$fielddef->name}</label>
			
			{if $fielddef.type == 'Checkbox'}
				<input type="checkbox" name="{$actionid}search_{$fielddef->alias}" id="filter_{$fielddef->alias}" value="{$fielddef->value}" class="form-control" />
			{else}			
				<select name="{$actionid}search_{$fielddef->alias}" id="filter_{$fielddef->alias}" class="form-control">             
					<option value=''>{$mod->ModLang('all')}</option>
					{foreach from=$fielddef->values item=value}
						{if $form_submitted == true} <!-- form submitted -->
							{if $fielddef.alias == 'location' && $smarty.post.ma9233search_location == {$value}}
								<option selected>{$value}</option>					
							{elseif $fielddef.alias == 'size' && $smarty.post.ma9233search_size == {$value}}
								<option value="{$value}" selected>{$value|substr:3}</option>
							{elseif $fielddef.alias == 'instock' && $smarty.post.ma9233search_instock == {$value}}
								<option value="{$value}" selected>{$value|substr:3}</option>
							{else}
								<option value="{$value}">{if $fielddef.alias != 'location'}{$value|substr:3}{else}{$value}{/if}</option>
							{/if}
						{else}
							<option value="{$value}">{if $fielddef.alias != 'location'}{$value|substr:3}{else}{$value}{/if}</option><!-- form not submitted -->
						{/if}
					{/foreach}
				</select>
			{/if}
			
		{/if}
			
		</div>
		{/foreach}
		<input class="btn btn-primary" name="submit" value="{$mod->ModLang('search')}" type="submit" />
	{$formend}
</div>

[DIGI3]

Nothing out of the box, ideally the search wouldn't use POST but it does, so that's expected browser behaviour. I'm not sure how hard it would be to switch it to GET, so using AJAX would probably be the best solution. If that's not worth the effort, a relatively easy workaround could be to use javascript to add a new state to the history stack. (this is starting to get out of my depth so hopefully @jomorg or someone can offer more - you may want to ask on Slack if you don't get what you need here).

[dvertex]

OK I solved it by adding logic to open detail page in a new browser's tab, if the search applied. If not, detail opens in the some tab.
Thank you, most of the issues solved.

[webform]

One more question - once the search filter applied, if I click on the item and go to detail page, I can't go back - browser fires 'Confirm Form Resubmission' error page. Is this even possible with pretty_urls turned on?

I typically change the search handling from POST to GET precisely to avoid the back button problem.

Code: Select all

Search Form Template:
{$formstart|replace:'method="post"':'method="get"'}