Display category choice tree in modern form in PrestaShop 1.7

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

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

First, we have to create controller at path

modules/your-module/src/Controller/MyTestController.php

<?php

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(
            '@Modules/wkmytestmvc/templates/admin/create.html.twig',
            [
                'form' => $form->createView()
            ]
        );
    }
}

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

<?php

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
        ];
        $builder
            ->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') }}
</h3>
{{form_start(form)}}

{{form_end(form)}}
</div>
{% 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
    // https://devdocs.prestashop.com/1.7/development/components/global-components/

    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].