Changing the whole store design (CSS) based on the logged in user - xmpie-users/uStore-js GitHub Wiki

uStore admin allows you to set a specific design or branding (skin) on each store.

Sometimes you may want to allow different customers access to the same store, but change the design or look of the store based on the logged in user.

uStore's client-side API includes an object xmp.sdk.storeFrontParams.currentUser which contains the following keys that correspond to the Personal Information entered in the My Account area of the storefront:

firstName
lastName
email
phoneNumber
mobileNumber
faxNumber
companyName
department
jobTitle
externalId
gender
birthday
custom1
custom2
custom3
custom4
custom5

Using this JavaScript you can use these keys to change a CSS attribute (like the store logo) or the entire CSS file that is used:

<script type="text/javascript">
  $("document").ready(function() {
    var customerCompany = xmp.sdk.storeFrontParams.currentUser["companyName"];
    //or use the email domain if you think the customer might edit the company name:
    //var customerCompany = xmp.sdk.storeFrontParams.currentUser["email"].replace(/.*@/, ""); 
    if (customerCompany.toLowerCase() == "xmpie") {
      //change a logo only like this:
      $("#logo").css("background-image", "url(/ustore/images/xmpie.gif)"); 
      //or change the whole store skin like this:
      //$('link[href="/uStore/Images/<current skin folder>/Style.css"]').attr('href','/uStore/Images/<different skin folder>/Style.css');
      //or for new NG themes, this approach works better:
      //$('head').append('<link href="/uStore/Images/<current skin folder>/<alternative style sheet>.css" rel="stylesheet"> ')
    }
  });
</script>

**Important: ** Only values that are marked as Visible To Customer in the Presets-> User Details Fields List can be used in the javascript.

For information on how to add JavaScript to your store: How to add JavaScript to a storefront.

⚠️ **GitHub.com Fallback** ⚠️