checkout.html

{exp:store:checkout
	next="store/confirm"
	disable_javascript="yes"
	require="name|address1|address3|region|postcode|shipping_method|order_email"
	error_handling="inline"
	error_delimiters='<em class="error">|</em>'
}
	{if no_items}
		{redirect="store"}
	{/if}

	<div class="grid-60 break-medium break-medium-bottom-padded-2">
		<h2 class="h3-purple">Shipping Information</h2>
		<div class="section-pop padded-vert-2 padded-horiz-1">
			<ol class="forms">
				<li>
					<div class="field inline-form">
						<label for="shipping_method">Shipping Method</label>
						{field:shipping_method}
						{error:shipping_method}
					</div>
				</li>
				<li>
					<div class="field">
						<label for="shipping-name">Name</label>
						<input type="text" id="shipping-name" name="shipping_name" value="{if shipping_name}{shipping_name}{if:else}{exp:stash:get name='member_name'}{/if}">
						{error:shipping_name}
					</div>
				</li>
				<li>
					<div class="field grid-66 break-smaller break-smaller-bottom-padded-2">
						<label for="order-email">Email</label>
						<input type="text" id="order-email" name="order_email" value="{email}">
						{error:order_email}
					</div>

					<div class="field grid-33 break-smaller">
						<label for="shipping-phone">Phone</label>
						<input type="text" id="shipping-phone" name="shipping_phone" value="{if shipping_phone}{shipping_phone}{if:else}{exp:stash:get name='member_phone'}{/if}">
						{error:shipping_phone}
					</div>
				</li>
				<li>
					<div class="field">
						<label for="shipping-address1">Shipping Address</label>
						<input type="text" id="shipping-address1" name="shipping_address1" value="{if shipping_address1}{shipping_address1}{if:else}{exp:stash:get name='member_address'}{/if}">
						{error:shipping_address1}
					</div>
				</li>
				<li>
					<div class="field">
						<label for="shipping-address2">Shipping Address 2</label>
						<input type="text" id="shipping-address2" name="shipping_address2" value="{if shipping_address2}{shipping_address2}{if:else}{exp:stash:get name='member_address2'}{/if}">
					</div>
				</li>
				<li>
					<div class="field grid-50 break-smaller break-smaller-bottom-padded-2">
						<label for="shipping-address3">City</label>
						<input type="text" id="shipping-address3" name="shipping_address3" value="{if shipping_address3}{shipping_address3}{if:else}{exp:stash:get name='member_city'}{/if}">
						{error:shipping_address3}
					</div>

					<div class="field grid-25 break-smaller break-smaller-bottom-padded-2">
						<label for="shipping-region">State</label>
						<select id="shipping-region" name="shipping_region">
							<option value=""></option>
							{exp:vl_lansinoh:member_regions}
								<option value="{state_abbr}"{if (shipping_region != "" && shipping_region == state_abbr) || "{exp:stash:get name='member_state'}" == "{state_abbr}"} selected{/if}>{state_full}</option>
							{/exp:vl_lansinoh:member_regions}
						</select>
						{error:shipping_region}
					</div>

					<div class="field grid-25 break-smaller">
						<label for="shipping-postcode">Zip Code</label>
						<input type="text" id="shipping-postcode" name="shipping_postcode" value="{if shipping_postcode}{shipping_postcode}{if:else}{exp:stash:get name='member_zip'}{/if}">
						{error:shipping_postcode}
					</div>
				</li>
			</ol>
		</div>

		<h2 class="h3-purple padded-top-6">Billing Information</h2>
		<div class="section-pop padded-vert-2 padded-horiz-1">
			<ol class="forms">
				<li>
					<div class="field field-inline">
						<input type="hidden" name="shipping_same_as_billing" value="0">
						<input type="checkbox" name="shipping_same_as_billing" id="shipping-same-as-billing" class="toggler" data-toggler-target="additional-billing-info"  value="1" {billing_same_as_shipping_checked}>
						<label for="shipping-same-as-billing">Use shipping address for my billing address</label>
					</div>
				</li>
			</ol>

			<ol class="hide forms padded-top-2" id="additional-billing-info">
				<li>
					<div class="field">
						<label for="billing-name">Name</label>
						<input type="text" id="billing-name" name="billing_name">
						{error:billing_name}
					</div>
				</li>
				<li>
					<div class="field grid-33">
						<label for="billing-phone">Phone</label>
						<input type="text" id="billing-phone" name="billing_phone">
						{error:billing_phone}
					</div>
				</li>
				<li>
					<div class="field">
						<label for="billing-address1">Billing Address</label>
						<input type="text" id="billing-address1" name="billing_address1">
						{error:billing_address1}
					</div>
				</li>
				<li>
					<div class="field">
						<label for="billing-address2">Billing Address 2</label>
						<input type="text" id="billing-address2" name="billing_address2">
					</div>
				</li>
				<li class="inc-spacing">
					<div class="field grid-50">
						<label for="billing-address3">City</label>
						<input type="text" id="billing-address3" name="billing_address3">
						{error:billing_address3}
					</div>

					<div class="field grid-25">
						<label for="billing-region">State</label>
						<select id="billing-region" name="billing_region">
							<option value=""></option>
							{exp:vl_lansinoh:member_regions}
								<option value="{state_abbr}"{if (billing_region != "" && billing_region == state_abbr) || "{exp:stash:get name='member_state'}" == "{state_abbr}"} selected{/if}>{state_full}</option>
							{/exp:vl_lansinoh:member_regions}
						</select>
						{error:billing_region}
					</div>

					<div class="field grid-25">
						<label for="billing-postcode">Zip Code</label>
						<input type="text" id="billing-postcode" name="billing_postcode">
						{error:billing_postcode}
					</div>
				</li>
			</ol>
		</div>

		<div class="padded-top-4">
			<button type="submit" name="next" class="btn btn-teal">Next: Payment Information</button>
		</div>
	</div>

	<div class="grid-30 right break-medium">
		{stash:embed name="store:mini-cart" process="start"}
	</div>
{/exp:store:checkout}