Request Quote

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.

. . .

Comments (7)

Add Your Comment

  • langziyang
    very nice,from 1.7.5 version,module admin controller can create own “modern” controllers!can you write some demo code?
    • Sanjay Singh
      Hello,
      Recently we are not having any demo code.
      While creating a modern module admin controller we get errors from the symphony end.
  • Mad
    Hi, can you explain me differently the first part of post?
    I need to add a column in product list and with your tutorial i have create the override of twig but i need to get supplementary information of the every product in a custom table in DB (no PS table and without _DB_PREFIX).

    Is it possible? In first part of the post i can’t if the hook can help me in this situation.

    Thanks

    • Sanjay Singh
      Hi,
      You need to register the ‘hookActionAdminProductsListingFieldsModifier‘ hook in your module and set the value of the parameter according to your requirement.
      In this hook you can set the following parameters:
      ‘sql_select’, ‘sql_table’, ‘sql_where’, ‘sql_group_by’, ‘sql_order’, ‘sql_limit’
      By default, Prestashop creates the query with _DB_PREFIX. So if there is no table found with _DB_PREFIX.`your_table_name` then it will throw an error message. So it is necessary to create a table starting with _DB_PREFIX for this case.
  • swans
    hello, my questions is what hook should be called when if we want to add new input field in product image form?
    • Sanjay Singh
      Hello,
      There is a displayAdminProductsMainStepLeftColumnMiddle hook after summary tab in the admin product page.
      Check the screenshot(https://prnt.sc/mep6ey)
    • Sanjay Singh
      Hello,
      If you want to add a new field after product image in admin product controller then you can use displayAdminProductsMainStepLeftColumnMiddle hook to display the custom input field which will be displayed after the summary tab.
  • css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close