PrestaShop: adding new fields to the customer form
Krystian Podemski
Posted on January 14, 2022
In this article, I will demonstrate how to edit, add, and modify fields available in the customer form, in PrestaShop.
One of the users of a popular Polish PrestaShop group on Facebook did not manage to modify the form fields available during the registration process. His task was to alter the "optin" field. He wanted to change both the content and style of the field.
Code from this article will work with PrestaShop 1.7.7 and above versions.
With help comes the "additionalCustomerFormFields" hook. Since PrestaShop version 1.7.7, it got the &$fields
parameter, which contains a whole array of fields used to create a registration form.
This article describes how we can use it.
How does it work?
As in many other places in the system, we have a parameter that is available as a reference (here's a more detailed explanation of what references are), thanks to that, we can operate with the data freely, and we will apply our modifications after calling this Hook.
To get started, we need, of course, to hook to the appropriate place in the code in our module.
public function install()
{
return parent::install() && $this->registerHook('additionalCustomerFormFields');
}
In our module, we have access to the entire array of fields in the method that handles the hook. You can dump
them, like this:
public function hookAdditionalCustomerFormFields($params)
{
$format = $params['fields'];
dump($format);
}
If we go to the registration page at this point, we will see all the fields:
The rest is just a formality. Let's move on to the real-world use of hookAdditionalCustomerFormFields
.
Adding fields
Each field is an instance of FormField
. This is a class available globally in the system. We can add a new field like this:
public function hookAdditionalCustomerFormFields($params)
{
$format = $params['fields'];
$format['confirmation_email'] = (new FormField())
->setName('confirmation_email')
->setType('email')
->setLabel($this->trans('Confirm your e-mail address', [], 'Modules.Demooverridecustomerformatter.Front'))
->setRequired(true);
$params['fields'] = $format;
}
This way, we added a new field to the form. This field called "confirmation_email" is a typical example of adding an element to force the buyer to confirm their email address.
Deleting fields
If we want to make any of the fields no longer available in the form, we can remove them using PHP's unset
. Example:
public function hookAdditionalCustomerFormFields($params)
{
$format = $params['fields'];
unset($format['id_gender']);
$params['fields'] = $format;
}
Modifying existing fields
Let's see how we can modify fields, which the author of the thread on Facebook cared about. How to change the fields? Let's focus on the optin
field. Let's modify its label and add a style (although this is not something we should do in this application layer).
public function hookAdditionalCustomerFormFields($params)
{
$format = $params['fields'];
$newLabel = '<em class="text-warning">';
$newLabel .= $this->trans(
'I want to receive free gift from your partners',
[],
'Modules.Demooverridecustomerformatter.Front'
);
$newLabel .= '</em>';
$format['optin']->setLabel(
$newLabel
);
$params['fields'] = $format;
}
As we can see, by having access to an instance of a field, we can use methods available in the FormField
class, one of them is setLabel
.
We added em
, color and changed the text, the effect is as follows:
Summary
As we can see, modifying the registration form fields using a dedicated Hook
is quite accessible and allows developers to have complete control over it. As the fields are an array, we can freely modify them, change their order, delete and add new ones.
This article did not cover all the issues related to the registration form and its fields, I did not show how to receive the values sent from the additional fields, verify and possibly save them in the database. There will be time for that at another time.
If you have any questions, let me know :-)
Posted on January 14, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.