There may be times when you want to customize your store in some way for specific users, depending on which group a user is assigned to. Perhaps you want to use CSS to hide a button for one user group, but display the button for others. Or perhaps you want to trigger a JavaScript function that runs only when a certain group user is interacting with the store. We will go through the steps you can take to make this happen.
Edit the user group
Your first step is to edit the user group in question under "Customers → Customer Groups". Locate the "Group Custom View" section:
- First toggle on the "Enable Custom CSS" option
- In the Custom CSS field below, enter something similar to the following: https://mydomain.com/?v=user-group-name. You should change the domain name to your store's domain. And then edit user-group-name to the name of your group, with no spaces.
- Please be sure to use a full URL - not a URL snippet.
The custom CSS URL will only appear in the <head> of the site for users within that user group.
Add JavaScript to check for the CSS URL
The next step is to check for that custom CSS URL and, if found, to do something. Navigate to "System → Modules → Custom Tags" /admin/mmodules/custom_tags. Create a new custom tag.
- The position should be "Footer"
- The page type should be "All"
In the value field, you will enter something like this:
var link = $('head').find('link[href="https://mydomain.com/?v=user-group-name"][rel="stylesheet"]')
if(link.length){
// This is where you will do something custom for this group
}
Be sure to wrap that in script tags.
Note that you will need to change that URL to the one you just entered into the group's Custom CSS field.
Targeting the group with custom CSS
If you want to make CSS modifications that only affect this particular user group, you can use the following JavaScript:
var link = $('head').find('link[href="https://mydomain.com/?v=user-group-name"][rel="stylesheet"]')
if(link.length){
$('body').addClass('user-group-name-css');
}
Be sure to wrap that in script tags.
Edit the user-group-name-css to something custom to your user group. What this will do is add a custom class to the <body> tag of the store for only users in this particular group. Now you can leverage that class in CSS so that your styles only apply to this group. For example:
.user-group-name-css .logo { border: 1px solid #000; }
.user-group-name-css .btn-quote { display: none; }
Firing JavaScript for only specific user groups
To run JavaScript functions for users only in particular groups, you would use the initial JavaScript code shared above, and then include your JavaScript function within it. For example:
var link = $('head').find('link[href="https://mydomain.com/?v=user-group-name"][rel="stylesheet"]')
if(link.length){
$("#review-title-mobile").trigger("click");
}
If you have any questions about this functionality please reach out to our support team.