[Resolved] Search Page with Selection, Map & Listing Cards

[Author]

Posts

[georgesw]

Tell us what you are trying to do?
I want to build a search Page with:
1) Selection Area
2) Results Listing Cards & Map
All this on one Page. So my question:
Ist it possible to get 2 sorts of results with one selection (see example below)

Is there any documentation that you are following?

Is there a similar example that we can see?
hidden link

What is the link to your site?
hidden link

Many thanks for some guidance
best regards,
Georges

[Nigel]

Hi Georges

You can create a single View that displays the search filters, results (formatted as you want, including as cards with the appropriate styling), and as markers on a map.

Say you have an apartment custom post type which has several custom fields or taxonomies, and includes an address custom field.

The you create a View to display apartments, and insert filter controls for the custom fields or taxonomies you want to filter by, including a distance filter, for example.

Then in the Loop Output section you insert the wpv-map-render shortcode, inside the wpv-items-found shortcodes but outside the wpv-loop tags (because you only want to add the map once, not one time for each result).

Within the wpv-loop tags (either directly, or in a linked content template) you then include the content you want to appear in the results (e.g. you would add the markup for a card here with shortcodes for the fields you want to include on the card), as well as the wpv-map-marker shortcode, so that one marker will be added to the map for each result.

Views is not opinionated about the markup output, and you will need some input here to decide how you want to format and style the results, but that is how you mix markers and lists of results from the same View.

See https://toolset.com/documentation/user-guides/display-on-google-maps/displaying-markers-on-google-maps/ for more details.

[georgesw]

Hi Nigel,

thank you for your fast and detailed reply - good to know that it works - so I just have to get it done... 🙂

I'm not quite sure at what level / how I should do this "3 colums / vertical design, in order to put selection, cards and map.
Do I go via Toolset Layouts or rather including a Bootstrap Grid in the view?

Guess this is not on the scope of your support here - I will try to find out...

Many thanks and have a good weekend
best regards,
Georges

[Nigel]

Hi Georges

The link you shared with the sample of what you are aiming for uses quite a custom layout.

Toolset concerns itself mostly with retrieving custom content from the database, but does not concern itself very much with how the content is presented. You can specify the markup, add custom classnames etc., so that the appearance matches your requirements, but you (or your theme) are largely responsible for the CSS that will deliver the look you want.

We include some basic styling, with a grid system provided by Bootstrap, and the facility to add your custom styles, but the expectation is that if you don't like how Toolset outputs content through your theme you will modify the CSS yourself.

A good exercise would be to use something like Codepen to create the basic layout and look you require, and then reproduce the same markup and classes with your Toolset output.

If there is a specific thing you get stuck with don't hesitate to ask.

[georgesw]

Hello Nigel,

I have still not succeded - my Problem is:
how can I bring the results as "map with markers" from a defined view to a specific column in DIVI

Here is what I'm doing:

