Skip Navigation

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

This thread is resolved. Here is a description of the problem and solution.

Problem:
Filters disappeared after first search result. I need the filter to appear in between the map and the listings (results).

Solution:
Please make sure, do not move [wpv-filter-meta-html] out of Filter and Loop Output Integration Editor. Just keep original View settings and move the Filters div using Custom css, so it appears between map and listings.

Add the following CSS in your theme’s style.css file OR add it in View >> CSS editor section:

.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;
}
This support ticket is created 6 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 -
- 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 13 replies, has 2 voices.

Last updated by malagaS 6 years, 6 months ago.

Assisted by: Noman.

Author
Posts
#571270

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.

#571292

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

View.png

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

#571298

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] <a href="hidden link field='listing-address'][/types]"> Map It</a><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] <a href="hidden link field='listing-address'][/types]"> Map It</a>
[/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]

#571302

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#571322

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#571330

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

#571339
view.jpg

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.

#571355

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#571357

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.

#571475

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#571585
css.jpg

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.

#571665

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#571857

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Result.png

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

#571861

perfect - THANK YOU!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.