Updated on 16 Aug 2024
A user asked:
How to dynamically show menu based on 'user type' selected
Hi, starting out on a project moving a clients site from hubspot to wordpress.
On their homepage, users select what type they are, eg. homeowner, architect etc. The site recognises the option chosen and shows a different menu option for each one.
Any ideas how I can change the ‘user type’ to whatever they have chosen so it shows the right menu - the menus will output conditionally, ie ‘ if the field = homeowner, only show x and y
Hope that makes sense.
Home to select option: https://cemfloor.co.uk
...when they navigate to other pages after choosing user type, the same menu button with the user type stays present based on their choice. Any ideas - I was trying to create a header that displays the button and menu conditionally based on their user type choice - trying to set a cookie on session storage using bricks interactions on the homepage and then output conditionally based on that.
Also the logo goes to the chosen user type ‘home’ page too once they have selected one.
This Pro tutorial shows how
- localStorage can be used to store/persist the user type on the client-side and
- cookies can be used to make the user type accessible to PHP on the server-side and
- AJAX can be used to sync the user type with server
to transfer data between server and browser for effectively using dynamic conditions in Bricks to conditionally output elements depending on which button the visitor has clicked.
This is quite a powerful technique to have in your toolbox after you understand how it is put together and you should be able to extend it to build various solutions like age gate and custom cookie banners.
In this example we shall set up three buttons on the homepage each linking to corresponding pages:
and add three corresponding buttons (can be any other element) in the Header template:
Each button in the header has a dynamic data condition set on it.
These header buttons will not be visible on the homepage when a visitor visits the site for the first time or has not clicked on any of the homepage buttons yet.
When a visitor clicks the Homeowner button on the homepage for example, our custom JavaScript sets localStorage and a cookie (user_type = homeowner), then navigates to the corresponding /homeowners/ page.
In the dynamic condition on the Homeowner header button, we call a custom function that checks if the user_type cookie's value is homeowner and since that is true when the Homeowner homepage button is clicked, the header button will be shown.
The cookie's value will remain the same until another homepage button is clicked thus enabling us to output different elements based on which button the visitor clicked.
Update 1
Added instructions on how to add a select dropdown in addition to the buttons for the visitors to select their user type.
Step 1
Edit your site's homepage with Bricks and inside a Section's Container, paste this Block.
The three buttons (anchor tags to be precise) have user-type-link class.
They are each linked to /home-owners/, /contractors/, and /channel-partners/ respectively. While it does not matter, you may want to create these 3 Pages just so you don't keep coming across 404 Not Found pages during your testing after you implement the steps.
The buttons have IDs set at STYLE → CSS → CSS ID to homeowner, contractor and channel-partner respectively. The value of user_type cookie will be set to the ID of whichever button is clicked.
Step 2
Install and activate the Bricks child theme if it is not already active. You can download the Bricks child theme directly from your Bricks account.
This can be done at any stage, even if your site is already built with the parent Bricks theme, and will not have any negative impact.
Create a directory called assets in the child theme.
Create a directory called js inside assets.
Create a file named say, localstorage.js in the above js directory having:
