Presta 8 - How to modify address form layout (on checkout page) - fields in two columns

[Butch0071]

Hello,

I am wondering how is it possible for such obvious thing to be such complicated to achieve, how for gods sake someone could think of it to make it work like this..it doesn't make any sense.. Maybe I am missing something and that is the problem

the thing is forms, forms, forms. Let see checkout step 2 and address form. I need to make it look nice - by default it so doesn't.
Hot to put name and surname in the same line? in one row?
Or to make a country select field no full site width? or a input for postal code to be no full page width?

I know there is form-field.tpl file but how to modify it to display two fields in a row and the others not?
in Presta 8 it looks like this:

   
{if isset($field.type)}
{if $field.type == 'hidden'}

    {block name='form_field_item_hidden'}
        <input type="hidden" name="{$field.name}" value="{$field.value}">
    {/block}

{else}
    <div class="form-group row{if !empty($field.errors)} has-error{/if}{if !$field.required} field-optional{/if}">
        {if isset($field.show_label) && $field.show_label != false || !isset($field.show_label)}
            <label class="col-md-3 form-control-label{if $field.required} required{/if}">
                {if $field.type !== 'checkbox'}
                    {$field.label}
                {/if}
            </label>
        {/if}
        <div class="col-md-9{if ($field.type === 'radio-buttons')} form-control-valign{/if}">
            <div class="relative">
                {if $field.type === 'select'}

                    {block name='form_field_item_select'}
                        <select class="form-control form-control-select" name="{$field.name}" {if $field.required}required{/if}>
                            <option value disabled selected>{l s='-- please choose --' d='Shop.Forms.Labels'}</option>
                            {foreach from=$field.availableValues item="label" key="value"}
                                <option value="{$value}" {if $value eq $field.value} selected {/if}>{$label}</option>
                            {/foreach}
                        </select>
                    {/block}

                {elseif $field.type === 'countrySelect'}
                    {block name='form_field_item_country'}
                        <select class="form-control form-control-select js-country" name="{$field.name}"
                            {if $field.required}required{/if}>
                            <option value disabled selected>{l s='-- please choose --' d='Shop.Forms.Labels'}</option>
                            {foreach from=$field.availableValues item="label" key="value"}
                                <option value="{$value}" {if $value eq $field.value}selected{/if}>{$label}</option>
                            {/foreach}
                        </select>
                    {/block}

                {elseif $field.type === 'radio-buttons'}

                    {block name='form_field_item_radio'}
                        {foreach from=$field.availableValues item="label" key="value"}
                            <label class="radio-inline">
                                <span class="custom-radio">
                                    <input name="{$field.name}" type="radio" value="{$value}" {if $field.required}required{/if}
                                        {if $value eq $field.value} checked{/if}>
                                    <span></span>
                                </span>
                                {$label}
                            </label>
                        {/foreach}
                    {/block}
                {elseif $field.type === 'checkbox'}

                    {block name='form_field_item_checkbox'}
                        <span class="custom-checkbox">
                            <input name="{$field.name}" id="{$field.name}" type="checkbox" value="1"
                                {if $field.value}checked="checked" {/if} {if $field.required}required{/if}>
                            <span>
                                {svgic id='done' class='svgic-done'}
                            </span>
                            {* <label for="{$field.name}">{$field.label nofilter}</label> *}
                            <label for="{$field.name}">{$field.label|unescape:'html' nofilter}</label>
                        </span>
                    {/block}

                {elseif $field.type === 'date'}

                    {block name='form_field_item_date'}
                        <input class="form-control" type="date" value="{$field.value}"
                            placeholder="{if isset($field.availableValues.placeholder)}{$field.availableValues.placeholder}{/if}">
                        {if isset($field.availableValues.comment)}
                            <span class="form-control-comment">
                                {$field.availableValues.comment}
                            </span>
                        {/if}
                    {/block}

                {elseif $field.type === 'birthday'}
                    {block name='form_field_item_birthday'}
                        <div class="js-parent-focus">
                            {html_select_date field_order=DMY time={$field.value}
                                field_array={$field.name}
                                prefix=false
                                reverse_years=true
                                field_separator='<br>'
                                day_extra='class="form-control form-control-select"'
                                month_extra='class="form-control form-control-select"'
                                year_extra='class="form-control form-control-select"'
                                day_empty={l s='-- day --' d='Shop.Forms.Labels'}
                                month_empty={l s='-- month --' d='Shop.Forms.Labels'}
                                year_empty={l s='-- year --' d='Shop.Forms.Labels'}
                                start_year={'Y'|date}-100 end_year={'Y'|date}
                            }
                        </div>
                    {/block}

                {elseif $field.type === 'password'}

                    {block name='form_field_item_password'}
                        <div class="input-group-dis js-parent-focus">
                            {if (isset($field.icon))}<div class="icon-true relative">{/if}
                                <input class="form-control js-child-focus js-visible-password" name="{$field.name}" type="password"
                                    placeholder="{l s='Password' d='Shop.Theme.Global'}" value=""
                                    pattern=".{literal}{{/literal}5,{literal}}{/literal}" {if $field.required}required{/if}>
                                <span class="focus-border"><i></i></span>
                                {if (isset($field.icon))}
                                    {svgic id={$field.icon} class='input-icon'}
                                </div>
                            {/if}
                            <span class="input-group-btn" style="display:none">
                                <button class="btn" type="button" data-action="show-password"
                                    data-text-show="{l s='Show' d='Shop.Theme.Actions'}"
                                    data-text-hide="{l s='Hide' d='Shop.Theme.Actions'}">
                                    {l s='Show' d='Shop.Theme.Actions'}
                                </button>
                            </span>
                        </div>
                    {/block}

                {else}

                    {block name='form_field_item_other'}
                        <div class="relative">
                            {if (isset($field.icon))}<div class="icon-true">{/if}
                                <input
                                    name="{$field.name}"
                                    class="form-control"
                                    value="{$field.value}"
                                    type="{if $field.type == 'firstname'}text{else}{$field.type}{/if}" 
                                    placeholder="{if isset($field.availableValues.placeholder)}{$field.availableValues.placeholder}{else}{$field.label}{/if}"
                                    {if $field.maxLength} maxlength="{$field.maxLength}"{/if}
                                    {if $field.required} required{/if}>
                                    <span class="focus-border"><i></i></span>
                            {if (isset($field.icon))}{svgic id={$field.icon} class='input-icon'}</div>{/if}
                        </div>
                        {if isset($field.availableValues.comment)}
                            <span class="form-control-comment">
                                {$field.availableValues.comment}
                            </span>
                        {/if}
                    {/block}
                {/if}

                {block name='form_field_errors'}
                    {include file='_partials/form-errors.tpl' errors=$field.errors}
                {/block}

                <div class="form-control-comment">
                    {block name='form_field_comment'}
                        {if (!$field.required && !in_array($field.type, ['radio-buttons', 'checkbox', 'password']))}
                            {l s='Optional' d='Shop.Forms.Labels'}
                        {/if}
                    {/block}
                </div>

            </div>
        </div>
    </div>
{/if}
{/if}

