Cleaning up the Customer Fields OCST

[SidFeyDesigns]

I have two questions on this.

The first is this:

Can the "First Name" and "Last Name" fields be combined to be one field of "Full Name"?

Perhaps maybe I just make the "Last Name" Field optional, hide it and rename the label for the "First Name" field as Full Name. Unless his would be bad practice for programs like Shipworks which is what we use.



Second Question:

I have set up the "Other State" fields to be hidden and for US customers and if they change it to another state, that field shows up.

Can I also have the "Other State" field to be hidden for Bill To since the default is <Select One> and not United States Like the Ship To field?

This is the code for the customer fields.

<mvt:item name="customfields" param="Read_Basket('basket', g.saved_fields)" />
<mvt:if expr="NOT ISNULL g.saved_fields" >
    <mvt:assign name="g.ShipFirstName" value="g.saved_fields:ship_fname" />
    <mvt:assign name="g.ShipLastName" value="g.saved_fields:ship_lname" />
    <mvt:assign name="g.ShipEmail" value="g.saved_fields:ship_email" />
    <mvt:assign name="g.ShipCompany" value="g.saved_fields:ship_comp" />
    <mvt:assign name="g.ShipPhone" value="g.saved_fields:ship_phone" />
    <mvt:assign name="g.ShipAddress1" value="g.saved_fields:ship_addr1" />
    <mvt:assign name="g.ShipAddress2" value="g.saved_fields:ship_addr2" />
    <mvt:assign name="g.ShipCity" value="g.saved_fields:ship_city" />
    <mvt:assign name="g.ShipStateSelect" value="g.saved_fields:ship_state" />
    <mvt:assign name="g.ShipState" value="g.saved_fields:ship_state" />
    <mvt:assign name="g.ShipZip" value="g.saved_fields:ship_zip" />
    <mvt:assign name="g.ShipCountry" value="g.saved_fields:ship_cntry" />    
    <mvt:assign name="g.BillFirstName" value="g.saved_fields:bill_fname" />
    <mvt:assign name="g.BillLastName" value="g.saved_fields:bill_lname" />
    <mvt:assign name="g.BillEmail" value="g.saved_fields:bill_email" />
    <mvt:assign name="g.BillCompany" value="g.saved_fields:bill_comp" />
    <mvt:assign name="g.BillPhone" value="g.saved_fields:bill_phone" />
    <mvt:assign name="g.BillAddress1" value="g.saved_fields:bill_addr1" />
    <mvt:assign name="g.BillAddress2" value="g.saved_fields:bill_addr2" />
    <mvt:assign name="g.BillCity" value="g.saved_fields:bill_city" />
    <mvt:assign name="g.BillStateSelect" value="g.saved_fields:bill_state" />
    <mvt:assign name="g.BillState" value="g.saved_fields:bill_state" />
    <mvt:assign name="g.BillZip" value="g.saved_fields:bill_zip" />
    <mvt:assign name="g.BillCountry" value="g.saved_fields:bill_cntry" />
