Creating login functionality on eCommerce registration form for return customers

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

Introduction

On some occasions you may want to introduce a login form for return customers so that you can get them to log in and pre-populate the registration form with their CRM details from their previous purchase. There are two ways in which you can setup your eCommerce to pre-populate the registration form for the returning customers.

NOTE: additional checkout steps will increase the cart abandonment rate.

Method 1

1. Go to Site Manager -> Module Templates -> Online Shop Layouts and choose the Shopping Cart layout.

 

2. Using the Module Manager on the WYSIWYG editor's tool bar simply insert a Generic Secure Zone Login Form into your shopping cart layout. With this form on the shopping cart page customers can either click on the existing 'Checkout' button or choose to fill in the login form and submit it, after which they will be redirected to the checkout registration form.

 

3. You also need to add the CRM modules to the registration form fields in order to populate the email address, first and last name, billing and shipping address fields and any other info the modules are available for. To do this you need to use {module_shippingaddress}, {module_shippingcity}, {module_billingaddress} and so forth, inside the value argument of the input field.

The full list can be found in the Customizing WebForms article.

Example: Original field -

<input type="text" name="FirstName" id="FirstName" /> 

The same field after the above change -

<input type="text" name="FirstName" id="FirstName" value="{module_firstname}" />  

Method 2

In this method you need to add the login form to the registration layout, rather than shopping cart layout as per the method 1 above. Basically, you hide the registration form and reveal the login form, then when the customer logs in you reveal the registration form and hide the login form. Here's the step by step process:

 

1. Go to Site Manager -> Module Templates -> Online Shop Layouts and choose the "Registration (Buy)" layout.

 

2. Add the relevant modules to the form so the form is populated if the customer logs in, e.g. value="{module_firstname}". The full list of modules can be obtained in the Customizing WebForms article.

 

3. Wrap the form in a <div> and use css hide it. Make sure you give your div an ID , e.g. <div id="myform" style="display:none;">

 

4. Insert a Generic Secure Zone Login box on this page. Make sure that the action URL of this form has ZoneID=-1 in it and apend &PageID={module_pageaddress} to it e.g. action="/ZoneProcess.aspx?ZoneID=-1...&PageID={module_pageaddress}"

 

5. Add the following Javascript to your page, which will check if the user is logged in it will display the registration form (add script at the end of the page and remove spaces from the module tag):

 

<script type="text/javascript">  
                var loggedin = {module_isloggedin};   
                if (loggedin == 1)   
                    document.getElementById('myform').style.display='inline';  
            </script>  

If the user is a new user you would simply add some JavaScript to show the form instantly. e.g.

<a href="#" onclick="document.getElementById('myform').style.display='inline';return false;">New User? Click Here to complete purchase</a>  

You should also collect usernames and password on the checkout so that the users can use these to log in on the next purchase. To do this, inside the Admin Console, go to Site Manager->Webforms, choose your webform and add the Username and Password fields. Then, re-insert the form in the checkout (registration buy) layout.