Skip Navigation

[Resuelto] How to display loop output for maps only on sidebar?

This support ticket is created hace 6 años, 4 meses. 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
- 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+00:00)

This topic contains 12 respuestas, has 3 mensajes.

Last updated by jsono hace 6 años, 4 meses.

Assigned support staff: Nigel.

Autor
Mensajes
#439585

I am trying to display Map Views in the sidebar so that it's only output the maps and markers parts and not the contents results.

What I am try to accomplish is having my VIEW to only display search filters and content results on the left side (content area). And have the map and markers display on sidebar instead have it on top or bottom of the content area.

I have tried to create 2 VIEWS one for Search & Filters then have results display at the bottom and then another VIEW to call Maps and Markers on the sidebar. That's seem to show both right, however, when I try to filter results only the first VIEW is updated and Map VIEW remain the same in the sidebar. I want it both to updates when I filter results.

See screenshots here:
hidden link
hidden link

Please explain what is the right way to achieve this. Hope you can direct me to the right direction ?

Kind Regards,
JSon

#439701

There are 2 ways

One is to use HTML to create the corerct "layout" in your single View.

Since the Map is actually displayed out of the Loop HTML tags, you can use HTML (as example Bootstrap) to create two columns, one the main content and one the "sidebar" content.

Another approach is to use 2 Views, as you do.

Since the first is already working, focus on the second.

There you will need to add Query Filters that filter your View's output by URL parameter that match exactly the URL parameter of the View where you display the content and have your Custom Search.

This way, when you perform a Search, the URL parameter will apply and also influence the View with the Maps.

#440119

Hello Beda,

Thanks for your reply.

Can you please explain each option 1 and 2 in more details or step by step process? Because I don't understand it.

Kind Regards,
JSon

#440274

1. In a Views loop this is how the "defautl" Maps code would look alike:

[wpv-layout-start]
	[wpv-items-found]
          [wpv-map-render map_id='map-5']
	  <!-- wpv-loop-start -->
	    <wpv-loop>
              [wpv-map-marker map_id='map-5' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address'][/wpv-map-marker]
              [wpv-post-title]
	    </wpv-loop>
	 <!-- 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]

Now this can be modified with simple HTML.
I use Bootstrap for this (very basic modification only)

[wpv-layout-start]
	[wpv-items-found]
<div class="col-md-3">[wpv-map-render map_id='map-5']</div>
	<!-- wpv-loop-start -->
	  <div class="col-md-6">
        <wpv-loop>
        [wpv-map-marker map_id='map-5' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address'][/wpv-map-marker]
        [wpv-post-title]
        </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]

This will produce a sidebar with Map and main Column with content (post titiel in my case)

2. In the second case I display one View with the results (Maps and whatever you want in the Sidebar)
This View has a Query Filter for my search argument (my case Address Field) as follows:

Select items with field: address is a string equal to URL_PARAM(address)	

The View with the Custom Filter fitlers by the Address Field and I display a front end filter with it, and eventual some items in the Loop that are part of your "main Content"

Then I insert both views in a Page and structure their position as well with some HTML as above shown.

Searching in the first View's Filter, will update also the results of the second view as it's listening to the URL parameter that the first View uses to filter the content.

#442381

Hi Beda,

I tried both options and the results as follow.

Option #1 - 1 View with HTML and Bootstrap grid system.

I got this part and is now showing in the right position.

Problem:
The map just show ocean blue. It did not show markers and display popup.
And the view filter is not filter correctly.

You can see this view here: hidden link

Option #2 - Create 2 Views

1 view to display search filter and results and another view display map with markers on sidebar using Layout plugin.

Problem:
It's only update when navigate through pagination. Filter and Search didn't not update when input changes.

I have add Query Filter and set string equal to URL_PARAM(address).

You can see this View here:
hidden link

I am eliminate Option 1 because I am using Layout Plugin to design my page.

Now just focus on making option #2 working correctly with 2 views.

Below are my View and Setting for Option #2.

View #1 - Filter Editor

