Documentation and Integration Center

Logging In To Retrieve Saved Information

Let's first give an example of a "Sign In" page. In our shopping cart example, we directed users to a Register page. If you are going to implement user accounts, you will need to instead direct to a "Sign In" page. A sign in page will most likely provide a couple of options: sign into their account and retrieve their saved information, or continue through the checkout process as a "Guest." Here is an example of the markup for a page which accomplishes this. The main tag to notice is Vae's <v:store:login> tag, which handles all the work of verifying a user's login information.

<h3>Sign in with your E-Mail Address and Password:</h3>
<v:store:login flash='login' redirect='/account'>
 <p>If you already have an account, sign in here.</p>
 <table>
 <tr>
  <td>Enter your E-Mail Address:</td>
  <td>
   <v:text_field path='e_mail_address'></v:text_field>
  </td>
 </tr>
 <tr>
  <td>Enter your Password:</td>
 <td>
  <v:password_field path='password'></v:password_field>
 </td>
 </tr>
 </table>
 <div class='buttons'>
  <a href='#submit'>Sign In</a>
 </div>
</v:store:login>
 
<h3>If you do not have an Account, you can create one:</h3>
 Welcome to this site.  Just click 'Register For an Account'.
 <a href='/register-front'>Register for an Account</a>
 
<h3>Forgot Your Password?</h3>
 We can help.  Just click the button to the right.
 <a href='/forgot'>I Forgot My Password</a>

Creating <v:text_field> tags with path values "password" and "e_mail_address" is necessary to create a functional login. Vae always keys off of the user's email address; there is no need for them to remember a username.

Saving Registration Data

Notice at the bottom of our example markup in the previous section, we've provided an option for unregistered users to create an account. The Register For An Account link points the user to an account registration page, where they can sign up. This page uses the <v:store:register> tag and redirects to an account management page upon user submission. Here is some example markup:

<h2>Register for an Account </h2>
<v:store:register redirect="/account">
 <h3>Billing Information </h3>
 <table>
 <tr>
  <td>Name: </td>
  <td>
   <v:text_field path="billing_name" required="name" />
  </td>
 </tr>
   <tr>
   <td>Company:</td>
   <td><v:text_field path="billing_company" /></td>
 </tr>
 <tr>
  <td>Address:</td>
  <td>
   <v:text_field path="billing_address" required="true" />
  </td>
 </tr>
 <tr>
  <td>Address 2:</td>
  <td><v:text_field path="billing_address_2" /></td>
 </tr>
  <tr>
   <td>Country:</td>
   <td><v:country_select path="billing_country" default="US" required="true" /></td>
  </tr>
  <tr>
   <td>City:</td>
   <td><v:text_field path="billing_city" required="true" /></td>
  </tr>
 <tr>
  <td>Province/State:</td>
  <td>
   <v:state_select path="billing_state" required="uscanada" />
  </td>
 </tr>
  <tr>
  <td>Postal Code: </td>
  <td>
   <v:text_field path="billing_zip" required="uscanada" />
  </td>
 </tr>
 <tr>
  <td>
   Phone: 
  </td>
  <v:text_field path="billing_phone" required="true" />
 </tr>
 <tr>
  <td>E-Mail Address: </td>
  <td>
   <v:text_field path="e_mail_address" required="email" />
  </td>
 </tr>
  <tr>
   <td>Confirm E-Mail Address: </td>
   <td>
   <v:text_field path="confirm_e_mail_address" required="email" />
  </tr>
  <tr>
   <td>Choose a Password:</td>
   <td><v:password_field path="password" required="true" /></td>
  </tr>
  <tr><td>Confirm Password:</td>
   <td><v:password_field path="confirm_password" required="true" /></td>
  </tr>
 </table>
 <h3>Shipping Information </h3>
 <a href="#same_as_billing">Same as billing? </a>
 <table>
  <tr>
   <td>Name:</td>
   <td><v:text_field path="shipping_name" required="true" /></td>
  </tr>
  <tr>
   <td>Company:</td>
   <td>
    <v:text_field path="shipping_company" />
   </td>
  </tr>
  <tr>
   <td>Address</td>
   <td>
    <v:text_field path="shipping_address" required="true" />
   </td>
  </tr>
  <tr>
   <td>Address 2: </td>
   <td><v:text_field path="shipping_address_2" /></td>
  </tr>
  <tr>
   <td>Country:</td>
   <td><v:country_select path="shipping_country" default="US" required="true" /></td>
  </tr>
  <tr>
   <td>City:</td>
   <td><v:text_field path="shipping_city" required="true" /></td>
  </tr>
  <tr>
   <td>Province/State:</td>
   <td><v:state_select path="shipping_state" required="uscanada" /></td>
 </tr>
 <tr>
   <td>Postal Code: </td>
    <td>
    <v:text_field path="shipping_zip" required="uscanada" />
  </td>
 </tr>
 <tr>
  <td>Phone:</td>
  <td><v:text_field path="shipping_phone" required="true" /></td>
  </tr>
 </table>
 <div id="buttons"><input type="submit value="Register for an Account" /></a></div>
</v:store:register>