Drupal 7 E-Commerce Style Custom Login Page

Tags: 

 

The default Drupal 7 login page doesn't really have an e-commerce feel to it. It may also interfere with the checkout workflow you want on your website. In many of my use cases, I want users to create an account before completing their purchase. There isn't a whole lot of clear documentation on how to override the default login page, so I’ll discuss what I've gathered here.

We want something that looks similar to the Commerce Kickstart login page, so if you're using ubercart or if didn't install Drupal with the Kickstart project we need to do this manually.

I use the following workflow for the customer checkout process:

  1. The user adds X number of items to their cart
  2. The user clicks checkout and is redirected to our new login page
  3. The user either uses an existing account or creates a new one
  4. The user is directed back to the checkout page

In order to facilitate the redirection, I use Commerce Checkout Redirect, the rest we have to do ourselves.

Locate your template.php file and add the following code to it replacing "MYTHEME" with the name of your theme:

function MYTHEME_theme() {
    $items = array();
    
    $items['user_login'] = array(
        'render element' => 'form',
        'path' => drupal_get_path('theme', 'MYTHEME') . '/templates',
        //define the file name
        'template' => 'user-login',
        'preprocess functions' => array(
            'MYTHEME_preprocess_user_login'
        ),
    );
    return $items;
}

Next we need to create user-login.tpl.php in your templates directory

<div class="row">
    <div class="span6" style="border-right: 1px solid #CCC; padding-right: 10px;">
        <h2>Login</h2>
        <?php
        print drupal_render($form['name']);
        print drupal_render($form['pass']);
        print drupal_render($form['form_build_id']);
        print drupal_render($form['form_id']);
        ?>
        <a href="/user/password">Forgot your password?</a>
        <?
        print drupal_render($form['actions']);
        ?>
    </div>
    
    <div class="span4" >
        <h2>I don't have an account</h2>
        
        <p>&nbsp;</p>

        <a class="btn btn-success btn-large" href="/user/register">Create an account</a>
       

    </div>
</div>

I use the Twitter bootstrap CSS Framework, which is being used to float the div's. If you're using another framework such as Blueprint you'll have to modify the above code accordingly.

We also want to remove the tabs from above the login block, for this we can modify the print render($tabs); line in page.tpl.php

<?php
      if (in_array('administrator', $user->roles)) {
          //only allow site administrators to see tabs
          print render($tabs);
     }
 ?>

The above code will allow users with the administrator role to still see the tabs on all pages.

Now flush your caches and you should have something like this:

If you have the Devel module installed, you can use dpm($variables) to see a list of everything that's available to you in the template file.

You can further enhance this process by adding a login Facebook icon below the "Create an account" button. I've used FBOAuth which seems to work well.

 

About Greg Somers

Greg Somers has been working in the web development field for over 10 years. He is currently a MASc candidate at the University of Ottawa in the field of Electrical and Computer Engineering.