Personalização de opções avançadas de produtos Mageworx
Publicados: 2020-06-09Não importa quão robusta seja uma solução, a personalização pode ser necessária para atingir objetivos ou preferências específicas de negócios.
Após algumas solicitações que nossa equipe de suporte recebeu sobre a capacidade de obter os campos Weight e WeightType da janela Modal na extensão Magento 2 Advanced Product Options, estamos felizes em compartilhar um guia rápido de instruções sobre os meios para atingir esse objetivo facilmente. Continue lendo para obter orientações fáceis de seguir.
Índice
- Guia passo a passo sobre personalização de opções avançadas de produtos
- Passo 1. Criação de novo módulo
- Passo 2. Cópia de classe
- Etapa 3. Modificação de classe
- Passo 4. Substituindo a classe
- Passo #5. Instalação do novo módulo
- Resultado final
Guia passo a passo sobre personalização de opções avançadas de produtos
É assim que os campos Peso e Tipo de peso são exibidos na extensão Opções avançadas de produto prontas para uso:
Para exibir esses campos fora da janela modal, você precisará seguir estas cinco etapas fáceis:
Passo 1. Criação de novo módulo
Comece criando um novo módulo: VendorName_OptionCustomFieldWeight
.
Por isso,
- Crie o diretório
app/code/VendorName/OptionCustomFieldWeight
, - Gere e preencha três arquivos padrão que normalmente são usados para registrar um módulo, ou seja,
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__ );
Passo 2. Cópia de classe
Em seguida, você precisa encontrar e copiar a seguinte classe: /app/code/MageWorx/OptionFeatures/Ui/DataProvider/Product/Form/Modifier/Features.php
para /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php
.
Etapa 3. Modificação de classe
Agora, vamos modificar a classe copiada. Para fazer isso, você precisa:
a) Altere o namespace
de nossa classe para VendorName\OptionCustomFieldWeight\Ui\DataProvider\Product\Form\Modifier;
e adicione as classes que precisaremos um pouco mais tarde. Essas aulas são
use MageWorx\OptionFeatures\Model\Config\Source\Product\Options\Weight as ProductOptionsWeight;
e
use Magento\Ui\Component\Form\Element\Input;
Se tudo for feito corretamente, isso deve ficar assim:
…. 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) Adicione o objeto de MageWorx\OptionFeatures\Model\Config\Source\Product\Options\Weight
ao nosso construtor:
…. /** * @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) Encontre o 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; }
E adicione os getWeightConfig()
e getWeightTypeConfig()
à matriz com campos personalizados para valores de opções personalizadas. Esses métodos implementarão uma configuração correspondente. Agora, o método getValueFeaturesFieldsConfig()
deve ter a seguinte aparência:
/** * 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) Após o método getValueFeaturesFieldsConfig()
, vamos implementar o método getWeightConfig()
e métodos getWeightTypeConfig()
de configuração 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, ], ], ], ], ]; }
Passo 4. Substituindo a classe
Está na hora de nossa classe modificada /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php
começar a funcionar em vez do original /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php
. Para conseguir isso, precisamos substituí-lo no arquivo de configuração de dependências. Para isso, vamos criar o arquivo /app/code/VendorName/OptionCustomFieldWeight/etc/adminhtml/di.xml
e adicionar o seguinte 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>
Passo #5. Instalação do novo módulo
Estamos quase lá! A única coisa que resta é instalar nosso novo módulo.
Para começar, execute o seguinte comando:
php bin/magento module:status
Você verá uma lista de módulos habilitados e desabilitados. Nosso novo módulo VendorName_OptionCustomFieldWight
deve estar localizado dentro dos desabilitados.
Vamos habilitar:
php bin/magento module:enable VendorName_OptionCustomFieldWeight
Depois de atualizar o banco de dados,
php bin/magento setup:upgrade
você verá o seguinte resultado:
Parabéns! Você removeu os campos Peso e Tipo de peso da janela modal com sucesso.
Resultado final
Esperamos que este guia passo a passo tenha ajudado você a personalizar facilmente a extensão Advanced Product Options e, assim, alcançar suas preferências. Se você tiver alguma dúvida ou dificuldade, sinta-se à vontade para deixar um comentário na caixa de comentários abaixo. Caso contrário, nossa equipe de suporte sempre terá prazer em ajudar em [email protected] ! =)