Personalización avanzada de opciones de productos de Mageworx

No importa cuán robusta sea una solución, es posible que se requiera personalización para lograr objetivos o preferencias específicos del negocio.

A raíz de algunas solicitudes que recibió nuestro equipo de soporte con respecto a la capacidad de tomar los campos Peso y Tipo de peso desde la Ventana modal en la extensión Opciones avanzadas de productos de Magento 2, nos complace compartir una guía práctica rápida sobre los medios para lograr ese objetivo fácilmente. Siga leyendo para conocer pautas fáciles de seguir.

Guía paso a paso sobre la personalización avanzada de opciones de productos

Así es como se ven los campos Peso y Tipo de peso en la extensión de Opciones avanzadas de productos lista para usar:

Para mostrar estos campos fuera de la ventana modal, deberá seguir estos cinco sencillos pasos:

Paso 1. Creación de nuevo módulo

Comience con la creación de un nuevo módulo: VendorName_OptionCustomFieldWeight .

Para eso,

1. Cree el directorio app/code/VendorName/OptionCustomFieldWeight ,
2. Genere y complete tres archivos estándar que normalmente se usan para registrar un módulo, es decir, composer.json , etc/module.xml , registration.php .

1) composer.json

 "name": "vendorname/module-optioncustomfieldweight", "description": "N/A", "require": { "magento/framework" : ">=101.0.0 <103", "mageworx/module-optionfeatures" : ">=2.16.1" }, "type": "magento2-module", "version": "1.0.0", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ], "psr-4": { "VendorName\\OptionCustomFieldWeight\\": "" } } }

2) etc/module.xml

 <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="VendorName_OptionCustomFieldWeight" setup_version="2.0.0"> <sequence> <module name="Magento_Catalog"/> <module name="MageWorx_OptionBase"/> <module name="MageWorx_OptionFeatures"/> </sequence> </module> </config>

3) registration.php

 <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'VendorName_OptionCustomFieldWeight', __DIR__ );

Paso 2. Copia de clase

A continuación, debe buscar y copiar la siguiente clase: /app/code/MageWorx/OptionFeatures/Ui/DataProvider/Product/Form/Modifier/Features.php   a /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php .

Paso 3. Modificación de clase

Ahora, modifiquemos la clase copiada. Para hacer eso, necesitas:

a) Cambie el espacio de namespace de nuestra clase a VendorName\OptionCustomFieldWeight\Ui\DataProvider\Product\Form\Modifier;

y añadir las clases que necesitaremos un poco más adelante. estas clases son

use MageWorx\OptionFeatures\Model\Config\Source\Product\Options\Weight as ProductOptionsWeight;

y

use Magento\Ui\Component\Form\Element\Input;

Si todo se hace correctamente, esto debería verse de la siguiente manera:

 …. namespace VendorName\OptionCustomFieldWeight\Ui\DataProvider\Product\Form\Modifier; use MageWorx\OptionBase\Ui\DataProvider\Product\Form\Modifier\ModifierInterface; use MageWorx\OptionFeatures\Helper\Data as Helper; use Magento\Ui\Component\Form\Element\Hidden; use Magento\Ui\Component\Modal; use Magento\Framework\UrlInterface; use Magento\Framework\App\Request\Http; use MageWorx\OptionFeatures\Model\Config\Source\ShareableLinkMode as SourceConfig; use MageWorx\OptionFeatures\Model\Config\Source\Product\Options\Weight as ProductOptionsWeight; use Magento\Ui\Component\Form\Element\Input; class Features extends AbstractModifier implements ModifierInterface { ….

b) Agregue el objeto de MageWorx\OptionFeatures\Model\Config\Source\Product\Options\Weight a nuestro constructor:

 …. /** * @var ProductOptionsWeight */ protected $productOptionsWeight; /** * @param ArrayManager $arrayManager * @param StoreManagerInterface $storeManager * @param LocatorInterface $locator * @param Helper $helper * @param Http $request * @param UrlInterface $urlBuilder * @param SourceConfig $sourceConfig * @param ProductOptionsWeight $productOptionsWeight */ public function __construct( ArrayManager $arrayManager, StoreManagerInterface $storeManager, LocatorInterface $locator, Helper $helper, Http $request, SourceConfig $sourceConfig, UrlInterface $urlBuilder, ProductOptionsWeight $productOptionsWeight ) { $this->arrayManager = $arrayManager; $this->storeManager = $storeManager; $this->locator = $locator; $this->helper = $helper; $this->request = $request; $this->sourceConfig = $sourceConfig; $this->urlBuilder = $urlBuilder; $this->productOptionsWeight = $productOptionsWeight; } …..

c) Busque el método getValueFeaturesFieldsConfig() :

 /** * The custom option value fields config * * @return array */ protected function getValueFeaturesFieldsConfig() { $fields = []; $fields[Helper::KEY_IS_DEFAULT] = $this->getIsDefaultConfig(148); return $fields; }

Y agregue los getWeightConfig() y getWeightTypeConfig() a la matriz con campos personalizados para valores de opciones personalizados. Estos métodos implementarán una configuración correspondiente. Ahora, el método getValueFeaturesFieldsConfig() debe tener el siguiente aspecto:

 /** * The custom option value fields config * * @return array */ protected function getValueFeaturesFieldsConfig() { $fields = []; $fields[Helper::KEY_IS_DEFAULT] = $this->getIsDefaultConfig(148); if ($this->helper->isWeightEnabled()) { $fields[Helper::KEY_WEIGHT] = $this->getWeightConfig(34); $fields[Helper::KEY_WEIGHT_TYPE] = $this->getWeightTypeConfig(35); } return $fields; }

d) Después del método getValueFeaturesFieldsConfig() , implementemos getWeightConfig() y getWeightTypeConfig() métodos de configuración de campos:

 /** * Get weight unit name * * @return mixed */ protected function getWeightUnit() { try { $unit = $this->locator->getStore()->getConfig('general/locale/weight_unit'); } catch (\Exception $e) { $unit = $this->storeManager->getStore()->getConfig('general/locale/weight_unit'); } return $unit; } /** * Weight field config * * @param $sortOrder * @return array */ protected function getWeightConfig($sortOrder) { return [ 'arguments' => [ 'data' => [ 'config' => [ 'label' => __('Weight'), 'componentType' => Field::NAME, 'component' => 'Magento_Catalog/js/components/custom-options-component', 'template' => 'Magento_Catalog/form/field', 'formElement' => Input::NAME, 'dataScope' => Helper::KEY_WEIGHT, 'dataType' => Number::NAME, 'validation' => [ 'validate-number' => true, 'validate-zero-or-greater' => true, ], 'sortOrder' => $sortOrder, 'additionalClasses' => 'admin__field-small', 'addbefore' => $this->getWeightUnit(), 'addbeforePool' => $this->productOptionsWeight ->prefixesToOptionArray($this->getWeightUnit()), 'imports' => [ 'disabled' => '!${$.provider}:' . self::DATA_SCOPE_PRODUCT . '.product_has_weight:value', ], ], ], ], ]; } /** * Weight field config * * @param $sortOrder * @return array */ protected function getWeightTypeConfig($sortOrder) { return [ 'arguments' => [ 'data' => [ 'config' => [ 'label' => __('Weight Type'), 'component' => 'MageWorx_OptionFeatures/js/component/custom-options-weight-type', 'componentType' => Field::NAME, 'formElement' => Select::NAME, 'dataScope' => Helper::KEY_WEIGHT_TYPE, 'dataType' => Text::NAME, 'sortOrder' => $sortOrder, 'options' => $this->productOptionsWeight->toOptionArray(), 'imports' => [ 'weightIndex' => Helper::KEY_WEIGHT, ], ], ], ], ]; }

Paso 4. Anulando la clase

Ya es hora de que nuestra clase modificada /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php comience a funcionar en lugar del /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php original /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php . Para lograr eso, necesitamos anularlo en el archivo de configuración de dependencias. Para eso, creemos el archivo /app/code/VendorName/OptionCustomFieldWeight/etc/adminhtml/di.xml y agreguemos el siguiente código:

 <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <preference for="MageWorx\OptionFeatures\Ui\DataProvider\Product\Form\Modifier\Features" type="VendorName\OptionCustomFieldWeight\Ui\DataProvider\Product\Form\Modifier\Features"/> </config>

Paso #5. Instalación de un nuevo módulo

¡Estamos casi alli! Lo único que queda es instalar nuestro nuevo módulo.

Para empezar, ejecuta el siguiente comando:

php bin/magento module:status

Verá una lista de módulos habilitados y deshabilitados. Nuestro nuevo módulo VendorName_OptionCustomFieldWight debe ubicarse dentro de los deshabilitados.

Vamos a habilitarlo:

php bin/magento module:enable VendorName_OptionCustomFieldWeight

Después de actualizar la base de datos,

php bin/magento setup:upgrade

Verás el siguiente resultado:

¡Felicidades! Ha eliminado correctamente los campos Peso y Tipo de peso de la ventana modal.

Línea de fondo

Esperamos que esta guía paso a paso te haya ayudado a personalizar fácilmente la extensión de Opciones Avanzadas de Producto y así lograr tus preferencias. Si tiene alguna pregunta o dificultad, no dude en dejar un comentario en el cuadro de comentarios a continuación. De lo contrario, ¡nuestro equipo de soporte siempre estará encantado de ayudarlo en [email protected] ! =)