No matter how robust a solution is, customization might be required to achieve business-specific objectives or preferences.
Following some requests our Support Team received regarding the ability to take the Weight and WeightType fields from the Modal Window in the Magento 2 Advanced Product Options extension, we are happy to share a quick how-to guide on the means to achieve that objective easily. Read on for easy-to-follow guidelines.
Table of Contents
Step-by-Step Guide on Advanced Product Options Customization
This is how the Weight & Weight Type fields look in the Advanced Product Options extension out-of-the-box:
To display these fields outside the modal window, you’ll need to follow these five easy steps:
Step #1. New Module Creation
Start with creating a new module: VendorName_OptionCustomFieldWeight.
For that,
- Create the
app/code/VendorName/OptionCustomFieldWeightdirectory, - Generate and fill in three standard files that are normally used to register a module, i.e.,
composer.json,etc/module.xml,registration.php.
1)composer.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
"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
|
1 2 3 4 5 6 7 8 9 10 |
<?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
|
1 2 3 4 5 6 7 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'VendorName_OptionCustomFieldWeight', __DIR__ ); |
Step #2. Class Copying
Next, you need to find and copy the following class: /app/code/MageWorx/OptionFeatures/Ui/DataProvider/Product/Form/Modifier/Features.php to /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php.
Step #3. Class Modification
Now, let’s modify the copied class. To do that, you need to:
a) Change the namespace of our class to VendorName\OptionCustomFieldWeight\Ui\DataProvider\Product\Form\Modifier;
and add the classes that we will need a little later. These classes are
use MageWorx\OptionFeatures\Model\Config\Source\Product\Options\Weight as ProductOptionsWeight;
and
use Magento\Ui\Component\Form\Element\Input;
If all is done correctly, this should look as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
…. 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) Add the MageWorx\OptionFeatures\Model\Config\Source\Product\Options\Weightclass object to our constructor:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
…. /** * @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) Find the getValueFeaturesFieldsConfig() method:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/** * The custom option value fields config * * @return array */ protected function getValueFeaturesFieldsConfig() { $fields = []; $fields[Helper::KEY_IS_DEFAULT] = $this->getIsDefaultConfig(148); return $fields; } |
And add the getWeightConfig() and getWeightTypeConfig() methods to the array with custom fields for custom options values. These methods will implement a corresponding configuration. Now, the getValueFeaturesFieldsConfig() method must look as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** * 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) After the getValueFeaturesFieldsConfig() method, lets implement the getWeightConfig() and getWeightTypeConfig() methods of fields configuration:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
/** * 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, ], ], ], ], ]; } |
Step #4. Overriding the Class
It’s high time for our /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php modified class to start working instead of the original /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php. To achieve that, we need to override it in the dependencies configuration file. For that, let’s create the /app/code/VendorName/OptionCustomFieldWeight/etc/adminhtml/di.xml file, and add the following code:
|
1 2 3 4 5 6 |
<?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> |
Step #5. New Module Installation
We are almost there! The only thing left is to install our new module.
To begin with, run the following command:
php bin/magento module:status
You will see a list of enabled and disabled modules. Our new VendorName_OptionCustomFieldWight module should be located within the disabled ones.
Let’s enable it:
php bin/magento module:enable VendorName_OptionCustomFieldWeight
After you update the database,
php bin/magento setup:upgrade
you’ll see the following result:
Congratulations! You’ve removed the Weight & Weight Type fields from the modal window successfully.
Bottom Line
We hope this step-by-step guide has helped you easily customize the Advanced Product Options extension and thus achieve your preferences. Should you have any questions or difficulties, feel free to leave a comment in the comments box below. Otherwise, our Support Team is always happy to assist at [email protected]! =)
