Solspace User & Expresso Store Questions

Question

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>

Answer 1

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.

Answer 2

"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}