User Account Interface Development

This article will describe how easy it is to create a user account interface by simply adding Salmon logic.

Please keep in mind that it is not necessary to apply SEO logic to user accounts because these are private spaces of the web site that should not be indexed by search engines.

V3 introduced the notion of containers, and the ability to manipulate those containers through JavaScript arrays that serve as buffers. Additionally, an updated generic behavior B20 was added. Yet, the necessary logic for user accounts is still based on V2.

Don't worry - the user account logic is quite simple to implement and does not require most of V3's new features.

As usual, the first thing you do is create an HTML page that will serve as the design basis. Next, import e2c.js, as well as e2ca.js, which contains additional code for accounts.

User account logic is generally made of a menu and panels The menu serves for the user to navigate though their account, and the panels are specific views for content that should be rendered.

Each panel is a container, but with one important difference. A panel container has an element id like id="e2caccpanelx", where the ending part, x, is a number.

For example, a basic panel would be:

<div id="e2caccpanel1" style="display:none;">
<table border="0" width="90%" id="table1">
<tr><td>Old password</td><td><input id="e2copwd" type="text" name="po" size="20"></td></tr>
<tr><td>New password</td><td><input id="e2cnpwd" type="text" name="pn" size="20"></td></tr>
<tr><td>Confirm new password</td><td><input id="e2ccnpwd" type="text" name="cnewpwd" size="20"></td></tr>
</table>
<p id="e2cformval1"></p>
<p><a href="javascript: e2c_acc_validate(1,'', '');" class="button"><span>Save</span></a></p>
</div>

As you see, this is simply a container with a specific element id and with style set to display:none.

On your navigation menu, you would simply put a link to javascript: e2c_acc_setpanel('1'); and your container e2caccpanel1 would show.

Using the same approach, you would put links to each of the panels, corresponding to each menu item, simply by adding javascript: e2c_acc_setpanel('x'); with x being the number of the panel to show.

Your menu could look something like this:

<ul>
  <li><a href="javascript: e2c_acc_setpanel('1');">my panel 1</a></li>
  <li><a href="javascript: e2c_acc_setpanel('2');">my panel 2</a></li>
  <li><a href="javascript: e2c_acc_setpanel('3');">my panel 3</a></li>
...
</ul>

The order of the numbers is not important. You could have the first link to panel 1, the second to 3, and the last one to panel 2. Since the order does not matter, you can rearrange the menu at any time without issue.

When the function e2c_acc_setpanel(x) is called, Salmon will simply iterate though all panels and hide them, then show the one you passed as x. By default, the function is set to iterate though 20 panels, but you may change that number directly in e2ca.js if you need to support a larger amount of panels.

function e2c_acc_setpanel(a){
for(var i=0; i<20; i++){
...

Another important feature of e2c_acc_setpanel() is the ability to set which function should be executed upon the panel being shown. Let's have a look:

function e2c_acc_setpanel(a){
for(var i=0; i<20; i++){
try{$('#e2caccpanel'+i).hide();}catch(e){}
}
$('#e2caccount').html($('#e2caccpanel'+a).html());
if(a==3){e2c_loadAddresses();}
if(a==4){e2c_acc_getUserOrders(1);}
if(a==5){e2c_acc_getUserOrders(2);}
if(a==8){e2c_acc_getUserOrders(3);}
if(a==6){e2c_acc_getUserMessages(1);}
if(a==7){e2c_acc_getUserMessages(2);}
}

As you can see, if we passed the integer 3, we would be showing panel 3 and then executing the e2c_loadAddresses() function. Of course, you can set any function you want. It doesn't have to be e2c_loadAddresses(). The main point is that if the function is a helper, the returned JSON data would be sent to a behavior that you set that helper and populate the panel.

One last thing - in order to get the user properly authenticated for interaction with Salmon, in your $(document).ready(function() {...} you should set isAccount=true;.

As you can see, building a fully-featured user account interface is extremely simple with Salmon.