LemonStand Wiki

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.

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