Back to Top

Display category choice tree in modern form in PrestaShop 1.7

Updated 8 August 2022

In this blog we are going to learn how to display category choice tree in PrestaShop modern form

category choice tree

PrestaShop 1.7.x.x is using symfony framework and using symfony form classes to build form So we will render category choice tree using predefined classes.

So let’s understand how to achieve it on modern form: –

Searching for an experienced
Prestashop Company ?
Find out More

First, we have to create controller at path



namespace WkMyTestMvc\Controller;

use WkMyTestMvc\Forms\TestType;
use PrestaShopBundle\Controller\Admin\FrameworkBundleAdminController;

class MyTestController extends FrameworkBundleAdminController
    public function createAction()
        $form = $this->createForm(TestType::class);
        return $this->render(
                'form' => $form->createView()

Now we will create form type class and use CategoryChoiceTreeType class at path modules/your-module/src/Forms


namespace WkMyTestMvc\Forms;

use PrestaShopBundle\Form\Admin\Type\CategoryChoiceTreeType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;

Class TestType extends AbstractType {

    public function buildForm(FormBuilderInterface $builder, array $options)
        $disabledCategories = [
            2, // category id
            ->add('category_id', CategoryChoiceTreeType::class, [
                'label' => 'Category choice type',
                'disabled_values' => $disabledCategories,

Here we passed category id 2 in $disabledCategories variable to disable Home category.

Now we will create twig file to render form fields at path modules/your-module/templates/admin

{% extends 'PrestaShopBundle:Admin:layout.html.twig' %}
{% block content %}
<div class="card">
<h3 class="card-header">
    <i class="material-icons">settings</i> {{ 'Choice form types'|trans({}, 'Modules.DemoSymfonyForm.Admin') }}

{% endblock %}

Here we extend default admin layout to display Back-Office interface.

We have done php and twig parts to display category tree on form But there is one thing is reaming that is js components.
PrestaShop use ChoiceTree component for it So use below js code in your js file with proper field id.

$(document).ready(function () {
    // Learn more about components in documentation

    new window.prestashop.component.ChoiceTree('#test_category_id');

That’s all about this blog.

If any issue or doubt in the above step, please feel free to let us know in the comment section.

We would be happy to help.

Also, you can explore our PrestaShop Development Services & a large range of quality PrestaShop Modules.

For any doubt contact us at [email protected].

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home