LemonStand Documentation

Creating the Shipping Information partial

This article continues the Single-Page Checkout article.

The Shipping Information partial contains a form gathering customer billing information:

• shipping first and last names
• shipping email address
• shipping company and phone
• shipping address

The Shipping Information form contains the same set of fields like the Billing Information form, but for the shipping information instead of billing.

Start with creating a new partial. According to the code example in the Checkout Page partial, the name of the Billing Information partial should be shop:checkout_shipping_info. You could use any other names for partials in your store.

The following code demonstrates an example of Shipping Information partial:

<h3>Shipping Information</h3>
<p>Copy <a href="#" onclick="return $(this).getForm().sendRequest(
  'shop:on_copyBillingInfo', 
  {update:{'checkout_page': 'checkout_partial'}})">billing information</a>.<p>
    
<label for="first_name">First Name</label>
<input id="first_name" name="first_name" type="text" value="<?= h($shipping_info->first_name) ?>"/><br/>

<label for="last_name">Last Name</label>
<input id="last_name" name="last_name" type="text" value="<?= h($shipping_info->last_name) ?>"/><br/>

<label for="company">Company</label>
<input id="company" type="text" value="<?= h($shipping_info->company) ?>" name="company"/><br/>

<label for="phone">Phone</label>
<input id="phone" type="text" value="<?= h($shipping_info->phone) ?>" name="phone"/><br/>

<label for="street_address">Street Address</label>
<input id="street_address" name="street_address" type="text" value="<?= h($shipping_info->street_address) ?>"/><br/>

<label for="city">City</label>
<input id="city" type="text" name="city" value="<?= h($shipping_info->city) ?>"/><br/>

<label for="zip">Zip/Postal Code</label>
<input id="zip" type="text" name="zip" value="<?= h($shipping_info->zip) ?>"/><br/>

<label for="country">Country</label>
<select id="country" name="country" onchange="return $('country').getForm().sendRequest(
  'shop:on_updateStateList', {
  extraFields: {
    'country': $('country').get('value'), 
    'control_name': 'state', 
    'control_id': 'state', 
    'current_state': '<?= $shipping_info->state ?>'},
  update: {'shipping_states': 'shop:state_selector'}
})">

  <? foreach ($countries as $country): ?>
    <option <?= option_state($shipping_info->country, $country->id) ?> 
      value="<?= h($country->id) ?>"><?= h($country->name) ?></option>
  <? endforeach ?>
</select><br/>

<label for="state">State</label>
<div id="shipping_states">
  <?= $this->render_partial('shop:state_selector', array(
    'states'=>$states, 
    'control_id'=>'state', 
    'control_name'=>'state', 
    'current_state'=>$shipping_info->state)) ?>
</div>

<input type="hidden" name="checkout_step" value="<?= $checkout_step ?>"/>
<input type="button" value="Next" onclick="return $(this).getForm().sendRequest('on_action', {
  update:{'checkout_page': 'checkout_partial'}}
)"/>

In general the code repeats the Billing Information partial code. The link on the top of the form (Copy billing information) sends an AJAX request to the LemonStand shop:on_copyBillingInfo event handler. It loads the customer billing information previously specified in the Billing Information and inserts it into the corresponding fields of the Shipping Information form.

Implementing the Business Address checkbox

Some shipping methods return different shipping rates for residential and business addresses. Currently only FedEx and UPS shipping modules take into account this information. If you use FedEx or UPS shipping module you can add the Business Address checkbox to the Shipping Information checkout step with the following code:

<label for="is_business">Business address</label>
<input id="is_business" type="checkbox" value="1" name="is_business"
  <?= checkbox_state($shipping_info->is_business) ?> />

See also:

• Cms_Controller class
• Shop_CheckoutAddressInfo class
• Shop_Customer class

Next: Creating the Shipping Method partial
Previous: Creating the Billing Information partial
Return to AJAX-driven single-page checkout