How to Add a Field to Custom Options in Magento 2?

0
900
How to Add a Field to Custom Options in Magento 2? | MageWorx Magento Blog
Reading Time: 5 minutes

You all know how convenient it is to use products’ customizable options. We’ve got a powerful Advanced Product Options Suite that drastically expands the standard functionality of the customizable options. Custom fields are the basis of some of the extension’s functionality. These fields get added to specific option types, such as a checkbox or text area.

In the article, I’ll do my best to explain how you can add the necessary fields to the database and admin panel fast and easy. Let’s have an insight.

1. Create a new module

First, let’s create a MageWorx_Option module. We will get it all done using this module as an example.

Let’s create the following directory: app/code/MageWorx/Option. To register a module, we will need some standard files:

2. Add our new fields to the database

For example, we wish to highlight one of the options on the front-end somehow. Let’s add a checkbox field for an option ‘Is Special Offer’ and a text field ‘Description’ for the selectable options values (dropdown, checkbox, radio button, multi-select).
First, we will need to add it to the database in the corresponding tables. For that, add the following file:  app/code/MageWorx/Option/Setup/InstallSchema.php.

The ‘Is Special Offer’ field will be disabled by default.

Next, we can install the module.

To do that, run the following commands in the console:

3. Add logic to work with the backend

At this point, let’s add the pool-modifiers mechanism to our module, which Magento 2 uses to combine all the necessary features on a product page in the admin panel.

For that, let’s add the following file:

app/code/MageWorx/Option/etc/adminhtml/di.xml

Now, it’s time to create our MageWorx\Option\Ui\DataProvider\Product\Form\Modifier\All class, which doesn’t add anything new by itself to the Customizable Options form on the product page. Using the dependency injection (DI), it will add the necessary fields on the product page.

In fact, our Advanced Product Options Suite adds about 40 fields and other complex structures, which get added with the help of more than 10 packages that are included within the extension. As we do not need such complex structure here, we will use solely one class-modificator ―

 MageWorx\Option\Ui\DataProvider\Product\Form\Modifier\Base. 

You might wonder, why we specify the following sort_order = 71. This all can be explained by the standard Magento 2 functionality, where fields for Customizable Options get added under sort_order = 70.

Below, take a look at the MageWorx\Option\Ui\DataProvider\Product\Form\Modifier\All class, which is presented by a regular iterator:

app/code/MageWorx/Option/Ui/DataProvider/Product/Form/Modifier/All.php

Basically, now is the time to create a file, which will add our fields to the Customizable Options form:

app/code/MageWorx/Option/Ui/DataProvider/Product/Form/Modifier/Base.php

What we need to do here is recursively add a necessary config for ‘Is Special Offer’ and ‘Description’ fields at the right place. Pay attention to the last two methods that actually realize the config of the added fields. For ‘Is Special Offer we use checkbox, and for ‘Description’ ― text input.

As our fields in the database are located in the ‘catalog_product_option’ and ‘catalog_product_option_type_value’ fields, Magento 2 itself will add them to the form providing that we specify ‘dataScope’ correctly. 

It is important to use different ‘sortOrder’ to avoid replacing the standard Customizable Options fields. After playing around with various ‘sortOrder’ variants, you can arrange fields in the order that suits you the most.

Besides, the fields config allows you to add various inline validations. For example, in our Advanced Product Options extension, the ‘Cost’ field is implemented as follows:

Then, clear cache:

sudo -u www-data php bin/magento cache:clean

The only thing left is to open a product we are interested in, fill in the necessary fields, and save it. The final result will look something like that:

Wrap Up

Magento 2 offers an extremely convenient mechanism of expanding customizable options with practically unlimited functionality. That what we eagerly use in our extension and certainly recommend you.

LEAVE A REPLY

Please enter your comment!
Please enter your name here