I create the view map-search-split-201804241856
Display the results using a custom search
content selection "Companies"
Insert a custom search filter:
- [wpv-filter-search-box
- [wpv-control-postmeta field="wpcf-region"
- [wpv-control-post-taxonomy taxonomy="product-service"
- [wpv-filter-submit output="bootstrap"]
- [wpv-filter-reset output="bootstrap"]

I selected to show results on another page - as I do not know if Toolset recognizes the different DIVI blocks as one page or not, and then selected the same Page manually - not sure if that makes sense...?

Then I tried to get the view displayed on following page:
hidden link

As you can see, the selection works, but only to display the "Logo Cards" - however the the map is not displaying correctly.

So my question here is: how do I integrate a map to the right column, that displays the markers from the custom search of the left column? Is there a certain syntax that I can use, to connect it to my view?

For info, here the code from the view:

[wpv-layout-start]

[wpv-items-found]

[wpv-map-render map_id="map-9" map_height="100%" cluster="on" marker_icon="//bauen.lu/wp-content/plugins/toolset-maps/resources/images/markers/Buildings.png" cluster_grid_size="10"]map is loading[/wpv-map-render]

<!-- wpv-loop-start -->

[wpv-map-marker map_id="map-9" marker_id="marker-[wpv-post-id]" marker_field="wpcf-address-map"][/wpv-map-marker]

<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-sm-4">[wpv-post-body view_template="Loop item in map-search-split-201804241856"]</div>
[wpv-item index=other]
<div class="col-sm-4">[wpv-post-body view_template="Loop item in map-search-split-201804241856"]</div>
[wpv-item index=3]
<div class="col-sm-4">[wpv-post-body view_template="Loop item in map-search-split-201804241856"]</div>
</div>
[wpv-item index=pad]
<div class="col-sm-4"></div>
[wpv-item index=pad-last]
<div class="col-sm-4"></div>
</div>
</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]

Many thanks for some guidance
best regards,
Georges

[Nigel]

Hi Georges

First, when inserting the map you should have specified that the map will be on the same page, the fact that you are displaying the content inside Divi modules shouldn't be a problem.

Second, looking at your linked page, the map is displaying the middle of the Pacific Ocean. That almost always reflects a problem with your Maps API key, typically a problem with URL referrer restrictions.

I would edit your Google API key to remove any URL referrer restrictions, then verify that the map works. (You can insert the View on a simple test page without worrying about splitting it into columns just to confirm this, if needs be.)

Assuming that your map now works I would say you can try to add back URL referrer restrictions, but to make them as generic as possible (e.g. *.example.com/*)

Does that fix it?

[georgesw]

Hi Nigel,

thank you for your reply - I don't think the URL referrer is the problem as another map from another view works without problems on hidden link

I keep on trying

thanks
Geprges

[Nigel]

In which case try adding your View to the page again.

- first, just insert the entire View, search form and results. Does it work okay?
- if yes, remove it then add it again, splitting the search form and the results, and this time specify that the results are on the same page.

Let me know how you get on and I'll take a closer look if you can't get it working.

[georgesw]

thanks for your "live support"

The good news: have found my error - despite your "how to" I made an error in the view - I put the marker code outside the loop

I've made a separate Testpage where I displayed my views from yesterday and today, and one from the Top-Navigation Page "Map Search"
hidden link

They all work now

My remaining problem:

I don't understand the concept of "relation between map and view", how to connect a map with a view, and how to "show the map on a specified place" (means specific column)

1) In my understanding - I attache the map to a view in the "Loop Output Editor" by inserting the Field "Map" outside the loop, and by inserting the field "Marker" inside the Loop - map and marker get there id's and are connected to the view - am I wrong here?

2) Trying to fix my last issue, means separating "Custom Search" ¦ ListingCards ¦ and Map

I created the following page:
hidden link

In DIVI left column
a) - I inserted a Text Element with "only the search form"
b) - I inserted a 2nd Text Element with "Only the search results"

In DIVI right column
c) - I inserted a Text Element with the following code:
[wpv-map-render map_id="map-12" cluster="on" marker_icon="//bauen.lu/wp-content/plugins/toolset-maps/resources/images/markers/Buildings.png"][/wpv-map-render]

THE PROBLEM as I see it:

The Page is trying to display 2 Maps from the same view:
once from b) where I say that I want the "search results"
once from c) where I try to insert only the map with it's markers.

How do I get rid of the map in b) but keeping the ListingCards?
how does the concept works of splitting search results in two parts - ListingCards and "Map with Marker"

Thanks for your continuous support
Georges

[Nigel]

Hi Georges

You can't take the map-render shortcode out of the View and place it elsewhere on the page.

Your View has two parts: the filter controls (the search part) and the Loop Output (the results).

You can display these separately.

But both your list of matching posts and the markers displayed on a map are part of the results. These must be output together.

That doesn't mean that they cannot be visually separated into columns, but it does mean that the markup is generated from a single Views shortcode in one place.

So, for this page, use Divi to create a two-column layout, with a narrow left column and a wide right column.

Insert the View search filters only in the left column.

Insert the View results in the right column.

That will display both the map and the list of results.

Now your challenge is to use CSS to display the list of results in one column and the map in another. You may need to add additional markup to your View Loop Output to achieve this.

This is how you should implement it, and this last part is the part which should occupy your attention.

(The only alternative is to not use Divi modules to design the page and use entirely bespoke CSS to achieve the required layout.)

[georgesw]

Hi Nigel,

What do you think about the idea of keeping DIVI, but using a "cuztomized Standard WordPress PageTemplate" only for the "Map Split Search Page" - does that make sense?

thanks for your time and explanations.
Georges

[Nigel]

Hi Georges

Yes, I wasn't suggesting you don't use Divi at all, only that you might want to design this particular page without Divi, entering the markup directly into the post body.

In which case you are not restricted to working with Divi's layout style rules and you can use whatever suits.

A perfect chance to level-up your CSS skills and use CSS grid perhaps?

hidden link

[georgesw]

Hello Nigel,

thanks for showing me gridbyexample.com - as you can imagine, I have only limited basic css knowledge - don't be afraid - I won't ask you to teach me css 🙂

but maybe you can just give me a quick hint on this:

1) how do I connect to the necessary toolset css files, is there an easy way - or should I check the source-code for an existing page, and copy what I need?

2) is there a special markup to use when putting views into the "custom page file" - I've tested, and the follwing brings no results:
[wpv-form-view name="map-search-split-20180425-1010" target_id="self"]

thanks for any guidance you can give here

cheers,
Georges

[georgesw]

Hi,

I've found out for 2)
should be something like
<?php
echo do_shortcode('[wpv-view name="map-search-split-20180425-1010"]');
?>

But now idea how to move arround the map - or seperate it from the rest.

I tried via "wordpress custom page" and via toolset layout....

I will keep on trying...

regards,
Georges

[Nigel]

Hi Georges

Sorry, I'm not sure why you are directly editing a PHP template for this page.

I suspect you would find it easier to just edit the page in the WordPress admin (selecting the text rather than visual tab of the editor) where you can directly add HTML and insert shortcodes as required. Just don't use Divi to design this particular page.

As for "using Toolset's CSS", there is not much CSS to help you in this scenario. When you are using Divi you should disable Bootstrap to avoid certain CSS clashes, and it is Bootstrap that provides Toolset's grid system, so it will not be available to you.

In the screenshot you can see a very crude example, where I have split the View into 3 columns, with the filters in column 1, results in column 2, and map in column 3.

I did that all within the View itself, which I then inserted onto a page.

Here is what's in the Loop Output Editor:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
		<wpv-loop>
          <h3>[wpv-post-link]</h3>
          [wpv-map-marker map_id="map-1" marker_id="marker-[wpv-post-id]" marker_field="wpcf-home-address"][/wpv-map-marker]
		</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<p>No results</p>
	[/wpv-no-items-found]
[wpv-layout-end]

I have moved the map render shortcode down to the Filter and Loop Output Integration Editor, where I use DIVs with column classes to divide up the output, like so:

<div class="custom-column">
[wpv-filter-meta-html]
</div>
<div class="custom-column">
[wpv-layout-meta-html]
</div>
<div class="custom-column">
[wpv-map-render map_id="map-1"]
</div>

I also included this very crude CSS to display in columns.

.custom-column {
  width: 33%;
  float: left;
}

Now, I'm sure you can do better than that, but that should set you off in the right direction 🙂