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 |
|---|---|---|---|---|---|---|
| - | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | - |
| - | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | - |
Supporter timezone: Europe/London (GMT+01:00)
This topic contains 12 replies, has 3 voices.
Last updated by jsono 7 years, 6 months ago.
Assisted by: Nigel.
Nigel
Languages: English (English ) Spanish (Español )
Timezone: Europe/London (GMT+01:00)
Hi JSon
I'm really sorry for the late reply. Beda is on vacation this week and I am covering his tickets but my own queue has been extremely busy and I have just had time to get to this now.
I looked at the link to your option 2, and see that if I update the filter to choose a style of cuisine the results reload but do not change.
So you have something wrong with how the view is set up which I'm not sure is connected to adding two views to the same page.
You could please test and verify that?
Create a test page and add just the first view to it, without adding the maps view.
Try updating the filters and see if the content updates correctly or whether the result is the same as on your current page. Your views need to work before we worry about combining them on the same page.
Now, I set up a small test to demonstrate something else you need to consider when choosing between option 1 and option 2.
Option 2 will only work if you update the search results via a page refresh rather than ajax, otherwise the second view won't reload.
I made a simple test with two basic search views that are identical except the second one displays the results in the reverse order. The second one in your case would be displaying results on a map.
Note that in 2views-ajax.gif that when I change the category filter and update the results with ajax only the first view will update.
In 2views-noajax.gif you can see that updating the first view with a page refresh will update the second view at the same time.
Hello Nigel,
Thanks for your reply. 🙂
"I looked at the link to your option 2, and see that if I update the filter to choose a style of cuisine the results reload but do not change.
So you have something wrong with how the view is set up which I'm not sure is connected to adding two views to the same page.
You could please test and verify that?
Create a test page and add just the first view to it, without adding the maps view."
-- Yes, I tried it with just one view and it won't updates results. You can see it here: hidden link
I will have the setting for one view in the screenshots and view code below. Please have a look.
View Filter Editor
[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div id="filter-form-wrapper" class="col-md-6">
<div class="container">
<div class="row">
<div id="pad-btm-search" class="col-md-12">
<div id="search-spinner">
[wpv-filter-spinner container="div" position="after" class="my-spinner" style="text-align: center;" spinner="<em><u>hidden link</u></em>"][/wpv-filter-spinner]
</div>
<div class="inline-search">
[wpv-filter-search-box class="form-control"]
</div>
<div class="inline-search">
[wpv-filter-submit class="btn btn-success" name="Find Restaurants" type="button"]
</div>
<div class="inline-search">
[wpv-filter-reset class="btn btn-danger" reset_label='<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>' type="button"]
</div>
<div class="inline-search">
<a type="button" class="btn btn-link" data-toggle="collapse" data-target="#advanceFilter">Filter <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
<div id="advanceFilter" class="collapse">
<div id="filter-by-cuisines">
[wpml-string context="wpv-views"]Cuisines:[/wpml-string] [wpv-control taxonomy="cuisine" url_param="wpv-cuisine" type="checkboxes" hide_empty="true"]
</div>
<div id="filter-by-category">
[wpml-string context="wpv-views"]Food Categories:[/wpml-string] [wpv-control taxonomy="food-category" url_param="wpv-food-category" type="checkboxes"]
</div>
</div>
</div>
</div>
</div>
</div>
</div>
[/wpv-filter-controls]
[wpv-filter-end]
View Loop Output Editor
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="col-md-6">
<div class="container wpv-loop js-wpv-loop">
<wpv-loop wrap="2" pad="true">
[wpv-map-marker map_id='map-18' marker_id='marker-[wpv-post-id]' marker_title='[wpv-post-title]' marker_field='wpcf-address'][wpv-post-body view_template="Marker Popup Info"][/wpv-map-marker]
[wpv-item index=1]
<div class="row ">
<div class="col-md-6">
[wpv-post-body view_template="restaurant-listing"]
</div>
[wpv-item index=2]
<div class="col-md-6">
[wpv-post-body view_template="restaurant-listing"]
</div>
</div>
[wpv-item index=pad]
<div class="col-md-6"></div>
[wpv-item index=pad-last]
<div class="col-md-6"></div>
</div>
</wpv-loop>
</div>
<!-- wpv-loop-end -->
<div class="pagination-container">
[wpv-pagination]
[wpv-pager-prev-page force="true"][wpml-string context="wpv-views"]
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
[/wpml-string][/wpv-pager-prev-page]
[wpv-pagination][wpv-pager-nav-links]
[wpv-pager-next-page force="true"][wpml-string context="wpv-views"]
<span class="glyphicon glyphicon-chevron-right " aria-hidden="true"></span>
[/wpml-string][/wpv-pager-next-page]
[/wpv-pagination]
</div>
</div>
<div class="col-md-6">
[wpv-map-render map_id='map-18' map_width='100%' map_height='600px' cluster='on' scrollwheel='off' map_type_control='off' street_view_control='off' marker_icon='<em><u>hidden link</u></em>' background_color='#ffffff']
</div>
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
"Option 2 will only work if you update the search results via a page refresh rather than ajax, otherwise the second view won't reload."
--- If Option 2 cannot update search results via ajax then I prefer the Option 1 (one view). However, is it possible since map render outside the loop can I place it map render code inside layout instead of in the loop output? This way is more better for me design the page using the layout. (I have attached layout for your view). For example, have the Map Markers code inside the loop then Map Render code in the layout via Visual Editor Cell with matching map ID.
Hope to hear from you soon how to fix view so it can filter and update correctly.
Kind Regards,
JSon
I also want to add the Maps also did not work correctly with the one view. It didn't shows the markers with popup informations.
I too forgot to upload Layout for screenshot as mention if it Map can render inside layout visual editor cell.
Thanks,
JSon
Nigel
Languages: English (English ) Spanish (Español )
Timezone: Europe/London (GMT+01:00)
Nigel
Languages: English (English ) Spanish (Español )
Timezone: Europe/London (GMT+01:00)
Let me show you the set-up I have created for a simple test that splits the list results and the map results into two columns so you can see how I have it working and hopefully adapt it for your own needs.
Firstly, see the attached screen recording of it in action (a crude test using the Toolset Starter theme).
The map is on the left and there are two search results initially, which reduces to one when I add a text search term.
Here's what the Loop Output section looks like for that:
[wpv-layout-start]
[wpv-items-found]
<div class="col-sm-6">
[wpv-map-render map_id='map-1']
</div>
<!-- wpv-loop-start -->
<div class="col-sm-6">
<wpv-loop>
[wpv-map-marker map_id='map-1' marker_id='marker-[wpv-post-id]' marker_field='wpcf-location'][/wpv-map-marker]
<h3>[wpv-post-link]</h3>
</wpv-loop>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
The theme is based upon Bootstrap and so uses the .col-sm-6 classes to create two columns.
Note that the map is rendered outside of the loop itself.
Both the list output (just <h3> headings in my example) and the map marker shortcodes are added within the loop. The way the map markers are handled it doesn't matter that they appear to be in the wrong column in the above set up.
Let me know how you get on adapting this for your own needs and if you run into any problems.
