[Resolved] How to display dynamic content on pages based on a selection on the landing page

[Author]

Posts

[Marcel]

I'm building a website for hairdressers. On the landing page, a visitor selects a certain hairdresser. When they select a hairdresser, all other pages should display content based on the selected hairdresser.

So for example, the contact page should show the contact details of the selected hairdresser, the about page should show the biography of the selected hairdresser etcetera.

How do I do that?

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please share more details about how user will select the hairdresser - I will have to check the workflow you follow as well as what structure you are having then I will be able to guide you in the right direciton.

Can you please share all those required information as well as admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

I'm not sure when you say the the user came from via google.

To identify the hairdresser - either it should be the single hairdresser post or we should have a URL param that holds the specific hairdresser ID.

And its still not clear how you want to display it. I need more details please. On what page/post you want to display what information and where exactly?

[Marcel]

We have hairdressers in different towns. So when someone searches in Google on "Hairdresser Amsterdam", he should land on the single hairdresser post called "Hairdresser Amsterdam" (as an example).

When he searches for "Hairdresser Eindhoven", he should land on the single hairdresser post called "Hairdresser Eindhoven".

When he navigates to the contact page from the single hairdresser post "Hairdresser Amsterdam", that contact page should contain the contact details for that hairdresser in Amsterdam.

And when he navigates to that same contact page from the single hairdresser post "Hairdresser Eindhoven", the contact page should contain the contact details for the hairdresser in Eindhoven.

The same goes for other pages: if he navigates to the about page from "Hairdresser Amsterdam", that page should show the biography of the hairdresser in Amsterdam.

So I probably need a way to add the ID for a specific hairdresser to all links in the nav menu and on the page itself, and a way to show content based on that id.

[Minesh]

Can you please share one example single post link of "Hairdresser Amsterdam"?

[Marcel]

Sure, hidden link. Hairdresser Amsterdam was just an example, but this is a single hairdresser post / landing page.

So, when I'm on this page, and I click on "contact" in the nav menu or on the contact button at the bottom of the page, the contact page should show the contact info for "Bob" instead of "Lisette" like it does now.

[Minesh]

There is no such feature available to add URL param to nav menu items. It will require to use custom code with WordPress hooks and that is beyond the scope of our support policy.

However, as it's a small task, I've added the following hook to add the current post ID to contact menu and added the code to "Custom Code" section offered by Toolset:
=> hidden link

add_filter( 'wp_get_nav_menu_items','func_add_kapper_id_to_menu', 20, 3 );
function func_add_kapper_id_to_menu( $items, $menu, $args ) {
  global $post;
  
    if( is_admin() )
        return $items;

if($post->post_type=="kapper"){

    foreach( $items as $item ) 
    { 	
        if( 'Contact' == $item->title){
         
            $item->url = $item->url.'?contact_id='.$post->ID;
          	$items[] = $item;
        }  
    }
}
    return $items;
}

Now, when you come to this page: hidden link

It will add the "contact_id" attribute with the current post ID as URL param to contact menu item. Pleae check the contact menu item. Once you click on it you will see it will redirect you on: hidden link

Now, based on URL pram you should get the value and display the desired content using content template.

[Marcel]

Thanks a lot Minesh 🙂

It's a small task for you, but I use Toolset because I'm not a developer so for me it's an impossible task. Toolset offers the best support I've ever experienced (ok, shared first place with Elegant Themes 😉 ), which is one of the reasons I use Toolset for these kind of projects.

So now I just need to know how I can show the right content based on the ID in the URL 🙂

[Minesh]

Can you please tell me what exactly fields you want to display?

[Marcel]

That will differ per page I guess, but if you need some fields as an example, you can use any field. I would like to learn how it's done so I can adapt it to my needs later on.

[Minesh]

Do you mean that the current fields that displays on Contact page should be hidden when we have URL param available for contact_id and then I should display few other fields - right?

[Marcel]

I would like to replace the current fields with dynamic fields. Those dynamic fields should have the current information as the default value, but if the URL has an ID parameter, they should show the value for that "kapper" (hairdresser).

[Minesh]

So, to display the content based on URL param. I've created the following content template and you can add as many fields as required:
=> hidden link

[types field='woonplaats' item="[wpv-search-term param='contact_id']"][/types]
[types field='introtekst' item="[wpv-search-term param='contact_id']"][/types]
[types field='portfolio' title='%%TITLE%%' alt='%%ALT%%' size='full' separator=', ' item="[wpv-search-term param='contact_id']"][/types]

As you can see we can grab the URL param using the shortcode [wpv-search-term param='contact_id'] and assign it to item attribute so it will display the content belongs to the ID that is hold by "contact_id" attribute.

Then, I've added the new Divi row and added the following shortcode that displays the above content template under the title "Toolset Content Template:" so you know where content from Toolset content template is get displayed.
=> hidden link

Toolset Content Template:
[wpv-post-body view_template="ct-for-contact-based-on-url-param"]

If you see the following URL you will notice that it does display the content belongs to ID 1462:
- hidden link

And if you see the following, it does display the content belongs to ID 1549:
=> hidden link

The only thing you need to figure out is how you can hide the default contact information as you are using Divi to build your contact page template and we do not have any control over there. You should check with divi support how you can show/hide row based on the URL param "contact_id".

[Marcel]

Hi Minesh,

Thanks a lot - again 🙂 That works really well!

I just built it a bit different; I replaced the fields on the contact page with dynamic fields, and added a default value to each field that is shown when no hairdresser is selected yet.

One more question; how can I use this code in a hyperlink? When I use Woonplaats the link gets corrupted (I guess because " is used around the shortcode as well).

[Minesh]

Can you please try to use the following line of code:

<a href="[types field='woonplaats' item='[wpv-search-term param='contact_id']'][/types]">Woonplaats</a>

It should work.

Please kindly open a new ticket for every new question you may have. This will help other users searching on the forum as well as help us to write correct problem resolution summery. Thank you for understanding.