Forum
Set shipping address as billing address for guests
Hi,
I was wondering how best to tackle a shop checkout / registration form that includes a control like this:
The steps for this would be:
- Add to basket
- Checkout
- Purchase as guest
- Enter basic information as per instructions here
- User can select 'Add a different address' and input their shipping info otherwise use the billing info.
The problems I am currently running into is that the shipping fields are currently hidden with javascript, obviously the validation will still trigger on submit if the user has not set the fields (as 'Same as billing details' is selected).
Toggling disabled='disabled' on the hidden inputs still triggers the validation.
My main questions would be:
- is this even possible?
- if so, how would be best to implement such a checkout flow?
- further still, is this possible for signed in customers?
Below is my customer_create_passwordless.html template file.
<perch:form id="register" method="post" app="perch_shop" action="?guest=true" class="form js-billing-form">
<header class="header-chunky">
<h1 class="header-chunky__title">
Billing Details
</h1>
</header>
<div class="js-billing-watch">
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="first_name" class="form-field__label">
First name
</perch:label>
<div class="form-field__control">
<perch:input id="first_name" type="text" class="text-field text-field--md" required="true" label="First Name" />
</div>
<perch:error for="first_name" type="required">
<span class="form-field__message form-field__message--error">
Please add your first name
</span>
</perch:error>
</div>
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="last_name" class="form-field__label">
Last name
</perch:label>
<div class="form-field__control">
<perch:input id="last_name" type="text" class="text-field text-field--md" required="true" label="Last Name" />
</div>
<perch:error for="last_name" type="required">
<span class="form-field__message form-field__message--error">
Please add your last name
</span>
</perch:error>
</div>
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="email" class="form-field__label">
Email Address (for order confirmation)
</perch:label>
<div class="form-field__control">
<perch:input type="email" id="email" required="true" label="Email" class="text-field text-field--md" helper="PerchMembers_Members::check_email" />
</div>
<perch:error for="email" type="required">
<span class="form-field__message form-field__message--error">
Please enter an email address
</span>
</perch:error>
<perch:error for="email" type="format">
<span class="form-field__message form-field__message--error">
Please check your email address is correct.
</span>
</perch:error>
<perch:error for="email" type="helper">
<span class="form-field__message form-field__message--error">
That email address is already in use.
</span>
</perch:error>
</div>
<perch:input type="hidden" id="password" value="__auto__" />
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="company" class="form-field__label">
Company
</perch:label>
<div class="form-field__control">
<perch:input id="company" type="text" class="text-field text-field--sm" label="Company" />
</div>
</div>
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="address_1" class="form-field__label">
Address line 1
</perch:label>
<div class="form-field__control">
<perch:input id="address_1" type="text" class="text-field text-field--lg" required="true" label="Address 1" />
</div>
<perch:error for="address_1" type="required">
<span class="form-field__message form-field__message--error">
Please add the first line of your address
</span>
</perch:error>
</div>
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="address_2" class="form-field__label">
Address line 2
</perch:label>
<div class="form-field__control">
<perch:input id="address_2" type="text" class="text-field text-field--lg" label="Address 2" />
</div>
</div>
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="town" class="form-field__label">
Town
</perch:label>
<div class="form-field__control">
<perch:input id="town" type="text" class="text-field text-field--md" label="Town" />
</div>
</div>
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="county" class="form-field__label">
County
</perch:label>
<div class="form-field__control">
<perch:input id="county" type="text" class="text-field text-field--md" label="County" />
</div>
</div>
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="postcode" class="form-field__label">
Postcode
</perch:label>
<div class="form-field__control">
<perch:input id="postcode" type="text" class="text-field text-field--sm" label="Postcode" required="true" />
</div>
<perch:error for="address_1" type="required">
<span class="form-field__message form-field__message--error">
Please add your post code
</span>
</perch:error>
</div>
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="country" class="form-field__label">
Country
</perch:label>
<div class="form-field__control">
<perch:input type="select" options="<perch:shop id="country_list" />" value="236" id="country" label="Country" />
</div>
</div>
</div>
</div>
<hr class="form__divider">
<header class="header-chunky header-chunky--compact">
<h1 class="header-chunky__title">
Delivery Details
</h1>
</header>
<div class="toggle-group">
<div class="toggle-group__item">
<label class="toggle">
Same as billing details
<input type="radio" class="toggle__control js-shipping-toggle" name="shipping_as_billing" value="1" checked="checked" />
</label>
</div>
<div class="toggle-group__item">
<label class="toggle">
Add a different address
<input type="radio" class="toggle__control js-shipping-toggle" name="shipping_as_billing" value="0" />
</label>
</div>
</div>
<hr class="form__divider">
<div class="js-shipping-hidden">
<header class="header-chunky">
<h2 class="header-chunky__title">
Shipping Details
</h2>
</header>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="shipping_first_name" class="form-field__label">
First name
</perch:label>
<div class="form-field__control">
<perch:input id="shipping_first_name" type="text" class="text-field text-field--md" required="true" label="First Name" />
</div>
<perch:error for="shipping_first_name" type="required">
<span class="form-field__message form-field__message--error">
Please add your first name
</span>
</perch:error>
</div>
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="shipping_last_name" class="form-field__label">
Last name
</perch:label>
<div class="form-field__control">
<perch:input id="shipping_last_name" type="text" class="text-field text-field--md" required="true" label="Last Name" />
</div>
<perch:error for="shipping_last_name" type="required">
<span class="form-field__message form-field__message--error">
Please add your last name
</span>
</perch:error>
</div>
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="shipping_company" class="form-field__label">
Company
</perch:label>
<div class="form-field__control">
<perch:input id="shipping_company" type="text" class="text-field text-field--sm" label="Company" />
</div>
</div>
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="shipping_address_1" class="form-field__label">
Address line 1
</perch:label>
<div class="form-field__control">
<perch:input id="shipping_address_1" type="text" class="text-field text-field--lg" required="true" label="Address 1" />
</div>
<perch:error for="shipping_address_1" type="required">
<span class="form-field__message form-field__message--error">
Please add the first line of your address
</span>
</perch:error>
</div>
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="shipping_address_2" class="form-field__label">
Address line 2
</perch:label>
<div class="form-field__control">
<perch:input id="shipping_address_2" type="text" class="text-field text-field--lg" label="Address 2" />
</div>
</div>
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="shipping_town" class="form-field__label">
Town
</perch:label>
<div class="form-field__control">
<perch:input id="shipping_town" type="text" class="text-field text-field--md" label="Town" />
</div>
</div>
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="shipping_county" class="form-field__label">
County
</perch:label>
<div class="form-field__control">
<perch:input id="shipping_county" type="text" class="text-field text-field--md" label="County" />
</div>
</div>
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="shipping_postcode" class="form-field__label">
Postcode
</perch:label>
<div class="form-field__control">
<perch:input id="shipping_postcode" type="text" class="text-field text-field--sm" label="Postcode" required="true" />
</div>
<perch:error for="shipping_address_1" type="required">
<span class="form-field__message form-field__message--error">
Please add your post code
</span>
</perch:error>
</div>
</div>
<div class="form__row">
<div class="form-field form-field--stacked">
<perch:label for="shipping_country" class="form-field__label">
Country
</perch:label>
<div class="form-field__control">
<perch:input type="select" options="<perch:shop id="country_list" />" value="236" id="shipping_country" label="Country" />
</div>
</div>
</div>
</div>
<div class="form__row form__row--action">
<perch:input type="submit" class="button button--primary" value="Continue" />
</div>
</perch:form>
You could either remove the fields on submit if the addresses should be the same, or copy the contents from one to the other. Both would work.
Hi Drew,
I've gone with the second option and changed the control to just a checkbox of 'billing is the same as shipping' which copies / clears the values depending on checked state.
Thanks for the help.