Behind the scenes: how it works
(reference to original .rp file available for download)
Two master have been used on this prototype, Main BG which is applied as a fixed background to all pages but the checkout pages, and Checkout BG, which is applied to the checkout pages only. This is to avoid customers being distracted when they go through the checkout and let them complete the purchase in a seamless way, with no distractions.
One variable named LoggedIn has been used so that when each page is loaded, the Main BG master is updated to reflect the logged status. So if LoggedIn variable equals "Yes", then the text panel on the upper right called MyAccTextBox ("Your account - sign in") is turned into a notification that says "You are logged in" and a link to log out. Otherwise, if LoggedIn does not equal Yes (which might mean that it equals No or that it's not been set yet), then the link to "Your account" remains as it is.
In case the LoggedIn variable is set to "Yes", then the OnClick interaction on the above mentioned text box is set to change the variable value to "No" and redirect the user to the logged out confirmation page. If, on the contrary, the variable does not equal "Yes" - which means that the user has not logged in - the link leads to the login / registration page (see notes on that page to see the explanation of the interactions associated to it).
IMPORTANT: other solutions are possible, for example a better one could be to include the text panel for "Your account" (upper right corner) within a dynamic panel with two states, one for logged in status and one for logged out status, with a proper link separated from the nnotification. The reason why I went for this approach is to show in a simple, elegant way how the interactions can be managed in Axure. With regards, in particular, to the type of operators (IF opposite to ELFE IF). So what's interesting here is that if you look at the OnMouseClick behaviour associated to the text panel "Your account" on the top right corner, you'll notice that the second instruction is set as ELFE IS. This is essential for this pattern to work properly, because what we want to communicate to the browser is that there are two different conditions-possibilities, one or the other, and if the first condition-possibility is true, that's it, go for it. This algorithm basically says:
1) If the LoggedIn variable equals "Yes", then set it to "No" and open the logout page
2) otherwise (= ELSE IF), if the variable does not equal "Yes", then open the login / register page
You can now try to change the second condition to IF (Axure allows you to do that by right clicking on it). It won't work anymore, as clicking on the "log out" link once one has logged in will as a result open the login / register page, so there's no way that one can log out. The reason for this is that the browser doesn't have a choice like "this or the other" any more; the algorithm now says:
1) if the LoggedIn variable equals "Yes", then set it to "No" and open the logout page
2) after you've done that, if the LoggedIn variable does not equal "Yes", then open the login / register page
Now what happens is that if one is logged in and the variable equals "Yes", the first part of the algorithm instructs the browser to change the variable to "No". This make the second condition become true, as the variable is now set to "No", and operated. The browser therefore receives the instruction to open the login / regiter page!
This prototype includes the backbone of an e-commerce login / register process. It also illustrates the way in which conditions can be used sequentially in Axure RP Pro.
You should get to the shopping basket page in order to enter the checkout process.
Note 1) It won't work properly if you use the menus on the left hand site that Axure generates automatically when exporting to html.
Note 2) Some variables have been used to move data from one page to the other, although for simplicity, the values for registration and billing address are saved using the same variables rather than different ones.