Cómo crear una pestaña personalizada en la página de producto de su back office

En este blog, aprenderemos cómo crear una pestaña personalizada en la página de producto de su back office. A continuación, definiremos nuestros servicios Symfony en el módulo y utilizaremos los componentes existentes. Puede explorar nuestros servicios de desarrollo PrestaShop y una amplia gama de módulos PrestaShop de calidad. Aquí mostramos el proceso paso a paso con un módulo de muestra «wktestmodule». Primero, cree un módulo con un archivo compositor.json según sus necesidades. Paso 1: Crear la clase de módulo Aquí, hemos creado el archivo de clase de módulo “wktestmodule/wktestmodule.php”. En esta clase, estamos inicializando el formulario, la pestaña de controladores de producto y los campos del formulario. declarar(tipos_estrictos=1); utilice PrestaShop\Module\WkTestModule\Form\Modifier\ProductFormModifier; utilizar PrestaShop\PrestaShop\Core\Domain\Product\ValueObject\ProductId; clase WkTestModule extiende el módulo { public function __construct() { $this->name = ‘wktestmodule’; $this->tab = ‘front_office_features’; $esta->versión = ‘1.0.0’; $this->need_instance = 0; $this->bootstrap = verdadero; padre::__build(); $this->displayName = $this->l(‘Webkul’); $this->description = $this->l(‘Tipos de módulos en PrestaShop’); $this->ps_versions_compliancy = [‘min’ => ‘8.1’, ‘max’ => _PS_VERSION_]; } /** * @return bool */ public function install() { return parent::install() && $this->registerHook([‘actionProductFormBuilderModifier’]); } /** * Modificar el generador de formularios del producto * * @param array $params */ public function hookActionProductFormBuilderModifier(array $params): void { /** @var ProductFormModifier $productFormModifier */ $productFormModifier = $this->get( ProductFormModifier : :clase); $IDProducto = isset($params[‘id’])? nuevo ProductID((int) $params[‘id’]): nulo; $productFormModifier->modificar($productId, $params[‘form_builder’]); } } A continuación, en la consola en la raíz del módulo, ejecute el comando dump-autoload Composer. Esto generará una carpeta de proveedor que contiene un archivo autoload.php que permite el uso de su espacio de nombres o clases definidas en el mapa de clases. Paso 2: Definir el servicio Cree un archivo services.yml dentro de la carpeta wktestmodule/config/services.yml. En el código proporcionado, hemos definido nuestros servicios. Estos se utilizarán para crear y administrar formularios. El servicio se crea dentro de la carpeta de servicios wktestmodule/src/Form/Modifier: PrestaShop\Module\WkTestModule\Form\Modifier\ProductFormModifier: autowire: true public: true arguments: $formBuilderModifier: ‘@form.form_builder_modifier’ PrestaShop\Module \WkTestModule \ Form\Type\CustomTabType: clase: PrestaShop\Module\WkTestModule\Form\Type\CustomTabType padre: ‘form.type.translatable.aware’ público: verdadero etiqueta: – { nombre: form.type } Paso 3: cree un CustomTabType class La clase de pestaña se crea dentro de la carpeta wktestmodule/src/Form/Type consciente(strict_types=1); espacio de nombres PrestaShop\Module\DemoProductForm\Form\Type; utilice PrestaShopBundle\Form\Admin\Type\TranslatorAwareType; utilice Symfony\Component\Form\Extension\Core\Type\TextType; utilizar Symfony\Component\Form\FormBuilderInterface; utilizar Symfony\Component\OptionsResolver\OptionsResolver; utilizar Symfony\Component\Translation\TranslatorInterface; utilice Symfony\Component\Validator\Constraints\NotBlank; utilice Symfony\Component\Validator\Constraints\PositiveOrZero; utilice Symfony\Component\Validator\Constraints\Type; class CustomTabType extiende TranslatorAwareType { /** * @var \Currency */ private $defaultCurrency; /** * @param TranslatorInterface $translator * @param array $locales * @param \Currency $defaultCurrency */ public function __construct( TranslatorInterface $translator, array $locales, \Currency $defaultCurrency ) { parent::__construct($traductor, $local); $this->defaultCurrency = $defaultCurrency; } /** * {@inheritDoc} */ public function buildForm(FormBuilderInterface $constructor, matriz $opciones) { parent::buildForm($constructor, $opciones); $constructor ->add(‘webkul_custom_field’, TextType::clase, [
‘label’ => $this->trans(‘Webkul Custom Field’, ‘Modules.Demoproductform.Admin’),
‘label_tag_name’ => ‘h3’,
// ‘currency’ => $this->defaultCurrency->iso_code,
‘required’ => false,
‘constraints’ => [
new NotBlank(),
new Type([‘type’ => ‘float’]), nuevo PositivoOrCero(), ], ]); } /** * {@inheritDoc} */ public function configureOptions(OptionsResolver $resolver) { parent::configureOptions($resolver); $resolver ->setDefaults([
‘label’ => $this->trans(‘Webkul Tab’, ‘Modules.Demoproductform.Admin’),
]; } } Paso 4: Crear una clase de servicio ProductFormModifier consciente(strict_types=1); espacio de nombres PrestaShop\Module\WkTestModule\Form\Modifier; utilice PrestaShop\Module\WkTestModule\Entity\CustomProduct; utilice PrestaShop\Module\WkTestModule\Form\Type\CustomTabType; utilizar PrestaShop\PrestaShop\Core\Domain\Product\ValueObject\ProductId; utilizar PrestaShopBundle\Form\FormBuilderModifier; utilizar Symfony\Component\Form\FormBuilderInterface; utilizar Symfony\Component\Translation\TranslatorInterface; clase final ProductFormModifier { /** * @var TranslatorInterface */ privado $traductor; /** * @var FormBuilderModifier */ privado $formBuilderModifier; /** * @param TranslatorInterface $traductor * @param FormBuilderModifier $formBuilderModifier */ función pública __construct( TranslatorInterface $traductor, FormBuilderModifier $formBuilderModifier ) { $this->traductor = $traductor; $this->formBuilderModifier = $formBuilderModifier; } /** * @param ProductId|null $productId * @param FormBuilderInterface $productFormBuilder */ modificación de función pública (? ProductId $productId, FormBuilderInterface $productFormBuilder): void { $idValue = $productId? $productId->getValue() : nulo; $ProductoPersonalizado = nuevoProductoPersonalizado($idValue); $this->addCustomTab($customProduct, $productFormBuilder); } /** * @param CustomProduct $customProduct * @param FormBuilderInterface $productFormBuilder */ función privada addCustomTab(CustomProduct $customProduct, FormBuilderInterface $productFormBuilder): void { $this->formBuilderModifier->addAfter( $productFormBuilder, ‘extra_modules’, ‘ pestaña_personalizada’, Tipo de pestaña personalizada::clase,
[
‘data’ => [
‘webkul_custom_field’ => $customProduct->custom_price,
],]); } } El formulario anterior utiliza un modificador de creación de formularios (FormBuilderModifier) ​​​​y agrega una nueva pestaña «Pestaña Webkul» con un campo «Campo personalizado Webkul» después de instalar con éxito el formulario anterior. Obtendrá el resultado de la siguiente manera NOTA: «actionProductFormBuilderModifier» es compatible con la versión V8.1.0 de PrestaShop. Por lo tanto, este gancho funcionará en las siguientes versiones de PrestaShop. Eso es todo. También aprenderá cómo guardar y mostrar campos de formulario personalizados usando PrestaShop Hook. Si tiene algún problema o duda en el proceso anterior, no dude en contactarnos en la sección de comentarios. Me gustaría ayudar.

About Francisco

Check Also

Libro electrónico: Una guía práctica para construir una estrategia de datos e IA

Libro electrónico: Una guía práctica para crear una estrategia de datos e inteligencia artificial | …

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *