I was messing with a friend’s Business Catalyst CMS and managed to break his Javascript while trying to fix his top navigation. In truth, the way it was before wasn’t acceptable anyway so really I didn’t break anything that wasn’t already broken.
Anyway, there was a SCRIPT which was supposed to show a link that says “Login” when the user is NOT logged in and shows “ACCOUNT” when they ARE logged in. Unfortunately, due to some peculiarity of Javascript’s document.write function or maybe his site’s HTML, the link showed up on the second line in the navigation, like this:
It didn’t look good and there was room in the template for it to go to the right of “Contact Us”. So, I went to edit the Template and it broke the Javascript when I saved it (I guess Business Catalyst is known for “cleaning” code up this way).Â
Anyway, I suppose there’s a couple ways I could have addressed this.
- Edit the Template source file via FTP (which I did not have access to)
- Figure out how to turn off the code cleanup function (not recommended and I couldn’t find any way to temporarily override it anyway, though I admit I did not call Support)
- Setup two menus in the system and use CSS (I did not try this one because for some reason this site does not use the dynamic menus, but if you’re interested, here is a link to try: http://businesscatalyst.com/ForumRetrieve.aspx?TopicID=4081&A=SearchResult&SearchID=1458429&ObjectID=4081&ObjectType=43)
- Write my own code.
I chose #4 and as it turns out, the way to get around this is to create two hidden DIVs for the nav links each with their own IDs and put the code to Login in one and the code to manage your account in the other (see below). Then you set one visible through Javascript depending on whether the user is logged in or not.Â
Simple:
 <div id=”hiddenDiv” style=”display: none;”><strong><a href=”/home”>Home</a> <a href=”/about-us”>About</a> <a href=”/membership-registration”>Get Certified</a> <a href=”/faq”>FAQ</a> <a href=”/contact-us”>Contact Us</a></strong> <a href=”../manage-membership”>ACCOUNT</a></div>
       <div id=”hiddenDiv2″ style=”display: none;”><strong><a href=”/home”>Home</a> <a href=”/about-us”>About</a> <a href=”/membership-registration”>Get Certified</a> <a href=”/faq”>FAQ</a> <a href=”/contact-us”>Contact Us</a></strong> <a href=”../login-lost-pass”>LOGIN</a></div>
Below this div put in the following Script:
<script type=”text/javascript”>
var loggedin = “{module_isloggedin}”;
 if (loggedin == 1)
 document.getElementById(‘hiddenDiv’).style.display = “block”;
else
document.getElementById(‘hiddenDiv2’).style.display = “block”;
</script>
Problem solved.
Note: The inspiration for this fix came from this guy’s work: http://blog.fabriziomichels.com/2009/11/how-to-show-a-div-only-when-user-is-logged-in-business-catalyst-goodbarry/
