Adding Custom Fields to Forms

One of Shopware 6′ the most useful features for shop owners is the ability to add custom fields to almost any entity. Some benefits of custom fields are:

  • Can be defined and edited via admin out-of-the-box
  • Allow almost any field format
  • Can be grouped in logical groups

However, there is no standard mechanism that would make a custom field available for display in the storefront. You will need to extend your theme’s Twig templates to make custom fields visible for shop users. This is a straight-forward task, described very well in the docs: https://developer.shopware.com/docs/guides/plugins/plugins/storefront/using-custom-fields-storefront

In this post, I am going to demonstrate how you can add a custom field to a form, so that a user would even be able to submit additional data.

Get the Code from Github___STEADY_PAYWALL___

For your convenience, I have prepared an example plugin that you might want to download from my Github repository: https://github.com/vanWittlaer/blog-example-two

This article assumes that your are familiar with PHP and Symfony basics. For all relevant Shopware 6 developer documentation, please refer to https://developer.shopware.com/docs/.

To try the example, you need access to a Shopware 6 development environment. In particular to build the storefront components with the Javascript code, webpack must be installed which is usually not the case on hosted servers or production servers in general.

The example adds a custom field to collect the What-3-Words address for customer and order addresses. What-3-Words is a revolutionary new way to define addresses in a 3 x 3 m2 grid based on a combination of three words from a natural language. For example, VanWittlaer’s precise address is simply ///cheesy.welcome.dined – look it up!

Let me quickly walk through the example code:

Define Custom Fields in a Save Way

In general, custom fields may be defined using the admin settings. There is a pitfall however: A field can be as easily be removed as it is defined. So, in a professional environment, this is not what we want. Instead we use the Custom Field Set repository to define our custom field in a way that prevents it from accidental removal or even change in admin.

You will find the code to create (and remove in case of plugin uninstall) the custom field in the plugin’s bootstrap class VanWittlaerExampleTwo.php. Setting the field set’s global attribute to true prevents it from being accidentally touched in admin. Once defined, the field will automatically become available in the related admin forms. Just open a customer record and edit one of its addresses – you’ll find the custom field sections at the lower part of the form.

Add the Custom Field to the Storefront Forms

Making the custom field appear in the storefront is a matter of editing the right Twig template. In our case it is storefront/component/address/address-form.html.twig. The W3W address field is added ahead of the street section in the address form.

Adding the Storefront Forms’ Content to the Database

Now by simple adding the field to the storefront forms, it still won’t be stored in the database, as Shopware’s forms routes (namely UpsertAddressRoute.php and RegisterRoute.php) doen’t not know what to do with this input field. However, they do provide data mapping events that we can subscribe to. See our subscriber in Subscriber/CustomerEventsSubscriber.php. We just need to relate the input field’s id to its corresponding custom field.

Validate Input

A what-3-words address has a particular syntax. Shopware 6′ storefront comes with a form validation Javascript plugin that we can extend to add a validation for the w3w format. You will find our plugin extension in Resources/app/storefront/src/van-wittlaer-example-two/van-wittlaer-example-two.plugin.js.

Questions? Remarks? Improvements?

Please share your thoughts using the comment section below!

Leave a Reply

Your email address will not be published.