PrestaShop: adding new fields to the customer form

PrestaShop: adding new fields to the customer form

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:

form fields dump PrestaShop

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:

example of modified customer form in PrestaShop

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 :-)