[Resolved] Dynamically displaying Toolset Map Marker in Taxonomy Archive page

[Author]

Posts

[jamesL-9]

Hi,

I have a custom taxonomy (Coffee Regions) for my woocommerce product post type.
I would like to display a Toolset Map with Marker of the location of the region based on the Term of the region.
I am following this thread https://toolset.com/forums/topic/display-google-maps-in-archives-pages/ which is trying to achieve something similar to my objective.
So far this is what I have been able to do based on thread:

1) Create a Custom Term Address field (slug: region-address)'
I am able to create this field and Google Map was able to be displayed in the back-end Edit Term page

2) Create a Taxonomy View (slug: region-view). Below are my options:

Content Selection > Taxonomy > Coffee Regions (My custom Taxonomy)
Query options > all checked
Query Filter > Taxonomy Term> Set by the Current post
Filter Editor > default

Loop Output Editor:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-map-marker map_id='map-1' marker_id='marker-[wpv-post-id]-[wpv-taxonomy-id]' address='[wpv-taxonomy-field name="wpcf-region-map"]'][/wpv-map-marker]
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

3) Next on the Edit Term page i have added using the Field and Views the following code:

[wpv-map-render map_id="map-1"]
[wpv-view name="region-view"]

Result: I am able to display the Map. However there is no marker for the location.

Below the map is also displayed: No Items Found

I have been scratching me head over this for the past few hours. Kindly enlightened me.
Thanks

Regards,
James

[Nigel]

Hi James

I just set up the same on a local test site and have it working, so let me confirm the steps.

I have a custom taxonomy to which I have added an address field with the slug region-address.

I create some terms for this taxonomy and add an address using the region-address field, and I assign terms to my custom posts that use this taxonomy.

I create a taxonomy View which will loop over the terms of my custom taxonomy.

I add a Query Filter for the term to say it is set by the current post (meaning only that term will be returned and looped over).

Before adding the map I want to test this works so for the Loop Output section I simply output the region-address field using

[types termmeta='region-address'][/types]

.

I then edit the Content Template for the post type to which this taxonomy is assigned and insert this taxonomy View.

Now when I look at a single post on the front end I see the text address for the region assigned to this post printed on the screen, confirming it works.

Returning to the View, I edit the Loop Output section. Before the wpv-loop tag I insert the map shortcode (using the Fields and Views button). Then inside the wpv-loop section I replace my test types shortcode with the map marker shortcode, again inserted using the Fields and Views button, and being careful to specify that the address comes from the taxonomy field region-address.

After saving the View, when I visit a relevant post on the front end I see the map with the corresponding marker.

Do you want to read through that and confirm you are doing the same steps and see if it works?

If you still run into problems let me know.

[jamesL-9]

Hi Nigel,

Thanks for the quick reply. I have realized what was my issue. I've tried inserting the shortcode to render the Map and the view in Elementor Plugin's Shortcode Element. Apparently, the element only accepts one shortcode. I've tried hook in both the shortcodes through my function.php and it works. However, this is less than ideal for a non-coder for me as it limits my ability to customize the column.

I've tried inserting both the shortcodes in the output editor loop like below but it doesn't work.

<wpv-loop>
[wpv-map-render map_id="map-1"]
[wpv-map-marker map_id="map-1" marker_id="marker-[wpv-taxonomy-id]" marker_termmeta="wpcf-region-address"][/wpv-map-marker]
</wpv-loop>

Is there anyway I can use View/any other way to turn it into a single shortcode? I design my site mainly using Elementor so it would be great if I can incorporate it with the rest of my design.

Regards,
James

[Nigel]

Hi James

Can you clarify where you are inserting what with Elementor?

The shortcodes for the map and the marker go in the Loop Output section of the View, not related to Elementor.

You then insert the View itself using a single shortcode. From what you have described where the term comes from the current post, you must be inserting the View into a template for that post type, or do I misunderstand?

[jamesL-9]

Hi Nigel,

Below are the steps I'm trying now

1) Create a View (slug:region-view) with the following shortcodes in the loop

<wpv-loop>
	  [wpv-map-render map_id="map-1"] 
      [wpv-map-marker map_id='map-1' marker_id='marker-[wpv-post-id]-[wpv-taxonomy-id]' address='[wpv-taxonomy-field name="wpcf-region-map"]'][/wpv-map-marker]
    </wpv-loop>

2) Insert the shortcode [wpv-view name="region-view"] into the Elementor Shortcode element

3) The Elementor page is saved as a shortcode [elementor-template id="11947"]

4) The Elementor shortcode is finally hook in the archive page using functions.php

add_action( 'woocommerce_archive_description', 'coffee_archive_description', 15 );
function coffee_archive_description() {
	echo 	do_shortcode('[elementor-template id="11947"]');		
}

Result: Using this method, I am able to display all the custom fields I have created for the Term except for the "region-map" View which only returns the No Item is found text

I have attempted to hook in the [wpv-view name="region-view"] directly using the functions.php with the codes below

add_action( 'woocommerce_archive_description', 'coffee_archive_description', 15 );
function coffee_archive_description() {
	echo 	do_shortcode('[wpv-view name="region-view"]');		
}

This direct hook in is successful to display the map and marker. However, it is less than ideal as I would like to incorporate the map with the rest of my design.

Is the View shortcode not compatible with Elementor? Am I missing something here?

Thanks

James

[Nigel]

Hi James

Thanks for clarifying. I'll have to update a test site to reproduce your setup locally and see what's going on, but from your description I suspect that by creating an Elementor page the View is losing the $post object for the current page required to determine the taxonomy term.

I'm only superficially familiar with Elementor, so will dig a little deeper and get back to you.

[Nigel]

Hi James

I played around with Elementor to reproduce this.

First, I think I missed you were adding this to an archive page rather than the template for a single post, so the Query Filter you add to the taxonomy View should get the term from the page where the View is being displayed rather than the current post.

Also, note that in your previous reply, in the first section where you add the shortcodes for the maps to the View, the wpv-map-render shortcode comes outside the wpv-loop tags, otherwise you request the map be rendered for every iteration of the loop (needed for markers), and the map itself only needs adding once.

That said, I found that nesting the wpv-view shortcode inside an Elementor template and then adding this template to an archive template via shortcode, the map fails to render correctly. I expect this is because the post object is reset by the call to the elementor shortcode and so the map View loses its context.

I am escalating this to our second tier for further testing to see if they can confirm this and see is a fix or workaround may be possible. I will update you when I hear from them.

[jamesL-9]

Hi Nigel,

Thanks for the reply and the effort to try out the Elementor plugin.

"That said, I found that nesting the wpv-view shortcode inside an Elementor template and then adding this template to an archive template via shortcode, the map fails to render correctly. I expect this is because the post object is reset by the call to the elementor shortcode and so the map View loses its context."

I have suspected the reason for the marker to the fail to load is because the shortcode was embedded in the elementor template rather than in the post.

I am trying out other ways to work around this but no success so far. What would be Toolset Team current suggestion in terms of integrating with Elementor in general? I.e. best practices and limitations?

Are there any plans to integrate with Elementor in the near future? It is quite a user-friendly plugin so it would be great if we can simply insert any View Shortcodes into Elementor.

Thanks again

[jamesL-9]

Hi Nigel,

Just a quick update. I have managed to resolve this issue.
My mistake was to insert the Map shortcode within the loop causing the error in the view.
I have corrected it by inserting it before the loop and everything works well.
My current issue now is how to further filter the markers based on child term but I will open a new support thread for this.
Thanks