LemonStand Version 1 Has Been Discontinued
This documentation is for LemonStand Version 1. LemonStand is now offered as a cloud-based eCommerce platform.
You can try the new LemonStand and learn about upgrading here.
Creating a Form for Shipping Information
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').val(),
'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'}}
)"/><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="{{ shipping_info.first_name }}"/><br/>
<label for="last_name">Last Name</label>
<input id="last_name" name="last_name" type="text" value="{{ shipping_info.last_name }}"/><br/>
<label for="company">Company</label>
<input id="company" type="text" value="{{ shipping_info.company }}" name="company"/><br/>
<label for="phone">Phone</label>
<input id="phone" type="text" value="{{ shipping_info.phone }}" name="phone"/><br/>
<label for="street_address">Street Address</label>
<input id="street_address" type="text" name="street_address" value="{{ shipping_info.street_address }}"/><br/>
<label for="city">City</label>
<input id="city" type="text" name="city" value="{{ shipping_info.city }}"/><br/>
<label for="zip">Zip/Postal Code</label>
<input id="zip" type="text" name="zip" value="{{ 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').val(),
'control_name': 'state',
'control_id': 'state',
'current_state': '<?= $shipping_info->state ?>'},
update: {'shipping_states': 'shop:state_selector'}
})">
{% for country in countries %}
<option {{ option_state(shipping_info.country, country.id) }} value="{{ country.id }}">{{ country.name }}</option>
{% endfor %}
</select><br/>
<label for="state">State</label>
<div id="shipping_states">
{{
render_partial(
'shop:state_selector',
{
'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) ?> />
<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:
Next: Creating a Form for Shipping Method
Previous: Creating a Form for Billing Information
Return to AJAX-driven single-page checkout