1

I have set up User so customers can edit their billing & shipping info in their member account.

Is there a way to output the billing_region & billing_country select fields from Store within a {exp:user:edit} tag? I tried it but it seems to break the form.

Also, if a customer has entered different info for billing & shipping in their member account, when they are logged in and go to checkout, the checkbox for setting the shipping info to "Same as Billing Details" is checked and overwrites what is entered for shipping info in the customer's account.

Is there a way around this?

Thanks for any help!

Added code sample:

<article>
    {exp:store:checkout
        form_class="checkout_form"
        form_id="checkout_form"
        next="store/order-confirmation"
    }
    {if no_items}
        {redirect="store/cart"}
    {/if}
    <div class="main-content">
        <h1>Store</h1>
        <ul class="breadcrumb text-center">
            <li><a href="{path='store'}">Store</a></li>
            <li><a href="{path='store/cart'}">Your Cart</a></li>
            <li><a href="{path='store/customer-details'}" class="active">Customer Details</a></li>
        </ul>
        <hr class="main-rule">
        <div class="two-thirds">
            <h2>Customer Details</h2>
            {if logged_out}
            <p>
                Already a customer? <a href="{path='account/login'}">Login</a>
            </p>
            {/if}
            <h4>Billing Details</h4>
            <div class="one-half alpha">
                <p class="control-group">
                    <label for="billing_name">Name</label>
                    <input type="text" name="billing_name" value="{billing_name}" data-msg-required="Please enter your billing name." required>
                </p>
            </div>
            <div class="one-half gamma">
                <p class="control-group">
                    <label for="order_email">Email</label>
                    <input type="text" name="order_email" value="{order_email}" data-rule-email="true" data-msg-required="Please enter your billing email address." data-msg-email="Please enter a valid billing email address." required>
                </p>
            </div>
            <div class="one-half alpha">
                <p class="control-group">
                    <label for="billing_address1">Address</label>
                    <input type="text" name="billing_address1" value="{billing_address1}" data-msg-required="Please enter your billing address." required>
                </p>
            </div>
            <div class="one-half gamma">
                <p class="control-group">
                    <label for="billing_address2">Apt/Suite</label>
                    <input type="text" name="billing_address2" value="{billing_address2}">
                </p>
            </div>

            <div class="one-half alpha">
                <p class="control-group">
                    <label for="billing_address3">City</label>
                    <input type="text" name="billing_address3" value="{billing_address3}" data-msg-required="Please enter your billing city." required>
                </p>
            </div>
            <div class="one-half gamma">
                <p class="control-group{if error:billing_postcode} error{/if}">
                    <label for="billing_postcode">Zip Code/Postcode</label>
                    <input type="text" name="billing_postcode" value="{billing_postcode}" data-msg-required="Please enter your billing zip." required>
                </p>
            </div>
            <div class="one-half alpha">
                <p class="control-group">
                    <label for="billing_region">State/Region</label>
                    <span class="select-menu">
                        {field:billing_region}
                    </span>
                </p>
            </div>
            <div class="one-half gamma">
                <p class="control-group">
                    <label for="billing_country">Country</label>
                    <span class="select-menu">
                        {field:billing_country}
                    </span>
                </p>
            </div>
            <div class="one-half alpha">
                <p class="control-group">
                    <label for="billing_phone">Phone</label>
                    <input type="text" name="billing_phone" value="{billing_phone}" data-msg-required="Please enter your billing phone number." required>
                </p>
            </div>

            <hr />

            <h4>Shipping Details</h4>

            <p>

                    <input type="checkbox" name="shipping_same_as_billing" value="0" id="shipping_same_as_billing"> Same as Billing Details

            </p>

            <div id="shipping_details_drawer">
                                   {exp:member:custom_profile_data}
                <div class="one-half alpha">
                    <p class="control-group">
                        <label for="shipping_name">Name</label>
                        <input type="text" name="shipping_name" value="{shipping_name}" data-msg-required="Please enter your shipping name." required>
                    </p>
                </div>
                <div class="one-half gamma">
                </div>
                <div class="one-half alpha">
                    <p class="control-group">
                        <label for="shipping_address1">Address</label>
                        <input type="text" name="shipping_address1" value="{shipping_address1}" data-msg-required="Please enter your shipping address." required>
                    </p>
                </div>
                <div class="one-half gamma">
                    <p class="control-group">
                        <label for="shipping_address2">Apt/Suite</label>
                        <input type="text" name="shipping_address2" value="{shipping_address2}">
                    </p>
                </div>
                <div class="one-half alpha">
                    <p class="control-group">
                        <label for="shipping_address3">City</label>
                        <input type="text" name="shipping_address3" value="{shipping_address3}" data-msg-required="Please enter your shipping city." required>
                    </p>
                </div>
                <div class="one-half gamma">
                    <p class="control-group">
                        <label for="shipping_postcode">Zip Code/Postcode</label>
                        <input type="text" name="shipping_postcode" value="{shipping_postcode}" data-msg-required="Please enter your shipping zip." required>
                    </p>
                </div>
                <div class="one-half alpha">
                    <p class="control-group">
                        <label for="shipping_region">State/Region</label>
                        <span class="select-menu">
                            {field:shipping_region}
                        </span>
                    </p>
                </div>
                <div class="one-half gamma">
                    <p class="control-group">
                        <label for="shipping_country">Country</label>
                        <span class="select-menu">
                            {field:shipping_country}
                        </span>
                    </p>
                </div>
                <div class="one-half alpha">
                    <p class="control-group">
                        <label for="shipping_phone">Phone</label>
                        <input type="text" name="shipping_phone" value="{shipping_phone}" data-msg-required="Please enter your shipping phone number." required>
                    </p>
                </div>
            </div>
                            {/exp:member:custom_profile_data}
            {if logged_out}
            <p>
                {field:register_member} <label for="register_member">Register Account? <span class="note">(If your register, we'll save your info so you won't have to enter it next time!)</span></label>
            </p>
            {/if}
            <div id="register_details_drawer">
                <div class="one-half alpha">
                    <p class="control-group">
                        <label for="password">Password</label>
                        <input type="text" id="password" name="password" value="{password}" data-msg-required="Please enter a password." required>
                    </p>
                  </div>
                  <div class="one-half gamma">
                    <p class="control-group">
                        <label for="password_confirm">Confirm Password</label>
                        <input type="text" name="password_confirm" value="{password_confirm}" data-msg-required="Please confirm your password." required>
                    </p>
                  </div>
                  <div class="one-half alpha">
                    <p class="control-group">
                        <label for="username">Username</label>
                        <input type="text" name="username" value="{username}" data-msg-required="Please enter a username." required>
                    </p>
                  </div>
                  <div class="one-half gamma">
                    <p class="control-group">
                        <label for="screen_name">Screen Name</label>
                        <input type="text" name="screen_name" value="{screen_name}" data-msg-required="Please enter a screen name." required>
                    </p>
                  </div>
            </div>
            <div class="alert" style="display:none;"></div>
            <p>
                <a href="{path='store/cart'}" class="button">Back</a>
                <button type="submit" name="next" class="button orange">Review Order</button>
            </p>
            <script>
            $().ready(function() {
                $("#checkout_form").validate({
                    errorLabelContainer: $("#checkout_form div.alert"),
                    rules: {
                        password_confirm: {
                            equalTo: "#password"
                        }
                    },
                    messages: {
                        password_confirm: {
                            equalTo: "Your passwords do not match."
                        }
                    }
                });
            });
            </script>
            <script>
                $('#register_member').change(function() {
                    if (this.checked) {
                        $('#register_details_drawer').slideDown();
                    } else {
                        $('#register_details_drawer').slideUp();
                    }
                });

                if (!$('#register_member').is(':checked')) {
                    $('#register_details_drawer').hide();
                }
            </script>

        </div>
        <div class="one-third">
            {order-info}
        </div>
    </div>
    {/exp:store:checkout}
