How to show user-group specific content

This is a brief tutorial to outline how to hide/show information based on a customers user group. This is the best-practice way to:

Hide pricing for logged-out users
Disable add-to-cart for logged out users, or specific price groups (useful for showing add-to-cart only for wholesale customers for example)
Target advert campaigns against particular users
Change menu items based on whether a customer is logged in or not

Whenever checking the current session for user data it is important to note that Neto treats certain [@user@] differently. Some are available on page load, while others are loaded after the initial page load via AJAX. For example, you can check a customers Group ID on page load, but you cannot check their Username.

If you absolutely need a certain [@user@] tag in your logic, you can wrap the entire code block in an ajax_loader function. Just remember any B@SE tags inside the ajax_loader will lose scope from the page, so you will need to pass through any top level tags

For the purpose of the tutorial we will build out a header menu that display's different content depending on if the customers Group ID. As Visiting or "Not logged in" customers can have their own Group ID this is flexible enough to check if a user is logged in or not.

This same Grpup ID logic could also be applied to distinguish between wholesale group customers and other customers.

Interested in how user-group checks could be used for other B2B features? Check out our design tweak for Hiding Pricing/Buying Options

Step 1: Control Panel Setup

First, ensure your have the Customer Groups addon installed. Next navigate to Settings & Tools > All Settings & Tools > Customer Settings and ensure the Default registered customer group ID is a different customer group to the Default customer group id (not logged in).

Want to rename your Customer Groups so they are easier to work with? This can be done under Settings & Tools > All Settings & Tools > Customer Groups. Edit any customer groups you intend to use and update the Name to help tell them apart.

Next, we need to setup our two menus. In your control panel navigate to Webstore > Menus. We'll use the existing web_header menu as our default menu, click the +Add new menu button and create a menu to use for logged in customers, e.g:

Menu Reference: web_h_customer
Menu Name: Website Header - Customer
Visibility: Visible
Description: This menu appears at the top of every page if a customer is logged in

Add any menu items as you see fit. To see the menu update as expected, use different menu items to the web_header menu.

Step 2: Theme Template Changes

In your control panel, navigate to Settings & Tools > All Settings & Tools > Webstore Templates and locate the folder of the theme you wish to update. This could be a staging theme based off your current active theme, or any other theme you have installed. Within your theme folder, navigate to: templates > headers > template.html.

You can also make these changes via SFTP if you have access. Don't have SFTP access, read this first.

/httpdocs/assets/themes/[THEME-NAME]/templates/headers/template.html

Locate your themes current [%menu id:'web_header'%] function. It should look something like this. If you have customised your theme already, make the changes to whatever [%menu%] function you have, or add a new one.

Just above the menu's [%cache%] function add the following code:

[%set [@menu_state@] %]
    [%if [@user:group_id@] == [@config:default_groupid@] %]web_header[%else%]web_h_customer[%/if%]
[%/set%]

This checks if the user-group in the current session is the same as the default customer group (not logged in). If it is, the menu_state is set to web_header otherwise it is set to our new menu web_h_customer.

Next, we need a way to pass our menu_state into the existing [%menu%] function. If we update the menu id field right away, the menu's caching will persist and contents will not change when a customer logs in or out. To resolve this we need a unique cache ID for each menu, which we can achieve by appending the menu_state to the id:

[%cache type:'menu' id:'header-content-menu-[@menu_state@]' ttl:'86400'%]

Finally we can update our [%menu%] function to check the menu_state:

[%menu id:'[@menu_state@]'%]
    <!-- your menu code -->
[%/menu%]

Step 3: Review Changes

Now when any webstore page loads, the header menu will check the current user-group and correctly provide a cached version of the correct menu.

Your themes headers/template.html menu code should now look something like this:

[%set [@menu_state@] %]
    [%if [@user:group_id@] == [@config:default_groupid@] %]web_header[%else%]web_h_customer[%/if%]
[%/set%]
[%cache type:'menu' id:'header-content-menu-[@menu_state@]' ttl:'86400'%]
    [%menu id:'[@menu_state@]'%]
        [%param *level_1%]
            <li class="nav-item [%if [@next_level@]%] dropdown [%/if%] [%if [@css_class@]%] [@css_class@][%/if%]">
                <a href="[@url@]" class="nav-link [%if [@next_level@]%] dropdown-toggle[%/if%]" [%if [@next_level@]%]role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"[%/if%]>[@name@]</a>
                [%if [@next_level@]%]
                    <ul class="dropdown-menu">
                        [@next_level@]
                    </ul>
                [%/if%]
            </li>
        [%/param%]
        [%param *level_2%]
            <li class="[%if [@next_level@]%] dropdown dropdown-hover [%/if%] [%if [@css_class@]%] [@css_class@][%/if%]">
                <a href="[@url@]" class="nuhover dropdown-item">[@name@]</a>
                [%if [@next_level@]%]
                    <ul class="dropdown-menu dropdown-menu-horizontal">
                        [@next_level@]
                    </ul>
                [%/if%]
            </li>
        [%/param%]
        [%param *level_3%]
            <li class="[%if [@css_class@]%] [@css_class@][%/if%]">
                <a class="dropdown-item pl-5 pl-sm-4" href="[@url@]">[@name@]</a>
            </li>
        [%/param%]
    [%/menu%]
[%/cache%]

Want to make the same changes in your themes footer? You will need to create a new footer menu for the logged in customer, such as web_f_customer and run through the same code changes, but on the [%menu id:'web_footer'%] in your themes templates/footers/template.html file.

When making user-group checks in your theme templates, try to avoid hardcoding IDs directly into the code. This will make it hard to maintain if the customer group setup has to change in the future. Instead, always check the provided group_id configs. Remember:

[@user:group_id@] will return the Group ID of the customer in the current session
[@config:DEFAULT_GROUPID@] will return the Group ID for visiting customers
[@config:REGISTER_GROUPID@] will return the Group ID for the default customer group
[@config:WHOLESALES_GROUPID@] will return the Group ID for the wholesale customer group

If you need to access Group IDs outside of the default configs, you can always create your own custom config's so user-group checks can be updated once, in the control panel. And not in the theme code where you would need to adjust every user-group IF statement you have added.

You should now have a better understanding around how user-group checks can be performed in a Neto theme template to display different content to different customers.

Not sure about the above changes, or looking for something a bit different? If you are experienced with HTML and CSS, our developer docs provide details on the Neto by Maropost specific parts of web development. If you are not comfortable editing code, we recommend submitting a request to a Neto by Maropost design partner.

How to show user-group specific content

Step 1: Control Panel Setup

Step 2: Theme Template Changes

Step 3: Review Changes

Was this article useful?