DEV Community: Krystian Podemski

PrestaShop: adding new fields to the customer form

Krystian Podemski — Fri, 14 Jan 2022 22:32:57 +0000

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

Better PrestaShop Profiler in version 1.7.8. How to use it in the older versions?

Krystian Podemski — Sat, 08 Jan 2022 18:06:03 +0000

In version 1.7.8 of the PrestaShop returns the ability to collect more precise information about the modules that are displayed on the front office of your store.

Enabling the PrestaShop front office profiler is a great place to start if you need to know more about the performance of your PrestaShop.

The data is collected both for hooks and modules attached to them, but also for widgets. If you don't have PrestaShop 1.7.8, don't worry. The profiler in the new version is very easy to use also with older versions of PrestaShop. In this post I will show you how to use it in the older versions.

I've tested it in PrestaShop 1.7.7, and 1.7.6.

Using the profiler from 1.7.8 in lower versions of PrestaShop

To use profiler in lower versions of PrestaShop, only 4 steps are needed.

First download the PrestaShop 1.7.8 package, you can do it from here.
After unpacking it, copy the tools/profiling folder and move it to the same path in the older PrestaShop version.
Next step is to edit the config/config.inc.php file, just in the place where you currently have this code:

if (_PS_DEBUG_PROFILING_) {
    include_once _PS_TOOL_DIR_ . 'profiling/Controller.php';
    include_once _PS_TOOL_DIR_ . 'profiling/ObjectModel.php';
    include_once _PS_TOOL_DIR_ . 'profiling/Db.php';
    include_once _PS_TOOL_DIR_ . 'profiling/Tools.php';
}

replace it with:

if (_PS_DEBUG_PROFILING_) {
    include_once _PS_TOOL_DIR_ . 'profiling/Profiler.php';
    include_once _PS_TOOL_DIR_ . 'profiling/Controller.php';
    include_once _PS_TOOL_DIR_ . 'profiling/ObjectModel.php';
    include_once _PS_TOOL_DIR_ . 'profiling/Db.php';
    include_once _PS_TOOL_DIR_ . 'profiling/Hook.php';
    include_once _PS_TOOL_DIR_ . 'profiling/Module.php';
    include_once _PS_TOOL_DIR_ . 'profiling/Tools.php';
}

The last step you need to do, is to edit the controllers/admin/AdminLegacyLayoutController.php file and delete:

$this->outPutHtml;

from the end of the display method.

Now if you set _PS_DEBUG_PROFILING_ to true in the config/defines.inc.php, you can use a better version of the profiler in your PrestaShop store.

Summary

All this should give you more information about the health of your front office. You can expect more features available in the front office profiler in the next major version of PrestaShop.

Do you want to know more about the PrestaShop 8, and future of the PrestaShop? Read an article: PrestaShop Beyond 1.7.

Display extra column in the PrestaShop Grid

Krystian Podemski — Thu, 23 Dec 2021 08:14:07 +0000

This article is about PrestaShop version 1.7.7 and above.

The order list in PrestaShop has quite a bit of information about them. One piece of information missing, however, is the name of the selected carrier.

In this article I will walk you through the module that I published here:

https://github.com/kpodemski/kporderlistcarrier

This module allows you to add carrier name to the order list and filter by it. The whole thing is based on Hook, which is available in PrestaShop standard but it works only with the Symfony version of this page. That is why the module will work only for PrestaShop 1.7.7+

How it works. Grid component

At this moment, any list of elements taken from the database, on pages that have been migrated to Symfony in PrestaShop, uses a new component: Grid.

This component is similar to HelperList, which you may know from older versions of PrestaShop. HelperList is still present in the core, but you might want to use a modern alternative, which is Grid.

With this component, we will display a list of elements e.g. from the database. We will add options to search through it, sorting, we can also enable various operations on records, deleting, editing, or other. We can also define them ourselves.

Detailed information about the component is available in PrestaShop developers' documentation, you can find there examples of usage, default data types and much more about this component.

Example module

The solution I linked above uses the ability to modify the lists created by this component, directly from within the module. As you can see, I have attached to two Hooks:



/** @var array */
public const MODULE_HOOKS = [
    'actionOrderGridDefinitionModifier',
    'actionOrderGridQueryBuilderModifier',
];

The names of these Hooks are dynamic. You may want to hook to the customer list instead of the order list by replacing Order with Customer. You can find yet another example that executes hooks like these in the file: /src/Core/Grid/GridFactory.php.



/**
 * {@inheritdoc}
 */
public function getGrid(SearchCriteriaInterface $searchCriteria)
{
    $definition = $this->definitionFactory->getDefinition();
    $data = $this->dataFactory->getData($searchCriteria);

    // Here it is, hook that will modify the Grid data
    $this->hookDispatcher->dispatchWithParameters('action' . Container::camelize($definition->getId()) . 'GridDataModifier', [
        'data' => &$data,
    ]);

    $filterForm = $this->filterFormFactory->create($definition);
    $filterForm->setData($searchCriteria->getFilters());
    return new Grid(
        $definition,
        $data,
        $searchCriteria,
        $filterForm
    );
}

The Hook name is created as follows:
action<Identifier of a given component>GridDataModifier.

The identifier is for example:
const GRID_ID = 'customer';

This const is defined here: /src/Core/Grid/Definition/Factory/CustomerGridDefinitionFactory.php

Once we are hooked to the appropriate places in the core, we can execute our code. As it usually happens, in the implementation of a given Hook we get in the $params array, the appropriate "tools" to be able to modify the selected component.

In the case of hookActionOrderGridDefinitionModifier, we have access to the Grid component definition, which is hidden behind the GridDefinitionInterface implementation.

Using the $definition variable in the code, we can manipulate the columns in the listing. In the case of the sample module, we add the carrier_name column, which we display after the payment column. How do we know that the payment name column is payment? We can use, for example, the developer tools in the Chrome browser:

Next, we assign a filter to the column so that we can look for orders that should be shipped with the carrier we are looking for:



$filters = $definition->getFilters();
$filters->add((new Filter(static::CARRIER_FIELD_NAME, TextType::class))
    ->setTypeOptions([
        'required' => false,
    ])
    ->setAssociatedColumn(static::CARRIER_FIELD_NAME)
);

The code that allows us to retrieve the carrier name is a bit more complicated, but the principle is the same. We get the $params argument to modify the information retrieval for a given list and we do what we need with it.

The Grid component does not use the database legacy code, but the Doctrine one, $params['search_query_builder'] is a Doctrine instance of QueryBuilder.

In the addSelect method we can... yes, add the fields we want to retrieve. This works very similar to the DbQuery class that you may now from PrestaShop core.

It may puzzle you that at this point in the code:



$queryBuilder->addSelect(
    'IF(carrier.name = "0", "'.Configuration::get('PS_SHOP_NAME').'", carrier.name) carrier_name'
);

We check that the record is not "0". We do this because PrestaShop will set "0" when we select a carrier, which is added by default in the installer as "In-Store Pickup". This is a relic of the past, which should be straightened out in version 8.0 🙂

In the following code snippets, we already rely on search criteria. With this code, we control how we sort the listing and possibly filter it.

The whole process may seem very similar for developers who have already worked with Hooks like actionSomethingListingFieldsModifier. And, of course, it is.

Advanced Grid usage

Of course, the sample module that I give you is the simplest example of how to modify the Grid component. Grid is a very flexible mechanism that will allow you to add your own implementation of various mass actions that can be performed on records. There are also many possibilities of formatting the output data, etc.

I encourage you to read the documentation for developers and check the repository with more sample PrestaShop modules here.

btw. this is my first article here, your feedback will be a gift 🙏🏻