Kentico eCommerce move "State" in billing and shipping address

Dcode warner asked on March 23, 2017 17:05

In the check out process Step 3 of 6 - Select billing and shipping address. Client wants to move the "STATE" field after choosing the coutnry "USA" drop down and move it under "ZIP" field. Is this possible? http://prntscr.com/enkchu [kentico 7]

ecommerece shopping cart

Recent Answers

Brenden Kehren answered on March 23, 2017 18:50

Yes you can modify the form control layout OR clone the form control and make the modifications and then use that form control in the shopping cart. Might be easiest (in v7) to modify the default layout of the form control.

0 votesVote for this answer Mark as a Correct answer

Peter Mogilnitski answered on March 23, 2017 19:46 (last edited on March 23, 2017 20:21)

Country and State are tightly connected even if you generate the default layout - you can't separate state from the country without custom code. You get $$input:AddressCountryID$$, State is not rendered in the custom form layout. Although in terms of HTML - Kentico rednders 2 div tags:

<div id="...AddressCountryID_uniSelectorCountry">
<div id="...AddressCountryID_uniSelectorState">

Since it is purely visual change I would just switch them using jQuery:

$("div[id*='addressForm_AddressCountryID_uniSelectorState']").remove().insertBefore("div[id*='addressForm_AddressCountryID_uniSelectorCountry']")

0 votesVote for this answer Mark as a Correct answer

Dcode warner answered on March 23, 2017 22:57

Using javascript/jQuery looks like it may be the option. Since I can't get into the core files to move things around. The only issue is aligning the labels.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on March 23, 2017 23:03

The core file(s) are located in /CMSFormControls/CountrySelector.ascx. All you have to do is clone the control in the Kentico UI and update the layout within the ascx file. Make sure to not remove any server controls though. Here is the contents of the ascx file:

<%@ Control Language="C#" AutoEventWireup="true"
    Inherits="CMSFormControls_CountrySelector" CodeFile="CountrySelector.ascx.cs" %>
<%@ Register src="~/CMSAdminControls/UI/UniSelector/UniSelector.ascx" tagname="UniSelector" tagprefix="cms" %>
<cms:CMSUpdatePanel ID="pnlUpdate" runat="server">
    <ContentTemplate>
        <div style="padding-top: 2px; padding-bottom: 2px;">
            <cms:UniSelector ID="uniSelectorCountry" runat="server" DisplayNameFormat="{%CountryDisplayName%}"
                ObjectType="cms.country" ResourcePrefix="countryselector" AllowAll="false" AllowEmpty="false" />
        </div>
        <asp:PlaceHolder runat="server" ID="plcStates">
            <div style="padding-top: 2px; padding-bottom: 2px;">
                <cms:UniSelector ID="uniSelectorState" runat="server" DisplayNameFormat="{%StateDisplayName%}"
                    ObjectType="cms.state" ResourcePrefix="stateselector" />
            </div>
        </asp:PlaceHolder>
    </ContentTemplate>
</cms:CMSUpdatePanel>

0 votesVote for this answer Mark as a Correct answer