</mvt:if>
<div class="column whole medium-half ship-to">
    <h4 class="fields-heading">
        <span class="controls-heading">Ship To:</span>
        <span id="shipping_controls" class="controls">
            <mvt:if expr="g.Action AND g.shipping_to_show">
                <input name="shipping_to_show" id="shipping_to_show" type="checkbox" value="1" checked />
            <mvt:else>
                <input name="shipping_to_show" id="shipping_to_show" type="checkbox" value="1" />
            </mvt:if>
            <label for="shipping_to_show">same as billing</label>
        </span>
    </h4>
    <div id="shipping_fields">
        <mvt:if expr="g.Basket:cust_id AND g.Customer_Session_Verified">
            <div class="&mvte:global:ShipID_Row;">
                <label class="required" for="ShipID">Saved Address:</label>
                <select name="ShipID" id="shipping_selector">
                    <option value="-1">&lt;New&gt;</option>
                    <mvt:foreach iterator="address" array="customer:addresses">
                        <mvt:if expr="toupper( l.settings:address:fname ) EQ toupper( g.ShipFirstName ) AND
                                         toupper( l.settings:address:lname ) EQ toupper( g.ShipLastName ) AND
                                         toupper( l.settings:address:email ) EQ toupper( g.ShipEmail ) AND
                                         toupper( l.settings:address:comp ) EQ toupper( g.ShipCompany ) AND
                                         toupper( l.settings:address:phone ) EQ toupper( g.ShipPhone ) AND
                                         toupper( l.settings:address:addr1 ) EQ toupper( g.ShipAddress1 ) AND
                                         toupper( l.settings:address:addr2 ) EQ toupper( g.ShipAddress2 ) AND
                                         toupper( l.settings:address:city ) EQ toupper( g.ShipCity ) AND
                                         (
                                            ( ( NOT ISNULL g.ShipStateSelect ) AND ( toupper( l.settings:address:state ) EQ toupper( g.ShipStateSelect ) ) ) OR
                                            ( ( ISNULL g.ShipStateSelect ) AND ( toupper( l.settings:address:state ) EQ toupper( g.ShipState ) ) )
                                         ) AND
                                         toupper( l.settings:address:zip ) EQ toupper( g.ShipZip ) AND
                                         toupper( l.settings:address:cntry ) EQ toupper( g.ShipCountry )">
                            <option value="&mvte:address:id;" selected>&mvte:address:descrip;</option>
                        <mvt:else>
                            <option value="&mvte:address:id;">&mvte:address:descrip;</option>
                        </mvt:if>
                    </mvt:foreach>
                </select>
            </div>
        </mvt:if>
        <div class="&mvte:global:ShipFirstName_Row;">
            <label class="required" for="l-ShipFirstName">First Name:</label>
            <input type="text" name="ShipFirstName" id="l-ShipFirstName" value="&mvte:global:ShipFirstName;" class="input-small-font medium-input-normal-font" />
        </div>
        <div class="&mvte:global:ShipLastName_Row;">
            <label class="required" for="l-ShipLastName">Last Name:</label>
            <input type="text" name="ShipLastName" id="l-ShipLastName" value="&mvte:global:ShipLastName;" class="input-small-font medium-input-normal-font" />
        </div>
        <div class="&mvte:global:ShipEmail_Row;">
            <label class="required" for="l-ShipEmail">Email Address:</label>
            <input type="email" name="ShipEmail" id="l-ShipEmail" value="&mvte:global:ShipEmail;" class="input-small-font medium-input-normal-font" />
        </div>
        <div class="&mvte:global:ShipPhone_Row;">
            <label class="required" for="l-ShipPhone">Phone Number:</label>
            <input type="tel" name="ShipPhone" id="l-ShipPhone" value="&mvte:global:ShipPhone;" class="input-small-font medium-input-normal-font" />
        </div>
        <div class="&mvte:global:ShipCompany_Row;">
            <label class="italic" for="l-ShipCompany">Company:</label>
            <input type="text" name="ShipCompany" id="l-ShipCompany" value="&mvte:global:ShipCompany;" class="input-small-font medium-input-normal-font" />
        </div>
        <div class="&mvte:global:ShipAddress1_Row;">
            <label class="required" for="l-ShipAddress1">Street Address:</label>
            <input type="text" name="ShipAddress1" id="l-ShipAddress1" value="&mvte:global:ShipAddress1;" class="input-small-font medium-input-normal-font" />
        </div>
        <div class="&mvte:global:ShipAddress2_Row;">
            <label class="italic" for="l-ShipAddress2">Address 2:</label>
            <input type="text" name="ShipAddress2" id="l-ShipAddress2" value="&mvte:global:ShipAddress2;" class="input-small-font medium-input-normal-font" placeholder="ex. Suite#, Floor#, Apt.#" />
        </div>
        <div class="&mvte:global:ShipCity_Row;">
            <label class="required" for="l-ShipCity">City:</label>
            <input type="text" name="ShipCity" id="l-ShipCity" value="&mvte:global:ShipCity;" class="input-small-font medium-input-normal-font" />
        </div>
        <mvt:if expr="g.States_Empty">
            <div class="&mvte:global:ShipState_Row;">
                <label class="required" for="l-ShipState">State/Province:</label>
                <input type="text" name="ShipState" id="l-ShipState" value="&mvte:global:ShipState;" class="input-small-font medium-input-normal-font" />
            </div>
            <div class="&mvte:global:ShipZip_Row;">
                <label class="required" for="l-ShipZip">Zip/Postal Code:</label>
                <input type="text" name="ShipZip" id="l-ShipZip" value="&mvte:global:ShipZip;" class="input-small-font medium-input-normal-font" />
            </div>
            <div class="&mvte:global:ShipCountry_Row;">
                <label class="required" for="l-ShipCountry">Country:</label>
                <mvt:item name="countries" param="ShipCountry" />
            </div>
        <mvt:else>
            <div class="&mvte:global:ShipState_Row; ship-state-select">
                <label class="required" for="l-ShipStateSelect">State/Province:</label>
                <mvt:item name="states" param="ShipStateSelect" />
            </div>
            <div class="&mvte:global:ShipZip_Row;">
                <label class="required" for="l-ShipZip">Zip/Postal Code:</label>
                <input type="text" name="ShipZip" id="l-ShipZip" value="&mvte:global:ShipZip;" class="input-small-font medium-input-normal-font" />
            </div>
            <div class="&mvte:global:ShipCountry_Row;">
                <label class="required" for="l-ShipCountry">Country:</label>
                <mvt:item name="countries" param="ShipCountry" />
            </div>
            <div class="&mvte:global:ShipState_Row; ship-other-state">
                <label class="italic" for="l-ShipState">State/Province Outside US:</label>
                <input type="text" name="ShipState" id="l-ShipState" value="&mvte:global:ShipState;" class="input-small-font medium-input-normal-font">
            </div>
        </mvt:if>
    </div>
</div>
<div class="column whole medium-half bill-to">
    <h4 class="fields-heading">
        <span class="controls-heading">Bill To:</span>
        <span id="billing_controls" class="controls">
            <mvt:if expr="g.Action AND g.billing_to_show">
                <input name="billing_to_show" id="billing_to_show" type="checkbox" value="1" class="checkbox" checked />
            <mvt:else>
                <input name="billing_to_show" id="billing_to_show" type="checkbox" value="1" class="checkbox" />
            </mvt:if>
            <label for="billing_to_show">same as shipping</label>
        </span>
    </h4>
    <div id="billing_fields">
        <mvt:if expr="g.Basket:cust_id AND g.Customer_Session_Verified">
            <div class="&mvte:global:BillID_Row;">
                <label class="required" for="BillID">Saved Address:</label>
                <select name="BillID" id="billing_selector">
                    <option value="-1">&lt;New&gt;</option>
                    <mvt:foreach iterator="address" array="customer:addresses">
                        <mvt:if expr="toupper( l.settings:address:fname ) EQ toupper( g.BillFirstName ) AND
                                         toupper( l.settings:address:lname ) EQ toupper( g.BillLastName ) AND
                                         toupper( l.settings:address:email ) EQ toupper( g.BillEmail ) AND
                                         toupper( l.settings:address:comp ) EQ toupper( g.BillCompany ) AND
                                         toupper( l.settings:address:phone ) EQ toupper( g.BillPhone ) AND
                                         toupper( l.settings:address:addr1 ) EQ toupper( g.BillAddress1 ) AND
                                         toupper( l.settings:address:addr2 ) EQ toupper( g.BillAddress2 ) AND
                                         toupper( l.settings:address:city ) EQ toupper( g.BillCity ) AND
                                         (
                                            ( ( NOT ISNULL g.BillStateSelect ) AND ( toupper( l.settings:address:state ) EQ toupper( g.BillStateSelect ) ) ) OR
                                            ( ( ISNULL g.BillStateSelect ) AND ( toupper( l.settings:address:state ) EQ toupper( g.BillState ) ) )
                                         ) AND
                                         toupper( l.settings:address:zip ) EQ toupper( g.BillZip ) AND
                                         toupper( l.settings:address:cntry ) EQ toupper( g.BillCountry )">
                            <option value="&mvte:address:id;" selected>&mvte:address:descrip;</option>
                        <mvt:else>
                            <option value="&mvte:address:id;">&mvte:address:descrip;</option>
                        </mvt:if>
                    </mvt:foreach>
                </select>
            </div>
        </mvt:if>
        <div class="&mvte:global:BillFirstName_Row;">
            <label class="required" for="l-BillFirstName">First Name:</label>
            <input type="text" name="BillFirstName" id="l-BillFirstName" value="&mvte:global:BillFirstName;" class="input-small-font medium-input-normal-font" />
        </div>
        <div class="&mvte:global:BillLastName_Row;">
            <label class="required" for="l-BillLastName">Last Name:</label>
            <input type="text" name="BillLastName" id="l-BillLastName" value="&mvte:global:BillLastName;" class="input-small-font medium-input-normal-font" />
        </div>
        <div class="&mvte:global:BillEmail_Row;">
            <label class="required" for="l-BillEmail">Email Address:</label>
            <input type="email" name="BillEmail" id="l-BillEmail" value="&mvte:global:BillEmail;" class="input-small-font medium-input-normal-font" />
        </div>
        <div class="&mvte:global:BillPhone_Row;">
            <label class="required" for="l-BillPhone">Phone Number:</label>
            <input type="tel" name="BillPhone" id="l-BillPhone" value="&mvte:global:BillPhone;" class="input-small-font medium-input-normal-font" />
        </div>
        <div class="&mvte:global:BillCompany_Row;">
            <label class="italic" for="l-BillCompany">Company:</label>
            <input type="text" name="BillCompany" id="l-BillCompany" value="&mvte:global:BillCompany;" class="input-small-font medium-input-normal-font" />
        </div>
        <div class="&mvte:global:BillAddress1_Row;">
            <label class="required" for="l-BillAddress1">Street Address:</label>
            <input type="text" name="BillAddress1" id="l-BillAddress1" value="&mvte:global:BillAddress1;" class="input-small-font medium-input-normal-font" />
        </div>
        <div class="&mvte:global:BillAddress2_Row;">
            <label class="italic" for="l-BillAddress2">Address 2:</label>
            <input type="text" name="BillAddress2" id="l-BillAddress2" value="&mvte:global:BillAddress2;" class="input-small-font medium-input-normal-font" placeholder="ex. Suite#, Floor#, Apt.#" />
        </div>
        <div class="&mvte:global:BillCity_Row;">
            <label class="required" for="l-BillCity">City:</label>
            <input type="text" name="BillCity" id="l-BillCity" value="&mvte:global:BillCity;" class="input-small-font medium-input-normal-font" />
        </div>
        <mvt:if expr="g.States_Empty">
            <div class="&mvte:global:BillState_Row;">
                <label class="required" for="l-BillState">State/Province:</label>
                <input type="text" name="BillState" id="l-BillState" value="&mvte:global:BillState;" class="input-small-font medium-input-normal-font" />
            </div>
            <div class="&mvte:global:BillZip_Row;">
                <label class="required" for="l-BillZip">Zip/Postal Code:</label>
                <input type="text" name="BillZip" id="l-BillZip" value="&mvte:global:BillZip;" class="input-small-font medium-input-normal-font" />
            </div>
            <div class="&mvt:global:BillCountry_Row;">
                <label class="required" for="l-BillCountry">Country:</label>
                <mvt:item name="countries" param="BillCountry" />
            </div>
        <mvt:else>
            <div class="&mvte:global:BillState_Row; bill-state-select">
                <label class="required" for="l-BillStateSelect">State/Province:</label>
                <mvt:item name="states" param="BillStateSelect" />
            </div>
            <div class="&mvte:global:BillZip_Row;">
                <label class="required" for="l-BillZip">Zip/Postal Code:</label>
                <input type="text" name="BillZip" id="l-BillZip" value="&mvte:global:BillZip;" class="input-small-font medium-input-normal-font" />
            </div>
            <div class="&mvt:global:BillCountry_Row;">
                <label class="required" for="l-BillCountry">Country:</label>
                <mvt:item name="countries" param="BillCountry" />
            </div>
            <div class="&mvte:global:BillState_Row; bill-other-state">
                <label class="italic" for="l-BillState">State/Province Outside US:</label>
                <input type="text" name="BillState" id="l-BillState" value="&mvte:global:BillState;" class="input-small-font medium-input-normal-font" />
            </div>
        </mvt:if>
    </div>
</div>

<div class="column whole tax-fields">
    <mvt:foreach array="tax:fields" iterator="field">
        <mvt:if expr="l.settings:field:invalid">
            <div class="form-row invalid"><label>&mvt:field:prompt;</label><mvt:item name="tax" param="field:code" /></div>
        <mvt:else>
            <div class="form-row"><label>&mvt:field:prompt;</label><mvt:item name="tax" param="field:code" /></div>
        </mvt:if>
    </mvt:foreach>
</div>

<mvt:if expr="g.Basket:cust_id">
    <div class="column whole medium-half update-record form-row align-right">
        <mvt:if expr="g.Update_Customer">
            <label for="l-update-customer"><input type="checkbox" name="Update_Customer" value="Yes" id="l-update-customer" checked /> Update Customer Record With This Information</label>
        <mvt:else>
            <label for="l-update-customer"><input type="checkbox" name="Update_Customer" value="Yes" id="l-update-customer" /> Update Customer Record With This Information</label>
        </mvt:if>
    </div>
</mvt:if>

<mvt:if expr="l.settings:customer:match">
    <mvt:if expr="l.settings:customer:primaddr EQ 'shipping'">
        <script>document.getElementById('billing_to_show').checked = true;</script>
    <mvt:elseif expr="l.settings:customer:primaddr EQ 'billing'">
        <script>document.getElementById('shipping_to_show').checked = true;</script>
    </mvt:if>
</mvt:if>

<mvt:if expr="g.Basket:cust_id AND g.Customer_Session_Verified AND l.settings:customer:address_count">
    <script type="text/javascript">
        var MvCustomerAddresses = [];

        <mvt:foreach iterator="address" array="customer:addresses">
                MvCustomerAddresses[ <mvt:eval expr="int( l.settings:address:id )" /> ] = {
                    "id":       <mvt:eval expr="int( l.settings:address:id )" />,
                "cust_id":  <mvt:eval expr="int( l.settings:address:cust_id )" />,
                "descrip":  "&mvtj:address:descrip;",
                "fname":    "&mvtj:address:fname;",
                "lname":    "&mvtj:address:lname;",
                "email":    "&mvtj:address:email;",
                "comp":     "&mvtj:address:comp;",
                "phone":    "&mvtj:address:phone;",
                "addr1":    "&mvtj:address:addr1;",
                "addr2":    "&mvtj:address:addr2;",
                "city":     "&mvtj:address:city;",
                "state":    "&mvtj:address:state;",
                "zip":      "&mvtj:address:zip;",
                "cntry":    "&mvtj:address:cntry;",
                "resdntl":  <mvt:if expr="l.settings:address:resdntl">true<mvt:else>false</mvt:if>
        };
        </mvt:foreach>
    </script>
</mvt:if>

<script src="&mvte:global:clientside_url;Store_Code=&mvta:store:code;&amp;Filename=ToggleDetails.js&amp;Primaddr=shipping&amp;Shipping=D&amp;Billing=O"></script>

This is the code in the scripts.js file that currently hide or show the other state fields based off country

    jsOCST: function () {

        $('.cart-contents').on('keypress', 'form', function (event) {
            return event.which != 13;
        });

        $(function(){ 
            checkCountry();   
            $("#ShipCountry").on('change',checkCountry);
            function checkCountry() {
              var scountry = $("#ShipCountry").val();
              if( scountry!='US') {
                $(".ship-other-state").css("display", "block");
              } else {
                $(".ship-state-select").css("display", "block");
                $(".ship-other-state").hide();
              }            };
        });

        $(function(){ 
            checkCountry();   
            $("#BillCountry").on('change',checkCountry);
            function checkCountry() {
              var bcountry = $("#BillCountry").val();
              if( bcountry!='US') {
                $(".bill-other-state").css("display", "block");
              } else {
                $(".bill-state-select").css("display", "block");
                $(".bill-other-state").hide();
              }            };
        });

Thanks in advance for any help that can be given.

-Nick

[SidFeyDesigns]

Edit:

Second Question:

I have set up the "Other State" fields to be hidden and for US customers and if they change it to another COUNTRY, that field shows up.

[Matt Zimmermann]

Hi Nick,

I cannot speak to your first question, however you should be able to perform the toggle on the billing information like you want.

[SidFeyDesigns]

Okay would you suggest I just leave the first and last name fields alone?

Do you happen to know what I would have to add to the scripts.js file for the other state field to be hidden for the Bill To section if <Select One>?

Is there an else if statement i can use if the value is null? I believe the value is null for <Select One> on the Country list.

-Nick

[Matt Zimmermann]

Hi Nick,

I would say leave the name fields as is. Your 'not equal to US' check should still pick up the empty value of the 'select one'.

[SidFeyDesigns]

Okay I will leave the fields.

I thought the 'not equal to US' would pick it up too but it doesn't seem to be doing it.

I also noticed if I switch the Ship to country to <Select One>, the 'Other State' field is displayed.

-Nick

[Matt Zimmermann]

Hi Nick,

Try changing them to:

if (scountry !== 'US')

if (bcountry !== 'US')

[SidFeyDesigns]

Unfortunately that doesn't work either. Still the same behavior.

Any Way to have the default Bill To Country be set to United States?

Will that effect the ability to check the box if Bill To is same as Ship To? Or perhaps I could just have that box checked by default?

[Matt Zimmermann]

Hi Nick,

Unfortunately, there isn't a good way to default the country.

You can make the box checked by default though. On OCST, find:

<span id="billing_controls" class="controls">
    <mvt:if expr="g.Action AND g.billing_to_show">
        <input name="billing_to_show" id="billing_to_show" type="checkbox" value="1" class="checkbox" checked />
    <mvt:else>
        <input name="billing_to_show" id="billing_to_show" type="checkbox" value="1" class="checkbox" />
    </mvt:if>
    <label for="billing_to_show">same as shipping</label>
</span>

and replace it with:

<span id="billing_controls" class="controls">
    <input name="billing_to_show" id="billing_to_show" type="checkbox" value="1" class="checkbox" checked />
    <label for="billing_to_show">same as shipping</label>
</span>

[SidFeyDesigns]

Awesome That will work for me.

Thanks for the help Matt.

[Bruce - PhosphorMedia]

RE: Default US. Can't you just Sort the Countries list putting US first? (Under Stores | States : Display Sort Position.

[SidFeyDesigns]

Hmm I hadn't thought of that. Doesn't the value have to be blank or null if the box is checked for Bill to same as ship to?

[SidFeyDesigns]

Unfortunately, there is no option to put US above <Select One> but I still like the idea of having US at the top of the list since its where we ship to the most.

Easier for the customer to find if they have a different billing address that's still in the US.