</article>
  • For future reference, it's best if you start a new thread for each question, otherwise it makes it hard for people to answer only one of your questions. – Adrian Macneil Aug 24 '13 at 19:13
0

Also, if a customer has entered different info for billing & shipping in their member account, when they are logged in and go to checkout, the checkbox for setting the shipping info to "Same as Billing Details" is checked and overwrites what is entered for shipping info in the customer's account.

Is there a way around this?

Yes, you can just set this to be unchecked by default. It's under Store > Settings > General > Default Shipping Address.

That is probably the least disruptive method if you are expecting customers to enter these details before they go through the checkout.

| improve this answer | |
1

"Is there a way to output the billing_region & billing_country select fields from Store"

Yes and No.

Yes you can:

{exp:store:cart}
     <select name="billing_country">
         {billing_country_options}
     </select>
{/exp:store:cart}

EDIT: I originally incorrectly suggested {exp:store:checkout disable_form="yes"} - this is an invalid parameter.

Or just the raw values:

{exp:store:cart}
    {billing_country} = {billing_country_name}
{/exp:store:cart}

Which can work inside your {exp:user:edit} tags.

But the answer is also No - it will only work when the user has an item in their cart, so if they come back at a later date, or have registered prior to adding products into their cart, the tag pairs will fire the {if no_results} conditional and nothing will get output :(

Other routes - you could use a third_party country/region listing plugin such as Reegion Select by Derek Hogue. But then you may have differences in the references for the countries & regions, which may be important for your payment gateway and syncing with Store on Checkout.

Or I've written a plugin that taps into the Expresso Store classes and outputs the regions or countries independently of the {exp:store:checkout} tags - On Devot-ee.

"the checkbox for setting the shipping info to "Same as Billing Details" is checked and overwrites"

You'll need to force this in your template, something like:

{if "{shipping_country}" != "{billing_country}"}
    <input type="checkbox" name="shipping_same_as_billing" value="0" id="deliveryCheckbox">
{if:else}
    <input type="checkbox" name="shipping_same_as_billing" value="1" id="deliveryCheckbox" {shipping_same_as_billing_checked} >
{/if}

If you find that the shipping details are still being incorrect displayed in the checkout form data being generated by Store, then you could output the shipping details from the member details instead:

{exp:member:custom_profile_data}{shipping_country}{/exp:member:custom_profile_data}

Update

...{exp:member:custom_profile_data} tags and get the same results either way. My custom member fields are named the same as the Store fields...

You mention your member fields are named the same as the Store fields, that means that the store tags will be parsing the fields first before the member tags get a look in. So you want to change the parse order to get the member tag to kick in first, so use the parse="inward" parameter.

{exp:store:checkout form_class="checkout_form" form_id="checkout_form" next="store/order-confirmation"}
    ...
    {exp:member:custom_profile_data parse="inward"}
        ...
        <input type="text" name="shipping_address1" value="{shipping_address1}" data-msg-required="Please enter your shipping address." required>
        ...
    {/exp:member:custom_profile_data}
    ...
{/exp:store:checkout}
| improve this answer | |
  • Thank you for your reply. I am still having issues with the "Same as Billing Details". I still get the same info pre-populated in the shipping fields no matter what I try. It seems even if you programmatically uncheck the checkbox, it still thinks it's checked. And I've wrapped the shipping fields in the {exp:member:custom_profile_data} tags but it still shows the same info as billing which I know is not correct. – mediapimp Aug 12 '13 at 13:36
  • Can you update your question to include your new template code (or a link to pastebin or something) which includes the {exp:member:custom_profile_data} tags as well? – Peter Lewis Aug 13 '13 at 8:23
  • I added the code sample. I have the "Same as Billing Details" set to unchecked. I have tried it with and without the {exp:member:custom_profile_data} tags and get the same results either way. My custom member fields are named the same as the Store fields. – mediapimp Aug 13 '13 at 20:58
  • Any more thoughts on this? I added my code. – mediapimp Aug 20 '13 at 13:37
  • Hi, sorry for delay, have updated the answer with what might be causing it not to work. – Peter Lewis Aug 24 '13 at 17:29

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.