{"id":12271,"date":"2020-06-09T06:21:41","date_gmt":"2020-06-09T06:21:41","guid":{"rendered":"https:\/\/www.mageworx.com\/blog\/?p=12271"},"modified":"2022-04-19T13:13:26","modified_gmt":"2022-04-19T13:13:26","slug":"mageworx-advanced-product-options-customization","status":"publish","type":"post","link":"https:\/\/www.mageworx.com\/blog\/advanced-product-options-customization","title":{"rendered":"Mageworx Advanced Product Options Customization"},"content":{"rendered":"\n<!-- SEO Ultimate (http:\/\/www.seodesignsolutions.com\/wordpress-seo\/) - Code Inserter module -->\n<!-- Google Tag Manager (noscript) -->\r\n<noscript><iframe src=\"https:\/\/www.googletagmanager.com\/ns.html?id=GTM-5DTCW7B8\"\r\nheight=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"><\/iframe><\/noscript>\r\n<!-- End Google Tag Manager (noscript) -->\n<!-- \/SEO Ultimate -->\n\n<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<p>No matter how robust a solution is, customization might be required to achieve business-specific objectives or preferences.<br><\/p>\n\n\n\n<p>Following some requests our Support Team received regarding the ability to take the <em>Weight <\/em>and <em>WeightType <\/em>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step-by-Step Guide on Advanced Product Options Customization<\/h2>\n\n\n\n<p>This is how the <strong>Weight <\/strong>&amp;<strong> Weight Type <\/strong>fields look in the <a href=\"https:\/\/www.mageworx.com\/magento-2-advanced-product-options-suite.html\">Advanced Product Options<\/a> extension out-of-the-box:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/kibOF4jAHVx1cNbEIz43ySyBeonghhXk5jcS4VPmuKDkD2z5RWAwQ6EtGe-dJ29bDdways7ECabjGAFlXOYSHzOotQsWSW3mXReYhULtRih1gmJQufDfBmb-XiliC2OGysKq9lmO\" alt=\"MageWorx Advanced Product Options Customization | MageWorx Blog\"\/><\/figure>\n\n\n\n<p>To display these fields outside the modal window, you\u2019ll need to follow these five easy steps: <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step #1. New Module Creation<\/h3>\n\n\n\n<p>Start with creating a new module: <code>VendorName_OptionCustomFieldWeight<\/code>.<\/p>\n\n\n\n<p>For that,<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Create the <code>app\/code\/VendorName\/OptionCustomFieldWeight<\/code> directory,<\/li><li>Generate and fill in three standard files that are normally used to register a module, i.e., <code>composer.json<\/code>, <code>etc\/module.xml<\/code>, <code>registration.php<\/code>.<\/li><\/ol>\n\n\n\n<p>1)<code>composer.json<\/code><br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"name\": \"vendorname\/module-optioncustomfieldweight\",\n   \"description\": \"N\/A\",\n   \"require\": {\n       \"magento\/framework\"                  : \"&gt;=101.0.0 &lt;103\",\n       \"mageworx\/module-optionfeatures\"     : \"&gt;=2.16.1\"\n          },\n   \"type\": \"magento2-module\",\n   \"version\": \"1.0.0\",\n   \"license\": &#91;\n       \"OSL-3.0\",\n       \"AFL-3.0\"\n   ],\n   \"autoload\": {\n       \"files\": &#91;\n           \"registration.php\"\n       ],\n       \"psr-4\": {\n           \"VendorName\\\\OptionCustomFieldWeight\\\\\": \"\"\n       }\n   }\n}\n<\/code><\/pre>\n\n\n\n<p>2) <code>etc\/module.xml<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\"?&gt;\n&lt;config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\"&gt;\n   &lt;module name=\"VendorName_OptionCustomFieldWeight\" setup_version=\"2.0.0\"&gt;\n       &lt;sequence&gt;\n\t\t\t&lt;module name=\"Magento_Catalog\"\/&gt;\n\t\t\t&lt;module name=\"MageWorx_OptionBase\"\/&gt;\n\t\t\t&lt;module name=\"MageWorx_OptionFeatures\"\/&gt;\n       &lt;\/sequence&gt;\n   &lt;\/module&gt;\n&lt;\/config&gt;<\/code><\/pre>\n\n\n\n<p>3) <code>registration.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n   \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\n   'VendorName_OptionCustomFieldWeight',\n   __DIR__\n);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step #2. Class Copying<\/h3>\n\n\n\n<p>Next, you need to find and copy the following class: <code>\/app\/code\/MageWorx\/OptionFeatures\/Ui\/DataProvider\/Product\/Form\/Modifier\/Features.php<\/code><em>&nbsp;<\/em>to <code>\/app\/code\/VendorName\/OptionCustomFieldWight\/Ui\/DataProvider\/Product\/Form\/Modifier\/Features.php<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step #3. Class Modification<\/h3>\n\n\n\n<p>Now, let\u2019s modify the copied class. To do that, you need to:<\/p>\n\n\n\n<p>a) Change the <code>namespace<\/code> of our class to <code>VendorName\\OptionCustomFieldWeight\\Ui\\DataProvider\\Product\\Form\\Modifier; <\/code><\/p>\n\n\n\n<p>and add the classes that we will need a little later. These classes are<\/p>\n\n\n\n<p><code>use MageWorx\\OptionFeatures\\Model\\Config\\Source\\Product\\Options\\Weight as ProductOptionsWeight;<\/code><\/p>\n\n\n\n<p>and<\/p>\n\n\n\n<p><code>use Magento\\Ui\\Component\\Form\\Element\\Input;<\/code><br><\/p>\n\n\n\n<p>If all is done correctly, this should look as follows:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u2026.\n\nnamespace VendorName\\OptionCustomFieldWeight\\Ui\\DataProvider\\Product\\Form\\Modifier;\n\nuse MageWorx\\OptionBase\\Ui\\DataProvider\\Product\\Form\\Modifier\\ModifierInterface;\nuse MageWorx\\OptionFeatures\\Helper\\Data as Helper;\nuse Magento\\Ui\\Component\\Form\\Element\\Hidden;\nuse Magento\\Ui\\Component\\Modal;\nuse Magento\\Framework\\UrlInterface;\nuse Magento\\Framework\\App\\Request\\Http;\nuse MageWorx\\OptionFeatures\\Model\\Config\\Source\\ShareableLinkMode as SourceConfig;\nuse MageWorx\\OptionFeatures\\Model\\Config\\Source\\Product\\Options\\Weight as ProductOptionsWeight;\nuse Magento\\Ui\\Component\\Form\\Element\\Input;\n\nclass Features extends AbstractModifier implements ModifierInterface\n{\n\n\u2026.\n<\/code><\/pre>\n\n\n\n<p>b) Add the <code>MageWorx\\OptionFeatures\\Model\\Config\\Source\\Product\\Options\\Weight<\/code>class object to our constructor:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u2026.\n\n\/**\n* @var ProductOptionsWeight\n*\/\nprotected $productOptionsWeight;\n\n\/**\n* @param ArrayManager $arrayManager\n* @param StoreManagerInterface $storeManager\n* @param LocatorInterface $locator\n* @param Helper $helper\n* @param Http $request\n* @param UrlInterface $urlBuilder\n* @param SourceConfig $sourceConfig\n* @param ProductOptionsWeight $productOptionsWeight\n*\/\npublic function __construct(\n   ArrayManager $arrayManager,\n   StoreManagerInterface $storeManager,\n   LocatorInterface $locator,\n   Helper $helper,\n   Http $request,\n   SourceConfig $sourceConfig,\n   UrlInterface $urlBuilder,\n   ProductOptionsWeight $productOptionsWeight\n) {\n   $this-&gt;arrayManager = $arrayManager;\n   $this-&gt;storeManager = $storeManager;\n   $this-&gt;locator      = $locator;\n   $this-&gt;helper       = $helper;\n   $this-&gt;request      = $request;\n   $this-&gt;sourceConfig = $sourceConfig;\n   $this-&gt;urlBuilder   = $urlBuilder;\n   $this-&gt;productOptionsWeight = $productOptionsWeight;\n}\n\n\u2026..\n<\/code><\/pre>\n\n\n\n<p>c) Find the <code>getValueFeaturesFieldsConfig()<\/code> method:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n* The custom option value fields config\n*\n* @return array\n*\/\nprotected function getValueFeaturesFieldsConfig()\n{\n   $fields                         = &#91;];\n   $fields&#91;Helper::KEY_IS_DEFAULT] = $this-&gt;getIsDefaultConfig(148);\n   return $fields;\n}\n\n<\/code><\/pre>\n\n\n\n<p>And add the <code>getWeightConfig()<\/code> and <code>getWeightTypeConfig()<\/code> methods to the array with custom fields for custom options values. These methods will implement a corresponding configuration. Now, the <code>getValueFeaturesFieldsConfig()<\/code> method must look as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n* The custom option value fields config\n*\n* @return array\n*\/\nprotected function getValueFeaturesFieldsConfig()\n{\n   $fields                         = &#91;];\n   $fields&#91;Helper::KEY_IS_DEFAULT] = $this-&gt;getIsDefaultConfig(148);\n\n   if ($this-&gt;helper-&gt;isWeightEnabled()) {\n       $fields&#91;Helper::KEY_WEIGHT]      = $this-&gt;getWeightConfig(34);\n       $fields&#91;Helper::KEY_WEIGHT_TYPE] = $this-&gt;getWeightTypeConfig(35);\n   }\n\n   return $fields;\n}\n<\/code><\/pre>\n\n\n\n<p>d) After the <code>getValueFeaturesFieldsConfig()<\/code> method, lets implement the <code>getWeightConfig()<\/code> and<em> <\/em> <code>getWeightTypeConfig()<\/code> methods of fields configuration:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n* Get weight unit name\n*\n* @return mixed\n*\/\nprotected function getWeightUnit()\n{\n   try {\n       $unit = $this-&gt;locator-&gt;getStore()-&gt;getConfig('general\/locale\/weight_unit');\n   } catch (\\Exception $e) {\n       $unit = $this-&gt;storeManager-&gt;getStore()-&gt;getConfig('general\/locale\/weight_unit');\n   }\n\n   return $unit;\n}\n\n\/**\n* Weight field config\n*\n* @param $sortOrder\n* @return array\n*\/\nprotected function getWeightConfig($sortOrder)\n{\n   return &#91;\n       'arguments' =&gt; &#91;\n           'data' =&gt; &#91;\n               'config' =&gt; &#91;\n                   'label'             =&gt; __('Weight'),\n                   'componentType'     =&gt; Field::NAME,\n                   'component'         =&gt; 'Magento_Catalog\/js\/components\/custom-options-component',\n                   'template'          =&gt; 'Magento_Catalog\/form\/field',\n                   'formElement'       =&gt; Input::NAME,\n                   'dataScope'         =&gt; Helper::KEY_WEIGHT,\n                   'dataType'          =&gt; Number::NAME,\n                   'validation'        =&gt; &#91;\n                       'validate-number'          =&gt; true,\n                       'validate-zero-or-greater' =&gt; true,\n                   ],\n                   'sortOrder'         =&gt; $sortOrder,\n                   'additionalClasses' =&gt; 'admin__field-small',\n                   'addbefore'         =&gt; $this-&gt;getWeightUnit(),\n                   'addbeforePool'     =&gt; $this-&gt;productOptionsWeight\n                       -&gt;prefixesToOptionArray($this-&gt;getWeightUnit()),\n                   'imports'           =&gt; &#91;\n                       'disabled' =&gt; '!${$.provider}:' . self::DATA_SCOPE_PRODUCT\n                           . '.product_has_weight:value',\n                   ],\n               ],\n           ],\n       ],\n   ];\n}\n\n\/**\n* Weight field config\n*\n* @param $sortOrder\n* @return array\n*\/\nprotected function getWeightTypeConfig($sortOrder)\n{\n   return\n       &#91;\n           'arguments' =&gt; &#91;\n               'data' =&gt; &#91;\n                   'config' =&gt; &#91;\n                       'label'         =&gt; __('Weight Type'),\n                       'component'     =&gt; 'MageWorx_OptionFeatures\/js\/component\/custom-options-weight-type',\n                       'componentType' =&gt; Field::NAME,\n                       'formElement'   =&gt; Select::NAME,\n                       'dataScope'     =&gt; Helper::KEY_WEIGHT_TYPE,\n                       'dataType'      =&gt; Text::NAME,\n                       'sortOrder'     =&gt; $sortOrder,\n                       'options'       =&gt; $this-&gt;productOptionsWeight-&gt;toOptionArray(),\n                       'imports'       =&gt; &#91;\n                           'weightIndex' =&gt; Helper::KEY_WEIGHT,\n                       ],\n                   ],\n               ],\n           ],\n       ];\n\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step #4. Overriding the Class<\/h3>\n\n\n\n<p>It\u2019s high time for our <code>\/app\/code\/VendorName\/OptionCustomFieldWight\/Ui\/DataProvider\/Product\/Form\/Modifier\/Features.php<\/code> modified class to start working instead of the original <code>\/app\/code\/VendorName\/OptionCustomFieldWight\/Ui\/DataProvider\/Product\/Form\/Modifier\/Features.php<\/code>. To achieve that, we need to override it in the dependencies configuration file. For that, let\u2019s create the <code>\/app\/code\/VendorName\/OptionCustomFieldWeight\/etc\/adminhtml\/di.xml<\/code> file, and add the following code:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\"?&gt;\n&lt;config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:ObjectManager\/etc\/config.xsd\"&gt;\n   &lt;preference for=\"MageWorx\\OptionFeatures\\Ui\\DataProvider\\Product\\Form\\Modifier\\Features\"\n               type=\"VendorName\\OptionCustomFieldWeight\\Ui\\DataProvider\\Product\\Form\\Modifier\\Features\"\/&gt;\n&lt;\/config&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step #5. New Module Installation<\/h3>\n\n\n\n<p>We are almost there! The only thing left is to install our new module.<\/p>\n\n\n\n<p>To begin with, run the following command:<\/p>\n\n\n\n<p> <code>php bin\/magento module:status<\/code><br><\/p>\n\n\n\n<p>You will see a list of enabled and disabled modules. Our new <code>VendorName_OptionCustomFieldWight<\/code> module should be located within the disabled ones.<br><\/p>\n\n\n\n<p>Let\u2019s enable it:<br><\/p>\n\n\n\n<p> <code>php bin\/magento module:enable VendorName_OptionCustomFieldWeight<\/code><\/p>\n\n\n\n<p>After you update the database,<\/p>\n\n\n\n<p> <code>php bin\/magento setup:upgrade<\/code><\/p>\n\n\n\n<p>you\u2019ll see the following result:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/UINDo3F4DXlNbRKynrqpeG5M5pA86q1U0b96qznBQRNuS3y-Hg7FU1QMpFhu7fb_DBWcZPwVCt5Xspu8Mr_MkgoybPBvUHCRyi-BxkfvV9wI_ZwHjjM9QR5Zz12fK91kAX8YKTqp\" alt=\"MageWorx Advanced Product Options Customization | MageWorx Blog\"\/><\/figure>\n\n\n\n<p>Congratulations! You&#8217;ve removed the <strong>Weight <\/strong>&amp; <strong>Weight Type <\/strong>fields from the modal window successfully.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bottom Line<\/h2>\n\n\n\n<p>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 <strong>support@mageworx.com<\/strong>! =)<br><\/p>\n\n\n<p><a href=\"https:\/\/calendly.com\/kate-volchock\/demo\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15059 size-full\" src=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2021\/02\/live-demo-1.png\" alt=\"Book a Live Demo with Mageworx\" width=\"690\" height=\"260\" srcset=\"https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2021\/02\/live-demo-1.png 690w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2021\/02\/live-demo-1-600x226.png 600w, https:\/\/www.mageworx.com\/blog\/wp-content\/uploads\/2021\/02\/live-demo-1-250x94.png 250w\" sizes=\"auto, (max-width: 690px) 100vw, 690px\" \/><\/a><\/p>","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>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 [&hellip;]<\/p>\n","protected":false},"author":41,"featured_media":12273,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[255,426],"tags":[379,407],"class_list":{"0":"post-12271","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-magento-2","8":"category-extensions-tips-and-tricks","9":"tag-apo","10":"tag-how-to-article"},"_links":{"self":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/12271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/comments?post=12271"}],"version-history":[{"count":26,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/12271\/revisions"}],"predecessor-version":[{"id":15726,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/posts\/12271\/revisions\/15726"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/media\/12273"}],"wp:attachment":[{"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/media?parent=12271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/categories?post=12271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mageworx.com\/blog\/wp-json\/wp\/v2\/tags?post=12271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}