Modify Field List of Symfony Admin Controller Page in Prestashop 1.7

In this blog, we are going to learn how to modify fields list of Admin Controller Symfony page in Prestashop.

To display the custom field in Prestashop admin render list.

Check this link https://webkul.com/blog/how-to-modify-fields-list-in-prestashop/

On Symfony Admin controller pages the render list is created with the help of twig.

Let’s understand the entire process with the help of taking an example of  AdminProductsController.

To check the called function of admin controller list, open the Symfony debug mode.

In Symfony debug mode all the details related to the page are provided. Check the image given below.

In the Admin Product controller, the catalogAction method is called during list render.

The product details are fetched through the ProductDataProvider class and assigned to the twig template file in ProductController.

ProductController File Path:- {PrestaShop_root_folder}/src/PrestaShopBundle/Controller/Admin.
Twig template file path:- src/PrestaShopBundle/Resources/views/Admin

Now we will see how we can add our custom data column in the PrestaShop admin product list?

Step 1:- Register action{controller_name}ListingFieldsModifier hook in your module

Eg:- Register actionAdminProductsListingFieldsModifier hook in your module.

Step 2:- Define the hook function as in the given example.

public function hookActionAdminProductsListingFieldsModifier($list)
{
    if (isset($list['sql_select'])) {
        $list['sql_select']['type'] = array(
            "table"=>"ad",
            "field"=>"type",
            "filtering"=>" %s "
        );
    }
    if (isset($list['sql_table'])) {
        $list['sql_table']['ad'] = array(
            "table"=>"test_table",
            "join"=>"LEFT JOIN",
            "on"=>"ad.`id_product` = p.`id_product`"
        );
    }
}

As in the above process, we have combined our module table with Prestashop table.

Now when the data will be fetched our data will automatically get added to it and assign to the product twig template file.

Now the question arises how we will display the field in the list?

We can only display our field in the list by overriding the twig template file.

Note:: We can only override the twig file from Prestashop 1.7.3.0 above version.

Steps to override the template file.

Identify the template to override

First, we need to identify which Twig template is rendered.

We can check this by using the Debug mode of Symfony Debug toolbar. With this, we can see the list of Twig templates used to render the page.

In our case, we are interested in the product list template.

So we will be overriding list.html.twig and products_table.html.twig inside PrestaShop/Admin/Product/CatalogPage/Lists directory

Now let’s have a look at how we can override it?

As we have found the template path PrestaShop/Admin/Product/CatalogPage/Lists folder, we need to create the same path inside the module view folder.

Eg:- {module_name}/views/PrestaShop/Admin/Product/CatalogPage/Lists

Now create a list.html.twig file and write the code according to your requirement.

 <tbody
    {% if activate_drag_and_drop and has_category_filter %}class="sortable"{% endif %}
    last_sql="{{ last_sql_query|escape('html_attr') }}"
 >
    {% for product in products %}
    {% block product_catalog_form_table_row %}
    <tr data-uniturl="{{ product.unit_action_url|default('#') }}" data-product-id="{{ product.id_product }}">
        <td class="checkbox-column form-group">
            <div class="md-checkbox md-checkbox-inline">
                <label>
                    <input type="checkbox" id="bulk_action_selected_products-{{ product.id_product }}" name="bulk_action_selected_products[]" value="{{ product.id_product }}">
                    <i class="md-checkbox-control"></i>
                </label>
            </div>
        </td>
        ...
        ...
        <td>
            {% if product.type == 1 %}
                <span class="btn btn-primary">Sample Type</span>
            {% else %}
                --
            {%endif%}
        </td>
        ...
        ...
    </tr>
    {% endblock %}
 {% endfor %}

Similarly, we will override the products_table.html.twig to add the heading of the column field.

This is how we can display our custom field in the Symfony admin controller pages.