[wpv-filter-start hide="false"]
[wpv-filter-controls]
	<div id="filter-form-wrapper" class="">
		<div class="">
			<div class="">
				<div id="pad-btm-search" class="">
                  	<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 #1 - Loop Output Editor

[wpv-layout-start]
	[wpv-items-found]
			<!-- wpv-loop-start -->		
			<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>
	
	[/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]

View #1 - Content Template

<div><a href="[wpv-post-url]">[wpv-post-featured-image size='custom' width='350' height='250' crop='true']</a></div>
<div>[wpv-post-link]</div>
<div><i class="fa fa-map-marker" aria-hidden="true"></i>
 [types field='address'][/types]</div>
<div>[types field='average-ratings' format='Ratings: FIELD_VALUE'] [/types] [types field='total-reviews' format='With FIELD_VALUE Reviews'][/types]</div>
<span class="top-ratings stars"></span>
<span class="top-reviews"></span>

Please see screenshots for View #1 Setting: hidden link

View #2 - Display Markers and Popup Info

View #2 - Loop Output Editor

 
[wpv-layout-start]
	[wpv-items-found]
[wpv-map-render map_id='map-18' map_width='100%' map_height='800px' cluster='on' scrollwheel='off' map_type_control='off' street_view_control='off' marker_icon='<em><u>hidden link</u></em>' background_color='#ffffff']
	<!-- wpv-loop-start -->
		<wpv-loop>
          
         [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-loop>
	<!-- 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]

View #2 - Content Template

 
<h3>[wpv-post-link]</h3>
<a href="[wpv-post-url]">[wpv-post-featured-image size='custom' width='150' height='150']</a>
<p class="fa fa-marker">[types field='address'][/types]</p>
<p>[types field='business-phone'][/types]</p>
<p>[types field='average-ratings' format='FIELD_VALUE'][/types] with [types field='total-reviews' format='FIELD_VALUE Reviews'][/types]</p>

Please see screenshots for setting for View #2: hidden link

Layout screenshot: hidden link

Thank you ?
JSon

#443509

Hello,

Just checking in if you still working on this because I haven't hear back since 3 days ago.

Please kindly get back to me. 🙂

Thanks,
JSon

#444156

Nigel
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: Europe/London (GMT+00:00)

2views-noajax.gif
2views-ajax.gif

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.

#444242
Screenshot 2016-10-07 12.04.45.png
Screenshot 2016-10-07 12.04.22.png
Screenshot 2016-10-07 12.03.52.png

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

#444247
Screenshot 2016-10-07 12.39.25.png

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

#444755

Nigel
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: Europe/London (GMT+00:00)

If we can stick to getting a simple single view of the search working first, then worry about displaying the results on the map as well.

Looking at your code above and the attached screenshots, I am struck that the url parameters in your filter controls are different than those in the query section shown in the screenshot.

For example, you have the following shortcode for the Food Category filter:

[wpml-string context="wpv-views"]Food Categories:[/wpml-string] [wpv-control taxonomy="food-category" url_param="wpv-food-category" type="checkboxes"]

Note that the url_parameter is "wpv-food-category".

But in your last screenshot it shows the url paramter used for the food category taxonomy filter is "wpvfoodcategory". It doesn't match and so will not work.

When you insert the filter controls via the New Filter button in the filter editor, it sets up the required Query Filter, and so the parameters will match.

Have you edited them or created them manually?

You will need to update the Query Filters so that they match those in the Filter editor.

Then the search should work when you update the filters.

If you could do that and let me know how you get on with that, and then we can move on to adding the results to a map.

#444914

Hello Nigel,

Thanks for your reply.

Great that you spot that :-). I didn't know what happen there :-).

It's now fixed. Cuisine and Food Categories filter works.

Now can you please show how to get maps working properly?

Thanks,
Json

#445342

Nigel
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: Europe/London (GMT+00:00)

iQPjAQiMSE.gif

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.

#445461

Hello Nigel,

Thanks you so much for your help.

This thread is about showing maps on sidebar and I think we got this working. 🙂

I have other related issues and will create another topic instead.

Thank you both Beda and Nigel. 🙂

JSon