The Ajax sign in script allows website visitors to sign into their account, without leaving the current screen that they are on. There are 3 main elements you will want to add your custom template in order to use the Ajax sign in script.
3 elements to add to your custom template:
The first thing you will want to design is what the sign in area will look like. In this example there is an in-page popup or modal that is displayed once a customer clicks the sign in link. Go to Merchandising > Custom Templates > Includes, and create a new include called "SignInModal.sst" and add the following code into that file. Then you can add the tag for the include file [-- INCLUDE SignInModal.sst PROCESS --] to all your templates where signing in is possible (such as pages, search results screens, more information pages and the first cart screen). Add the include tag just above the closing </body> tag.
The default code below uses Twitter's Bootstrap framework for the modal and jquery. If you are not using a Bootstrap framework, which includes the bootstrap CSS file and the bootstrap jquery file, then switch the pull down menu to "self-contained" and you will see complete code for adding your own popup and using ShopSite's jquery file.
Click this sign in link for an example of this modal
<div class="modal fade" id="mySignIn" tabindex="-1" role="dialog" aria-labelledby="mySignInForm">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">[-- STORE.SignInButtonText --]</h4>
</div>
<div class="cr_warning"></div>
<form id="sign-in-form" name="cr" class="cr" action="[-- SHOPPING_CART_URL Secure Base --]/registration.cgi" method="post">
<div class="modal-body">[-- IF CR_FACEBOOK_CONNECT --]<input type="hidden" name="storeid" value="[-- STORE.Id --]"><div class="center"><div id="aj-fbconnect" class="padb padst">[-- CR_FACEBOOK_CONNECT --]</div></div>[-- END_IF --]<div id="sign-in-form-div">[-- CR_Signin_Email_Password div --]</div></div>
<div class="modal-footer"><div class="inline float-left"><a class="small italic" href="[-- SHOPPING_CART_URL Base --]/order.cgi?storeid=[-- STORE.Id --]&html_reg=html&func=5" title="[-- STORE.cr_ForgotPasswordText --]">[-- STORE.cr_ForgotPasswordText --]</a></div><button type="button" class="btn btn-default" data-dismiss="modal">[-- STORE.ContinueShoppingText --]</button><input type="submit" name="function" class="btn btn-primary" value="[-- STORE.SignInButtonText --]"></div>
</form>
</div>
</div>
</div>
<style type="text/css">div#user-links {display: none;}</style>
<script src="[-- OUTPUT_DIRECTORY_URL --]/publish/crsignin.js"></script>
<script type="text/javascript">
$('#mySignIn').modal({backdrop:'static',keyboard:false,show:false});
ss_jQuery('#sign-in-links,#signinlink').ss_CRSignIn({sign_in_form_id:'sign-in-form',
show_sign_in_callback:function(link_id){
$('div.cr_warning').html('').hide();
$('#mySignIn').modal('show');
},
post_sign_in_callback:function(data){
var v=data.cr_status;
$('div.cr_warning').html('').hide();
$('#mySignIn').modal('hide');
$('#accountHolder').html(data.cr_name);
$('#sign-in-links').hide();
$('#user-links').attr("style","display:inline-block");
},
error_message_callback:function(error){$('div.cr_warning').html(error).show();}
});
</script>
Click this sign in link for an example of this popup
<div id="mySignIn"><div>
<div id="signinPopUp">
<div>
<div>
<div class="popup-header">[-- STORE.SignInButtonText --]<a id="close" href="#">×</a></div>
<div class="cr_warning"></div>
<form id="sign-in-form" name="cr" class="cr" action="[-- SHOPPING_CART_URL Secure Base --]/registration.cgi" method="post">
<div>[-- IF CR_FACEBOOK_CONNECT --]<input type="hidden" name="storeid" value="[-- STORE.Id --]"><div class="center"><div id="aj-fbconnect" class="padb padst">[-- CR_FACEBOOK_CONNECT --]</div></div>[-- END_IF --]<div id="sign-in-form-div">[-- CR_Signin_Email_Password div --]</div></div>
<div class="popup-footer"><input type="submit" name="function" class="btn btn-primary" value="[-- STORE.SignInButtonText --]"></div>
</form>
</div>
</div>
</div>
</div></div>
<style type="text/css">
div#user-links {display: none;}
div#mySignIn {display: none; position: absolute; z-index:5000; height: 100%;}
div#mySignIn > div {display: block; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden;}
div#mySignIn > div:before {content: ''; display: block; width: 100%; height: 120%; background: rgba(0,0,0,0.5); position: absolute; top: 0px; left: 0px;}
div#mySignIn > div > div#signinPopUp {display: block; position: relative; top: 5%; left: 0px; width: 100%; height: 90%; text-align: center;}
div#mySignIn > div > div#signinPopUp > div {display: inline-block; width: 80%; max-width: 500px; margin: 0px auto; max-height: 100%; background: #f2f2f2; border-radius: 10px; moz-border-radius: 10px; -webkit-border-radius: 10px;}
div#mySignIn > div > div#signinPopUp > div > div {padding: 20px; text-align: left; max-height: 100%; overflow: scroll;}
div#mySignIn a#close {float: right; clear: none; color: #AAA; cursor: pointer; font-weight: bold; text-decoration: none;}
div#mySignIn div.popup-header {font-weight: bold; font-size: 120%; padding-bottom: 20px;}
div#mySignIn div.popup-footer {text-align: right;}
</style>
<script src="[-- OUTPUT_DIRECTORY_URL --]/html/publish/crsignin.js"></script>
<script type="text/javascript">
ss_jQuery('#sign-in-links,#signinlink').ss_CRSignIn({sign_in_form_id:'sign-in-form',
show_sign_in_callback:function(link_id){
ss_jQuery('div.cr_warning').html('').hide();
ss_jQuery('#mySignIn').show();
},
post_sign_in_callback:function(data){
var v=data.cr_status;
ss_jQuery('div.cr_warning').html('').hide();
ss_jQuery('#mySignIn').hide();
ss_jQuery('#accountHolder').html(data.cr_name);
ss_jQuery('#sign-in-links').hide();
ss_jQuery('#user-links').attr("style","display:inline-block");
},
error_message_callback:function(error){ss_jQuery('div.cr_warning').html(error).show();}
});
ss_jQuery('a#close').click(function(e){ss_jQuery('#mySignIn').hide(); e.preventDefault();})
</script>
Next you will want to add two <div>'s where you want your registration links to appear. One <div> should have the id sign-in-links and the other &div> should have the id user-links. In the sign-in-links div add a link to sign in, with the id signinlink. This div is displayed when customers have not yet signed in. In the user-links div you can include any links you want customers to see once they have logged in such as their account link, a log out link, or a direct link to their wishlists. This second div only appears after a customer has logged in. Here is the full example: