loginCustomer (JS API v2)

Owned by Perry Tew
Last updated: Nov 01, 2013Version comment
4 min read

Version 2 API only.

loginCustomer

This call is nearly identical to the legacy method loginCustomerProfile, but if this call is successful, it automatically updates the cart to reflect any pricing changes so a second call isn't needed.

Method Signature

boolean ultraCart.loginCustomer(email, password, opts);

Description

Logs a customer in

Parameter

email - the customer's email address (username)

Parameter

password - the customer's password

Parameter

opts - see Making an Asynchronous Call

Result

true if successful, otherwise false


This is a long example, but it's a very good example. It's a renderer (a block of javascript that creates html) that creates the customer info on the left side of a screen. If the customer is logged in, their info is displayed. Along with their information, drop down boxes are created with their address information allowing them to easily select an address for use. If they are not, then a login box is displayed. renderCustomerProfile is attached to the 'cartready' and 'profilechange' events. See the init() docs for information about events.

function login(){
  var email = jQuery('#loginEmail').val();
  var pass = jQuery('#loginPass').val();
  ultraCart.loginCustomer(email, pass);
}

function logout(){
  ultraCart.logoutCustomer();
}

function renderCustomerProfile(){
  var needLogin = true;
  var cart = ultraCart.getCart();
  if(cart != null && cart.loggedIn){
    needLogin = false;
  }

  var container = jQuery('#customerProfileContainer');

  // clear any events before possibly recreating.  remember, render methods can be called to redo state several times.
  // button might not exist - that's fine.
  jQuery('#loginButton').unbind('.ultraCart');
  jQuery('#logoutButton').unbind('.ultraCart');

  var html = '';
  if(needLogin){
    html += "<img src='images/ajax-loader.gif' alt='Please Wait' class='ajaxLoad' style='float:right' />";
    html += "<div class='loginRow'><span class='loginLabel'><label for='loginEmail'>Email:<\/label><\/span><span class='loginField'><input id='loginEmail' type='text' size='50' maxlength='50'/><\/span><div style='clear:both'><\/div><\/div>";
    html += "<div class='loginRow'><span class='loginLabel'><label for='loginPass'>Password:<\/label><\/span><span class='loginField'><input id='loginPass' type='password' size='20' maxlength='30'/><\/span><div style='clear:both'><\/div><\/div>";
    html += "<div><input type='button' value='Login' id='loginButton'/><\/div>";

    container.html(html);
    jQuery('#loginButton').bind('click.ultraCart', login);
  } else {


    jQuery('#shippingAddresses').unbind('.ultraCart');
    jQuery('#billingAddresses').unbind('.ultraCart');

    var profile = cart.customerProfile;
    if(profile){
      html += "<div class='loginRow'><span class='loginLabel'><label for='loginEmail'>Name:<\/label><\/span><span class='loginField'>" + profile.firstName + " " + profile.lastName + "<\/span><div style='clear:both'><\/div><\/div>";
      html += "<div class='loginRow'><span class='loginLabel'><label for='loginEmail'>Email:<\/label><\/span><span class='loginField'>" + profile.email + "<\/span><div style='clear:both'><\/div><\/div>";


      html += "<div class='loginRow'><span class='loginLabel'><label for='shippingAddresses'>Shipping Address:<\/label><\/span><span class='loginField'><select id='shippingAddresses'><option>Select an address or enter one below.</option>";
      if(profile.shippingAddresses){
        for(var i = 0; i < profile.shippingAddresses.length; i++){
          var addr = profile.shippingAddresses[i];
          html += "<option value='" + addr.oid + "'>" + addr.firstName + " " + addr.lastName + ", " + addr.address1 + ", " + addr.address2 + ", "+ addr.city + ", " + addr.state + ", " + addr.postalCode + "<\/option>";
        }
      }
      html += "<\/select><\/span><div style='clear:both'><\/div><\/div>";


      html += "<div class='loginRow'><span class='loginLabel'><label for='billingAddresses'>Billing Address:<\/label><\/span><span class='loginField'><select id='billingAddresses'><option>Select an address or enter one below.</option>";
      if(profile.billingAddresses){
        for(var j = 0; j < profile.billingAddresses.length; j++){
          addr = profile.billingAddresses[j];
          html += "<option value='" + addr.oid + "'>" + addr.firstName + " " + addr.lastName + ", " + addr.address1 + ", " + addr.address2 + ", "+ addr.city + ", " + addr.state + ", " + addr.postalCode + "<\/option>";
        }
      }
      html += "<\/select><\/span><div style='clear:both'><\/div><\/div>";


      html += "<input type='button' value='Logout' id='logoutButton'/><img src='images/ajax-loader.gif' alt='Please Wait' class='ajaxLoad' />";

      container.html(html);
      jQuery('#logoutButton').bind('click.ultraCart', logout);
      jQuery('#shippingAddresses').bind('change.ultraCart', function(){
        var oid = jQuery(this).val();
        if(oid){
          useShippingAddress(oid);
        }
      });

      jQuery('#billingAddresses').bind('change.ultraCart', function(){
        var oid = jQuery(this).val();
        if(oid){
          useBillingAddress(oid);
        }
      });

    }

  }


}


function useShippingAddress(oid){
  var cart = ultraCart.getCart();
  if(!cart) return; // nothing can be done without a cart.

  var profile = cart.customerProfile;
  if(!profile) return;

  var shippingAddresses = profile.shippingAddresses;
  if(!shippingAddresses) return;

  var address = null;
  for(var i = 0; i < shippingAddresses.length; i++){
    if(shippingAddresses[i].oid == oid){
      address = shippingAddresses[i];
      break;
    }
  }

  if(address != null){
    jQuery("#shippingAddress1").val(address.address1);
    jQuery("#shippingAddress2").val(address.address2);
    jQuery("#shippingCity").val(address.city);
    jQuery("#shippingCompany").val(address.company);
    jQuery("#shippingCountry").val(address.country);
    jQuery("#shippingFirstName").val(address.firstName);
    jQuery("#shippingLastName").val(address.lastName);
    jQuery("#shippingPhone").val(address.dayPhone);
    jQuery("#shippingZip").val(address.postalCode);
    jQuery("#shippingState").val(address.state);
    jQuery("#shippingTitle").val(address.title);
  }

}


function useBillingAddress(oid){
  var cart = ultraCart.getCart();
  if(!cart) return; // nothing can be done without a cart.

  var profile = cart.customerProfile;
  if(!profile) return;

  var billingAddresses = profile.billingAddresses;
  if(!billingAddresses) return;

  var address = null;
  for(var i = 0; i < billingAddresses.length; i++){
    if(billingAddresses[i].oid == oid){
      address = billingAddresses[i];
      break;
    }
  }

  if(address != null){
    jQuery("#billingAddress1").val(address.address1);
    jQuery("#billingAddress2").val(address.address2);
    jQuery("#billingCity").val(address.city);
    jQuery("#billingCompany").val(address.company);
    jQuery("#billingCountry").val(address.country);
    jQuery("#billingFirstName").val(address.firstName);
    jQuery("#billingLastName").val(address.lastName);
    jQuery("#billingPhone").val(address.dayPhone);
    jQuery("#billingZip").val(address.postalCode);
    jQuery("#billingState").val(address.state);
    jQuery("#billingTitle").val(address.title);
  }

}