It is easy to make a change for all fields but what if I want it only in address form? and only for some fields?

Looking forward for your help. There is a lot of stuff about adding custom fields etc but found not much about formatting of existing fields to look more friendly and more logic.

 

 

[Butch0071]

  
{if isset($field.type)}
{if $field.type == 'hidden'}

    {block name='form_field_item_hidden'}
        <input type="hidden" name="{$field.name}" value="{$field.value}">
    {/block}

{else}



    {if $field.name == 'firstname' }
        <div class="row">
            <div class="col-md-6">
                {block name='form_field_item_firstname'}
                    <div class="form-group row{if !empty($field.errors)} has-error{/if}{if !$field.required} field-optional{/if}">
                        {if isset($field.show_label) && $field.show_label != false || !isset($field.show_label)}
                            <label class="col-md-3 form-control-label{if $field.required} required{/if}">
                                {if $field.type !== 'checkbox'}
                                    {$field.label}
                                {/if}
                            </label>
                        {/if}
                        <div class="col-md-9">
                            <div class="relative">
                                {if (isset($field.icon))}<div class="icon-true">{/if}
                                    <input
                                            name="{$field.name}"
                                            class="form-control"
                                            value="{$field.value}"
                                            type="{if $field.type == 'firstname'}text{else}{$field.type}{/if}"
                                            placeholder="{if isset($field.availableValues.placeholder)}{$field.availableValues.placeholder}{else}{$field.label}{/if}"
                                            {if $field.maxLength} maxlength="{$field.maxLength}"{/if}
                                            {if $field.required} required{/if}>
                                    <span class="focus-border"><i></i></span>
                                    {if (isset($field.icon))}{svgic id={$field.icon} class='input-icon'}</div>{/if}
                            </div>
                            {if isset($field.availableValues.comment)}
                                <span class="form-control-comment">
                                {$field.availableValues.comment}
                            </span>
                            {/if}
                        </div>
                    </div>

                {/block}
            </div>
    {/if}

    {if $field.name == 'lastname'}

            <div class="col-md-6">
                {block name='form_field_item_lastname'}
                    <div class="form-group row{if !empty($field.errors)} has-error{/if}{if !$field.required} field-optional{/if}">
                        {if isset($field.show_label) && $field.show_label != false || !isset($field.show_label)}
                            <label class="col-md-3 form-control-label{if $field.required} required{/if}">
                                {if $field.type !== 'checkbox'}
                                    {$field.label}
                                {/if}
                            </label>
                        {/if}
                        <div class="col-md-9">
                            <div class="relative">
                                {if (isset($field.icon))}<div class="icon-true">{/if}
                                    <input
                                            name="{$field.name}"
                                            class="form-control"
                                            value="{$field.value}"
                                            type="{if $field.type == 'firstname'}text{else}{$field.type}{/if}"
                                            placeholder="{if isset($field.availableValues.placeholder)}{$field.availableValues.placeholder}{else}{$field.label}{/if}"
                                            {if $field.maxLength} maxlength="{$field.maxLength}"{/if}
                                            {if $field.required} required{/if}>
                                    <span class="focus-border"><i></i></span>
                                    {if (isset($field.icon))}{svgic id={$field.icon} class='input-icon'}</div>{/if}
                            </div>
                            {if isset($field.availableValues.comment)}
                                <span class="form-control-comment">
                                {$field.availableValues.comment}
                            </span>
                            {/if}
                        </div>
                    </div>

                {/block}
            </div>
    </div>
    {/if}

    {if $field.name == 'postcode' }
        <div class="row">
        <div class="col-md-6">
            {block name='form_field_item_postcode'}
                <div class="form-group row{if !empty($field.errors)} has-error{/if}{if !$field.required} field-optional{/if}">
                    {if isset($field.show_label) && $field.show_label != false || !isset($field.show_label)}
                        <label class="col-md-3 form-control-label{if $field.required} required{/if}">
                            {if $field.type !== 'checkbox'}
                                {$field.label}
                            {/if}
                        </label>
                    {/if}
                    <div class="col-md-9">
                        <div class="relative">
                            {if (isset($field.icon))}<div class="icon-true">{/if}
                                <input
                                        name="{$field.name}"
                                        class="form-control"
                                        value="{$field.value}"
                                        type="{if $field.type == 'firstname'}text{else}{$field.type}{/if}"
                                        placeholder="{if isset($field.availableValues.placeholder)}{$field.availableValues.placeholder}{else}{$field.label}{/if}"
                                        {if $field.maxLength} maxlength="{$field.maxLength}"{/if}
                                        {if $field.required} required{/if}>
                                <span class="focus-border"><i></i></span>
                                {if (isset($field.icon))}{svgic id={$field.icon} class='input-icon'}</div>{/if}
                        </div>
                        {if isset($field.availableValues.comment)}
                            <span class="form-control-comment">
                                {$field.availableValues.comment}
                            </span>
                        {/if}
                    </div>
                </div>

            {/block}
        </div>
    {/if}

    {if $field.name == 'city'}

        <div class="col-md-6">
            {block name='form_field_item_city'}
                <div class="form-group row{if !empty($field.errors)} has-error{/if}{if !$field.required} field-optional{/if}">
                    {if isset($field.show_label) && $field.show_label != false || !isset($field.show_label)}
                        <label class="col-md-3 form-control-label{if $field.required} required{/if}">
                            {if $field.type !== 'checkbox'}
                                {$field.label}
                            {/if}
                        </label>
                    {/if}
                    <div class="col-md-9">
                        <div class="relative">
                            {if (isset($field.icon))}<div class="icon-true">{/if}
                                <input
                                        name="{$field.name}"
                                        class="form-control"
                                        value="{$field.value}"
                                        type="{if $field.type == 'firstname'}text{else}{$field.type}{/if}"
                                        placeholder="{if isset($field.availableValues.placeholder)}{$field.availableValues.placeholder}{else}{$field.label}{/if}"
                                        {if $field.maxLength} maxlength="{$field.maxLength}"{/if}
                                        {if $field.required} required{/if}>
                                <span class="focus-border"><i></i></span>
                                {if (isset($field.icon))}{svgic id={$field.icon} class='input-icon'}</div>{/if}
                        </div>
                        {if isset($field.availableValues.comment)}
                            <span class="form-control-comment">
                                {$field.availableValues.comment}
                            </span>
                        {/if}
                    </div>
                </div>

            {/block}
        </div>
        </div>
    {/if}

    {if $field.name == 'address2' }{/if}

    {if $field.name == 'id_country' }
        <div class="row">
        <div class="col-md-6">
            {block name='form_field_item_country'}
                <div class="form-group row{if !empty($field.errors)} has-error{/if}{if !$field.required} field-optional{/if}">
                    {if isset($field.show_label) && $field.show_label != false || !isset($field.show_label)}
                        <label class="col-md-3 form-control-label{if $field.required} required{/if}">
                            {if $field.type !== 'checkbox'}
                                {$field.label}
                            {/if}
                        </label>
                    {/if}
                    <div class="col-md-9">
                        <div class="relative">

                                <select class="form-control form-control-select js-country" name="{$field.name}"
                                        {if $field.required}required{/if}>
                                    <option value disabled selected>{l s='-- please choose --' d='Shop.Forms.Labels'}</option>
                                    {foreach from=$field.availableValues item="label" key="value"}
                                        <option value="{$value}" {if $value eq $field.value}selected{/if}>{$label}</option>
                                    {/foreach}
                                </select>

                        </div>
                        {if isset($field.availableValues.comment)}
                            <span class="form-control-comment">
                                {$field.availableValues.comment}
                            </span>
                        {/if}
                    </div>
                </div>

            {/block}
        </div>
    {/if}

    {if $field.name == 'phone'}

        <div class="col-md-6">
            {block name='form_field_item_phone'}
                <div class="form-group row{if !empty($field.errors)} has-error{/if}{if !$field.required} field-optional{/if}">
                    {if isset($field.show_label) && $field.show_label != false || !isset($field.show_label)}
                        <label class="col-md-3 form-control-label{if $field.required} required{/if}">
                            {if $field.type !== 'checkbox'}
                                {$field.label}
                            {/if}
                        </label>
                    {/if}
                    <div class="col-md-9">
                        <div class="relative">
                            {if (isset($field.icon))}<div class="icon-true">{/if}
                                <input
                                        name="{$field.name}"
                                        class="form-control"
                                        value="{$field.value}"
                                        type="{if $field.type == 'firstname'}text{else}{$field.type}{/if}"
                                        placeholder="{if isset($field.availableValues.placeholder)}{$field.availableValues.placeholder}{else}{$field.label}{/if}"
                                        {if $field.maxLength} maxlength="{$field.maxLength}"{/if}
                                        {if $field.required} required{/if}>
                                <span class="focus-border"><i></i></span>
                                {if (isset($field.icon))}{svgic id={$field.icon} class='input-icon'}</div>{/if}
                        </div>
                        {if isset($field.availableValues.comment)}
                            <span class="form-control-comment">
                                {$field.availableValues.comment}
                            </span>
                        {/if}
                    </div>
                </div>

            {/block}
        </div>
        </div>
    {/if}




    {if $field.name != 'lastname' && $field.name != 'firstname' && $field.name != 'postcode' && $field.name != 'city' && $field.name != 'address2' && $field.name != 'id_country' && $field.name != 'phone'}

    <div class="form-group row{if !empty($field.errors)} has-error{/if}{if !$field.required} field-optional{/if}">...
      /* here further form-fields.tpl default code for generating form fields */

I manage to solve it with something like this - not so perfect but seems to work.