Render PrestaShop category tree in the custom form

In this blog, we will learn how to render the native PrestaShop category tree in our custom form. As we know that “HelperForm” class provides an input type “categories” by using this we can render the category tree.

ie:

array(
    'form' => array(
        'input' => array(
            array(
                'type' => 'categories',
                'label' => $this->l('Select categories'),
                'name' => 'categories',
                'required' => true,
                'tree' => array(
                    'root_category' => (int)Category::getRootCategory()->id,
                    'id' => 'id_category',
                    'name' => 'name_category',
                    'use_checkbox' => true,
                    'selected_categories' => array(3,4,5),
                    'disabled_categories' => array(6),
                    'use_search' => true,
                ),
                'desc' => $this->l('You can select one or more categories.')
            ),
        ),
    )
);

But how we can render this category tree when we are using a custom form? To do this, we will use the “HelperTreeCategories” class.

Here is the list of important methods of the “HelperTreeCategories” class:

Method	Description
setTitle()	Title of the category tree
setRootCategory()	Root category for the category tree
setInputName()	Name of the category tree
setSelectedCategories()	An array of the category IDs to display as selected
setUseCheckBox()	Set to “true” if you want to multiple categories selection
setUseSearch()	Set to “true” if you want to display the search box in the category tree
setDisabledCategories()	An array of the category IDs that are to be disabled
render()	The output of the category tree in the HTML format

Add the below code to your module controller/main file:

// Create class instance
$categoryTree = new HelperTreeCategories('custom-categories-tree');

// Set params
$categoryTree->setInputName('wk_custom_categories')
    ->setTitle($this->l('Custom category tree'))
    ->setRootCategory((int)Category::getRootCategory()->id)
    ->setUseCheckBox(true)
    ->setUseSearch(true)
    ->setSelectedCategories(array(3, 4, 5))
    ->setDisabledCategories(array(6));

// Assign category tree
$this->context->smarty->assign(array(
    'categoryTree' => $categoryTree->render()
));

Note: You must have to pass the ID of the category tree as the first constructor parameter when creating the “HelperTreeCategories” class instance. ID parameter is mandatory. You can also pass some other optional parameters like the title of the category tree, the ID of the root category, language ID, and shop restriction.

$categoryTree = new HelperTreeCategories('<id>', '<title>', '<langID>', '<useShopRestriction>');

Add the below code in your custom form template file:

<div class="panel">
	<h3><i class="icon icon-credit-card"></i> {l s='Custom category tree' mod='customcategorytree'}</h3>
	<form id="custom-category-tree-form" class="form-horizontal" action="" method="post">
        <div class="form-wrapper">
            <div class="form-group">
                <label class="control-label col-lg-3 required">{l s='Custom category tree' mod='customcategorytree'}</label>
                <div class="col-lg-9">
                    {$categoryTree}
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <button type="submit" value="1" id="module_form_submit_btn" name="submitCustomcategorytreeModule" class="btn btn-default pull-right">
                <i class="process-icon-save"></i> {l s='Save' mod='customcategorytree'}
            </button>
        </div>
    </form>
</div>

The category tree will look like this:

That’s all about this blog.

If any issue or doubt please feel free to mention it in the comment section.

I 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 support@webkul.com.