[Resolved] when filter results are empty need to keep filters on page

[Author]

Posts

[malagaS]

I am trying to: keep filters on a page so user can search again if the results are empty.

Link to a page where the issue can be seen: dev server not available

I expected to see: search box on the page

Instead, I got: 'No items found' message and no way for the user to navigate back to the search box.
I've tried inserting a view between the [wpv-no-items-found][/wpv-no-items-found] tags but that didn't work. thanks.

[Noman]

Hi Malaga,

Thank you for contacting Toolset support. By default, search filters keep displayed on the page when “No items found”. Make sure you have selected: “Always show all values for inputs”

Attached is example back-end of Search View.

Thank you

[malagaS]

Thank you for the quick response. This setting doesn't seem to make a difference.
this is my filter and loop - maybe i have something wrong?

[wpv-filter-start hide="false"]
[wpv-filter-controls]

<div class="row" style="background-color: #ebd682; padding: 6px 6px 6px 6px;">

<div class="col-sm-2"> [wpv-filter-spinner container="span" spinner="hidden link" style="float: right; background: #ebd682; width 100px; height: 100px;"][/wpv-filter-spinner] </div>

<div class="col-sm-2"><div class="form-group" style="float:right; ">
<label>[wpml-string context="wpv-views"][/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="cvb-listing-category" type="select" default_label="All Categories" url_param="wpv-cvb-listing-category"]
</div></div>

<div class="col-sm-2"><div class="form-group" style="float:left; ">
<label>[wpml-string context="wpv-views"][/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="richmond-neigborhood" type="select" default_label="All Neighborhoods" url_param="wpv-richmond-neigborhood"]
</div></div>

<div class="col-sm-2"><div class="form-group">
<label>[wpml-string context="wpv-views"][/wpml-string]</label>
[wpv-filter-search-box class="js-wpv-filter-trigger" placeholder="What are you looking for?" output="bootstrap"][wpv-filter-submit name="Search" type="button" output="bootstrap"]
</div></div>

<div class="col-sm-2"><div class="form-group">
[wpv-filter-reset]

</div></div>

<div class="col-sm-2"><div class="form-group">
<ul class="pagination" >
<li class="page-item">[wpv-pager-prev-page ][wpml-string context="wpv-views"]Previous[/wpml-string][/wpv-pager-prev-page]
<li class="page-item">[wpv-pager-next-page ][wpml-string context="wpv-views"]Next[/wpml-string][/wpv-pager-next-page]

</div></div>

</div>

[/wpv-filter-controls]
[wpv-filter-end]

____________________________

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
[wpv-filter-meta-html]
[wpv-map-render map_id="cvb-map-all" map_height="600px" fitbounds="on" general_zoom="12" single_zoom="17" general_center_lat="37.935757" general_center_lon="-122.347748" cluster="on" marker_icon="hidden link" background_color="#c5bea6" cluster_min_size="4" cluster_max_zoom="17" panBy="100, 100" ]
<br />

<wpv-loop wrap="4" pad="true">
[wpv-map-marker map_id="cvb-map-all" marker_id="marker-[wpv-post-id]" marker_title="[wpv-post-title]" marker_field="wpcf-listing-address"]<h3 class="cvb-map-all-title">[wpv-post-title]</h3>[types field='listing-address'][/types]<br /> [types field='listing-phone'][/types]<br /> [types field='listing-website' title='Visit Website |' class='cvb-map-all-url'][/types] hidden link field='listing-address'][/types]"> Map It<br /> [types field='listing-image' alt='%%ALT%%' title='%%TITLE%%' width='250' height='180' align='none' resize='pad' class='cvb-map-all-image'][/types] [types field='listing-website' title='Visit Website |' class='cvb-map-all-url'][/types] hidden link field='listing-address'][/types]"> Map It
[/wpv-map-marker]
[wpv-item index=1]
<div class="row" >
<div class="col-sm-3" style="margin-bottom: 24px;" > [wpv-post-body view_template="Loop item in Richmond CVB Map and Listings Parametric Filter"]</div>
[wpv-item index=other]
<div class="col-sm-3" >[wpv-post-body view_template="Loop item in Richmond CVB Map and Listings Parametric Filter"]</div>
[wpv-item index=4]
<div class="col-sm-3" >[wpv-post-body view_template="Loop item in Richmond CVB Map and Listings Parametric Filter"]</div>
</div>
[wpv-item index=pad]
<div class="col-sm-3" ></div>
[wpv-item index=pad-last]
<div class="col-sm-3" ></div>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"] Nothing Found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

[Noman]

Okay, I need to take a look at your setup and to request temporary website WP-admin and FTP info for your site (preferably test site) to debug further and to help in resolving this. Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

✙ I would additionally need your permission to de-activate and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important.

✙ Please add the link to the [View] Edit Screen and [Page] Edit Screen

Thank you

[Noman]

Okay, can you please try to create a new Test Search view without any div or extra classes, you can follow this doc:
https://toolset.com/documentation/user-guides/front-page-filters/#custom-search-form

Make sure to select "Both Search form and Result" to display on the same page:
hidden link

Thank you

[malagaS]

it works. i'll try to compare mine and see if i can find the problem.

[malagaS]

i had moved
[wpv-filter-meta-html]
from Filter and Loop Output Integration Editor
to the loop because i need the filter to appear in between the map and the listings.
if i keep it in the Filter and Loop Output Integration Editor, the filter appears above the map.
is there any way to accomplish this?
Thank you.

[Noman]

No please do not move [wpv-filter-meta-html] out of Filter and Loop Output Integration Editor. There are 2 things you can try to solve this:

1. Just keep original View settings and move the Filters div using Custom css, so it appears between map and listings.

2. If the map is standalone, you can create two Views -- one for the Map and other for the Custom Search listings.

First option would be good for your case I believe. Thanks

[malagaS]

ok. i found that fix in this forum somewhere so thought it was legit. the map isn't stand alone - the map and listings are fiiltered on the same parametric search so i'm stuck with css. is there a best way to approach css - the simplest way so it works for all media without separate queries? thank you.

[Noman]

Here is an example CSS, you can change top & margin-top values as needed. These are the classes you would need to target and it would work fine in responsive too.

.wpv-filter-form {
    position: relative !important;
    top: 150px !important;
}
.js-wpv-view-layout {
margin-top: -35px !important;
}

Thank you

[malagaS]

thank you - I think this should work but i can't get the map to move up - if i change the input by 1 pixel it completely disappears.

[Noman]

Hello Malaga,

Is it possible for you to please provide temporary login info, so that I will fix the CSS for filters and listings. I will not break anything on your site, but it is really hard for me to resolve this issue without page link or CSS.

Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

✙ Please add the link to the [View] Edit Screen and [Page] Edit Screen

Thank you

[Noman]

Thanks for the link. I have tested the css in your page, please use this css and modify as needed:

.wpv-addon-maps-render.js-wpv-addon-maps-render.js-wpv-addon-maps-render-cvb-map-all {
    top: -107px !important;
}

.wpv-filter-form {
    position: relative !important;
    top: 300px !important;
    z-index: 1 !important;
}

The Result would be like in the attached screenshot. You can change anything you like in it.
Thank you

[malagaS]

perfect - THANK YOU!