1

I have a checkout page where a user puts in their shipping address. At the bottom is a checkmark which by default sets the shipping address to be the same as the billing address. This however does not work.

<input type="hidden" name="sameAddress" class="sameAddressValue" value="1">

<div class="use-same-address">
  <label for="sameAddress"><input id="sameAddress" name="sameAddress" type="checkbox" checked="checked"/>
    <span class="label-body">Use same address for billing</span>
  </label>
</div>

If the checkmark is unchecked the sameAddress value is set to 0, the billing address fields appear and you can type in a different billing address. This does work.

I'm using sameAddress = 1 as advised in the documentation but it doesn't seem to work. Here's the relevant js that toggles the billing address and same address value. Is hiding he billing address fields causing some sort of error?

    $("#sameAddress").change(function (e) {
        $('.billingAddress').toggleClass('hidden');
        if (this.checked) {
            $('.required-toggle').removeAttr('required');
            $('.sameAddressValue').val(1);
        } else{
            $('.required-toggle').attr('required', '');
            $('.sameAddressValue').val(0);
        }
    });

Edit: Adding all the form code

<form method="post">

        <input type="hidden" name="action" value="commerce/cart/updateCart">
        <input type="hidden" name="redirect" value="shop/checkout/payment"/>

        {{ getCsrfInput() }}

        <h3>Delivery address</h3>

        <div class="half-width">
            <div class="field">
                <label for="shippingAddress-firstName">First Name</label>
                <input type="text" id="shippingAddress-firstName" name="shippingAddress[firstName]" pattern=".{2,}" required value="">
            </div>

            <div class="field">
                <label for="shippingAddress-lastName">Last Name</label>
                <input type="text" id="shippingAddress-lastName" name="shippingAddress[lastName]" required value="">
            </div>
        </div>

        <div class="field  clear">
            <label for="shippingAddress-businessName">Company (optional)</label>
            <input type="text" id="shippingAddress-businessName" name="shippingAddress[businessName]" value="">
        </div>

        <div class="field  clear">
            <label for="">Email</label>
            <input type="text" value="{{ cart.email }}" name="email" required placeholder="example@site.com"/>
        </div>

        <div class="field  clear">
            <label for="shippingAddress-phone">Phone</label>
            <input type="text" id="shippingAddress-phone" class="u-full-width" placeholder="020 7946 0123" name="shippingAddress[phone]" required value="">
        </div>


        <div class="field clear">
            <label for="shippingAddress-address1">Address 1</label>
            <input type="text" id="shippingAddress-address1" name="shippingAddress[address1]" required value="">
        </div>

        <div class="field clear">
            <label for="shippingAddress-address2">Address 2</label>
            <input type="text" id="shippingAddress-address2" name="shippingAddress[address2]" value="">
        </div>

        <div class="half-width">
            <div class="field">
                <label for="shippingAddress-city">City</label>
                <input type="text" id="shippingAddress-city" name="shippingAddress[city]" required value="">
            </div>

            <div class="field">
                <label for="shippingAddress-postCode">Post Code</label>
                <input type="text" id="shippingAddress-postCode" name="shippingAddress[postCode]" maxlength="8" required value="">
            </div>
        </div>

        <div class="field clear">
            <label for="shippingAddress-countryId">Country</label>
            <select class="address-country u-full-width form-control input-sm" id="shippingAddress-countryId" name="shippingAddress[countryId]">
                <option value="77">United Kingdom</option>
            </select>
        </div>

        {# Use same address button #}
        <input type="hidden" name="sameAddress" class="sameAddressValue" value="1">
        <div class="use-same-address">
            <label for="sameAddress"><input id="sameAddress" name="sameAddress" type="checkbox" checked="checked"/><span class="label-body">Use same address for
        billing</span></label>
        </div>

        <div class="billingAddress hidden">
            <h3>Billing address</h3>

            <div class="half-width">
                <div class="field">
                    <label for="billingAddress-firstName">First Name</label>
                    <input class="required-toggle" type="text" id="billingAddress-firstName" name="billingAddress[firstName]" value="">
                </div>

                <div class="field">
                    <label for="billingAddress-lastName">Last Name</label>
                    <input class="required-toggle" type="text" id="billingAddress-lastName" name="billingAddress[lastName]" value="">
                </div>
            </div>

            <div class="field  clear">
                <label for="billingAddress-businessName">Company (optional)</label>
                <input type="text" id="billingAddress-businessName" name="billingAddress[businessName]" value="">
            </div>

            <div class="field  clear">
                <label for="">Email</label>
                <input class="required-toggle" type="text" value="{{ cart.email }}" name="email" placeholder="email@site.com"/>
            </div>

            <div class="field  clear">
                <label for="billingAddress-phone">Phone</label>
                <input class="required-toggle" type="text" id="billingAddress-phone" class="u-full-width" name="billingAddress[phone]" value="">
            </div>


            <div class="field clear">
                <label for="billingAddress-address1">Address 1</label>
                <input class="required-toggle" type="text" id="billingAddress-address1" name="billingAddress[address1]" value="">
            </div>

            <div class="field clear">
                <label for="billingAddress-address2">Address 2</label>
                <input type="text" id="billingAddress-address2" name="billingAddress[address2]" value="">
            </div>

            <div class="half-width">
                <div class="field">
                    <label for="billingAddress-city">City</label>
                    <input class="required-toggle" type="text" id="billingAddress-city" name="billingAddress[city]" value="">
                </div>

                <div class="field">
                    <label for="billingAddress-postCode">Post Code</label>
                    <input class="required-toggle post-code" type="text" id="billingAddress-postCode" name="billingAddress[postCode]" value="">
                </div>
            </div>

            <div class="field">
                <label for="billingAddress-countryId">Country</label>
                <select class="address-country u-full-width form-control input-sm" id="billingAddress-countryId" name="billingAddress[countryId]">
                    <option value="77">United Kingdom</option>
                </select>
            </div>
        </div>

        <div class="continue-button-wrapper">
            <input class="continue button" type="submit" value="Continue">
        </div>

    </form>
2

Docs

As you can see from both examples, the shipping address is always submitted, and the billingAddress can either be also included, or set to the same address as the shipping address with the sameAddress param.

The shippings address is always submitted -> the billing address can be included or not

Your statement:

At the bottom is a checkmark which by default sets the shipping address to be the same as the billing address. This however does not work.

You set the shipping address like billing address which is the other way around and won't work unless you change the logic

| improve this answer | |
  • Thanks Robin. So if I follow you correctly I should swap them and ask for a billing address first and then have a toggle that asks "Use same address for shipping"? Is that what you mean? – patrick.altair Jan 4 '18 at 13:04
  • I've just tried swapping them Robin (asking for the billing first) but the problem persists. Hmmm – patrick.altair Jan 4 '18 at 13:15
  • You said you set the shipping address to the billing address and that's not going to work (like I posted) now in your comment you say "I swap them and ask for the billing address first" which is the same like your first approach. You must check for the shipping address. You NEED the shipping address, the billing address is optional. You can set the billing address to the shipping address – Robin Schambach Jan 4 '18 at 14:03
  • Oh I'm sorry Robin I wasn't being clear. I've posted the full code of the form to the post now so you can see. I'm asking for the shipping address first, then electively giving the user the option to put in a different billing address if they want. If the user leaves the "Use same address for billing" box ticked though it doesn't work. – patrick.altair Jan 4 '18 at 16:14
  • 1
    Ahh no I found the real problem. I did not expect this to happen since its common sense... You named your checkbox and your hidden field equal. That was causing the problem names should be unique in a form if it's not an array – Robin Schambach Jan 4 '18 at 17:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.