Symfony form in PrestaShop 1.7.8.0

In this blog we discuss about using Symfony form, in PrestaShop 1.7.8.0 and above. Here we are going to demonstrate form built using Symfony form builder and save form data in configuration table.

This example shows demo page where all possible form types are being used. You can use this page as examples of how to integrate inputs in a PrestaShop Symfony module compatible with and PrestaShop 1.7.8.0 and above versions.

Follow the given folder structure :

Step 1 :

Firstly add below code for module main file demoforms.php

declare(strict_types=1);
use PrestaShop\PrestaShop\Adapter\SymfonyContainer;
class DemoForms extends Module
{
    public function __construct()
    {
        $this->name = 'demoforms';
        $this->author = 'Author';
        $this->version = '1.0.0';
        $this->need_instance = 0;
        $this->bootstrap = true;
        parent::__construct();
        $this->displayName = $this->trans('Form by author', [], 'Modules.DemoForms.Admin');
        $this->description = $this->trans('Form types within PrestaShop', [], Modules.DemoForms.Admin');
        $this->ps_versions_compliancy = ['min' => '1.7.8.0', 'max' => _PS_VERSION_];
    }

    public function getTabs()
    {
        return array((
                'class_name' => 'AdminDemoForms',
                'visible' => true,
                'name' => 'Symfony Forms',
                'parent_class_name' => 'CONFIGURE',
        ));
    }

    public function getContent()
    {
        $route = SymfonyContainer::getInstance()->get('router')->generate('demo_first_forms');
        Tools::redirectAdmin($route);
    }
}

Step 2 :

Secondly add below code in routes.yml

demo_first_forms:
  path: /demoforms/first
  methods: [GET, POST]
  defaults:
    _controller: 'PrestaShop\Module\DemoForms\Controller\DemoFirstController::index'
    # Needed to work with tab system
    _legacy_controller: AdminDemoForms
    _legacy_link: AdminDemoForms

Step 3 :

Thirdly add below code in DemoFirstController.php

declare(strict_types=1);
namespace PrestaShop\Module\DemoForms\Controller;
use PrestaShopBundle\Controller\Admin\FrameworkBundleAdminController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

class DemoFirstController extends FrameworkBundleAdminController
{
  public function index(Request $request): Response
  {
    $textFormDataHandler = $this->get('prestashop.module.demoforms.form.demo_first_text_form_data_handler');

    $textForm = $textFormDataHandler->getForm();
    return $this->render('@Modules/demoforms/views/templates/admin/form.html.twig', [
           'demoForms' => $textForm->createView(),
     ]);
  }
}

Step 4 :

After that add below lines in composer.json

{
  "name": "author/demoforms",
  "description": "Symfony forms",
  "license": "AFL-3.0",
  "authors": [{
      "name": "Author team"
    }],
  "autoload": {"psr-4": {
      "PrestaShop\\Module\\DemoForms\\": "src/"
  }},
  "require": {
    "php": ">=7.1.0"
  },
  "config": {
    "preferred-install": "dist",
    "prepend-autoloader": false
  },
  "type": "prestashop-module"
}

After that, run the below command in the module folder which loads namespace(Namespace).

$ composer dumpautoload

Step 5 :

After that add below code in modules/demoforms/src/Form/DemoFirstTextType.php

declare(strict_types=1);
namespace PrestaShop\Module\DemoForms\Form;
use PrestaShop\PrestaShop\Core\ConstraintValidator\Constraints\TypedRegex;
use PrestaShopBundle\Form\Admin\Type\FormattedTextareaType;
use PrestaShopBundle\Form\Admin\Type\TranslatableType;
use PrestaShopBundle\Form\Admin\Type\TranslatorAwareType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Validator\Constraints\Length;

class DemoFirstTextType extends TranslatorAwareType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('formatted_text_area_type', FormattedTextareaType::class, [
                'label' => $this->trans('Formatted text area type', 'Modules.DemoForms.Admin'),
            ])
            ->add('translatable_formatted_text_area_type', TranslatableType::class, [
                'label' => $this->trans('Translatable formatted text area type', 'Modules.DemoForms.Admin'),
                'help' => $this->trans('Throws error if length is > 30', 'Modules.DemoForms.Admin'),
                'type' => FormattedTextareaType::class,
                'required' => false,
                'options' => [
                    'constraints' => [
                        new Length([
                            'max' => 130,
                        ]),
                    ],
                ],
            ]);
    }
}

Step 6 :

At last add below line in modules/demoforms/views/templates/admin/form.html.twig

{% extends '@PrestaShop/Admin/layout.html.twig' %}
{% form_theme demoForms 'PrestaShopBundle:Admin/TwigTemplateForm:prestashop_ui_kit.html.twig' %}

{% block content %}
  {{ form_start(demoForms) }}
  <div class="card">
    <h3 class="card-header">
      <i class="material-icons">settings</i> {{ 'Types'|trans({}, 'Modules.DemoForms.Admin') }}
    </h3>
    <div class="card-block row">
      <div class="card-text">
        {{ form_widget(demoForms) }}
      </div>
    </div>
    <div class="card-footer">
      <div class="d-flex justify-content-end">
        <button class="btn btn-primary float-right" id="save-button">
          {{ 'Save'|trans({}, 'Admin.Actions') }}
        </button>
      </div>
    </div>
  </div>
  {{ form_end(demoForms) }}
{% endblock %}

This is the first part of creating Symfony form and saving form data. In second part we will discuss about services, form data provider and handler to save submitted data using Symfony form in PrestaShop 1.7.8.0.

That’s all.

If you are facing any issues or doubts in the above process, please feel free to contact us through the comment section.

I would be happy to help.

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

For any doubt contact us at [email protected].