2Hats . 3 minutes

February 6, 2019

How to save and update free text fields from frontend in shopware 5.5.4

Introduction

The free text field management is the default feature of shopware. But we need some custom coding in order to save and update free text fields from the front end. In this blog, I am going to explain how to add a free text field from the back end and how it will be saved from the front end in shopware 5.5.4.

How to add free text field from the backend

You can find the free text field management module from Configuration → Free text field management in shopware back end.

Fig 1: Add free text field from the back end.

In order to add a free text field, you need to select the table from the drop-down in the window. For example, I am going to add occupation in the customer table. Because I want to add the field in front end customer registration and in the profile page. After selecting the table you need to click on the add item button. From the right side of the window please add your column name, column type label etc. and click on the save button.

I added my free text field as occupation and I selected to display in back end option. In the following figure, you can see that the occupation field is automatically added to customer form in admin side.

Fig 2: Free text field in customer edit – back end

You can update occupation from the customer edit option. And also this field will be available in adding new customer form. No custom coding is required in admin side.

How to show free text field in the front end

If you are not using your own theme. You need to create one. You can create a new theme from Configuration -> Theme Manager-> create a new theme. You can specify the theme name, which theme you are going to extend at the time of theme creation. After creating the theme please enable the theme. A new folder will be created in themes/Frontend folder. create a file personal_fieldset.tpl inside /var/www/HTML/shopware_5.5.4/themes/Frontend/IHatsBasicTemplate/frontend/register folder. add the following lines of code inside personal_fieldset.tpl.

{extends file="parent:frontend/register/personal_fieldset.tpl"}
{block name='frontend_register_personal_fieldset_input_mail'}
{$smarty.block.parent}

{block name='frontend_register_personal_fieldset_input_occupation'}
    <div class="register--occupation">
        <input
           name="register[personal][attribute][occupation]"
           type="text"
           required="required"
           aria-required="true"
           placeholder="Occupation {s name="RequiredField" namespace="frontend/register/index"}{/s}"
           id="register_occupation"
           value="{$formData.attribute.occupation|escape}"
           class="register--field is--required{if isset($error_flags.occupation)} has--error{/if}" />
    </div>
{/block}
{/block}

{extends file="parent:frontend/register/personal_fieldset.tpl"}

{block name='frontend_register_personal_fieldset_input_mail'}

{$smarty.block.parent}

{block name='frontend_register_personal_fieldset_input_occupation'}

<input

name="register[personal][attribute][occupation]"

type="text"

required="required"

aria-required="true"

placeholder="Occupation {s name="RequiredField" namespace="frontend/register/index"}{/s}"

id="register_occupation"

value="{$formData.attribute.occupation|escape}"

class="register--field is--required{if isset($error_flags.occupation)} has--error{/if}" />

</div>

{/block}

Shopware is using the Smarty template engine in the front end. You can see the debug console using the {debug} key.

Fig: Free text field in the registration page.

Create new file profile.tpl inside /var/www/html/shopware_5.5.4/themes/Frontend/IHatsBasicTemplate/frontend/address folder and add the following lines of code.

{extends file="parent:frontend/account/profile.tpl"}

{block name="frontend_account_profile_profile_input_lastname"}
    {$smarty.block.parent}
    {block name='frontend_account_profile_profile_input_occupation'}
        <div class="profile--occupation">
            <input
               name="profile[attribute][occupation]"
               type="text"
               required="required"
               aria-required="true"
               placeholder="Occupation"
               value="{$sUserData.additional.user.occupation|escape}"
               class="profile--field is--required{if $errorFlags.occupation} has--error{/if}"
            />
        </div>
    {/block}
{/block}

{extends file="parent:frontend/account/profile.tpl"}

{block name="frontend_account_profile_profile_input_lastname"}

{$smarty.block.parent}

{block name='frontend_account_profile_profile_input_occupation'}

<input

name="profile[attribute][occupation]"

type="text"

required="required"

aria-required="true"

placeholder="Occupation"

value="{$sUserData.additional.user.occupation|escape}"

class="profile--field is--required{if $errorFlags.occupation} has--error{/if}"

</div>

{/block}

Here extends keyword extends the parent file. All blocks in the parent file will be available in the newly created file. So you can add, remove, or extends blocks in parent file from the new theme file.

After saving the code please take the store in a web browser. it will show the changes. It will automatically save the text field value on submitting the form.

Fig: Free text field in the profile page

If you are not familiar with the shopware file system please install profiler plugin from admin side. Profiler plugin is a free plugin and it helps you to view smarty variables, smarty blocks, database queries etc. You can find the plugin from the following URL https://github.com/FriendsOfShopware/FroshProfiler.

Still confused?? No worries we can help you in any kind of Shopware Developments.

Greetings! I'm Aneesh Sreedharan, CEO of 2Hats Logic Solutions. At 2Hats Logic Solutions, we are dedicated to providing technical expertise and resolving your concerns in the world of technology. Our blog page serves as a resource where we share insights and experiences, offering valuable perspectives on your queries.