How to Add Custom Field for Option Values in Advanced Product Options

0
633
How to add custom fields for products on Magento 2 | Mageworx Blog
Reading Time: 6 minutes

From the previous article, you’ve learned how to create Magento custom option fields. We also have found out how to display the field data on both the product page front-end and the order page in the admin panel.

What’s now?

Let’s learn how to add the same custom GTIN field for the option values and display it on the product page front-end.

Step #1. New Module Creation

Let’s start with the new module creation, which process was covered in detail in this Mageworx blog post.

Thus, without further ado, here is the code that we will need:

1. composer.json

2. etc/module.xml

3. registration.php

Step #2. Adding New Field to Database

It’s time to create the GTIN field and add it to the corresponding table in the database.

As we are adding a field for option values, the catalog_product_option_type_value table will be required.

Let’s create the following file:

app/code/VendorName/OptionValueGtin/Setup/InstallSchema.php

Step #3. Adding Logic to Work with Backend

Use the pool-modifier mechanism to Magento add field to custom option.

Let’s create the following file:

app/code/VendorName/OptionValueGtin/etc/adminhtml/di.xml

Here:

We add our modifier to the general pool of the Advanced Product Options extension for Magento 2―

MageWorx\OptionBase\Ui\DataProvider\Product\Form\Modifier\Pool.

VendorName\OptionValueGtin\Ui\DataProvider\Product\Form\Modifier\OptionValueGtin is the modifier class.

Below:

See the code that allows adding our field to the app/code/VendorName/OptionValueGtin/Ui/DataProvider/Product/Form/Modifier/OptionValueGtin.php form:

Now, install the extension and check that all is done correctly, i.e.,

  • php bin/magento module:enable VendorName_OptionValueGtin
  • php bin/magento setup:upgrade
  • php bin/magento cache:flush

As you can see, the newly added field gets displayed now:

How to add custom fields for products on Magento 2 | Mageworx Blog

Step #4. Adding Setting to Disable GTIN Field Display for Advanced Product Options Config

What about mixing up our article a little?

I offer to add some new functionality―the ability to enable/disable the GTIN field display for option values on the product page front-end. 

You will need to create the file:

app/code/VendorName/OptionValueGtin/etc/adminhtml/system.xml

For simplicity:

We will add the new Option Value GTIN tab to the config of our Advanced Product Options extension. You should be able to create a tab in your module too.

The new Helper Class should be created. There, we will obtain data about the setting.

So, let’s create and fill in the following class:

app/code/VendorName/OptionValueGtin/Helper/Data.php

Don’t forget to save the changes and clear the cache.

The setting should get displayed in the admin panel.

How to add custom fields for products on Magento 2 | Mageworx Blog

Step #5. Displaying New Field on Product Page Front-End

Remember what we talked about in the previous article?

We mentioned that our MageWorx_OptionBase module already has the getExtendedOptionsConfig() method that collects and displays all our custom attributes on the front-end via blocks.

To see how it gets implemented, open the following class:

app/code/MageWorx/OptionBase/Block/Product/View/Options.php

Now:

Create a model with our attribute:

app/code/VendorName/OptionValueGtin/Model/Attribute/OptionValue/Gtin.php

Via dependency injection, add the attribute to the general attributes block of the Advanced Product Options extension and create the following file:

app/code/VendorName/OptionValueGtin/etc/di.xml

Now:

Create our new block and a template for it:

app/code/VendorName/OptionValueGtin/Block/ValueGtin.php

Here, we’ve obtained data about the setting from the Helper Class.

Next:

Using the getJsonData() method, let’s render data to the front-end using the template that we are about to create:

app/code/VendorName/OptionValueGtin/view/frontend/templates/config.phtml

We used the JavaScript mixins mechanism to display the values for the GTIN field.

What’s next?

Let’s take a different approach and create a js widget, which will be used to display the new data on the product page.

Define the new js:

app/code/VendorName/OptionValueGtin/view/frontend/requirejs-config.js

It’s high time to create the widget itself. It will contain all the logic in the work with the new attribute on the front-end.

In the example file, let’s implement the display logic of GTIN for the select options, and for the radio and check box options separately.

 These are going to be two different logics as the logic in the work and markup of such options differ from one another:

app/code/VendorName/OptionValueGtin/view/frontend/web/js/option-value-gtin.js

How about adding some styles?

app/code/VendorName/OptionValueGtin/view/frontend/web/css/valueGtin.css

It only remains to connect our block and the styles.

For that, create the following file:

app/code/VendorName/OptionValueGtin/view/frontend/layout/catalog_product_view.xml

We are almost finished.

Before we run the final check, don’t forget to clear the cache and deploy the static content again:

  • php bin/magento cache:flush
  • php bin/magento static-content:deploy

And finally:

Log in to the admin panel.

Create a product with custom options in Magento product.

In our example, I added dropdown, swatch, radio, and check box.

Don’t forget to fill in our new GTIN fields for the corresponding option values.

Save the product.

Time to see how it all looks like on the front-end:

How to add custom fields for products on Magento 2 | Mageworx Blog

What do you think about the result?


Please share your feedback about the article in the comments field below. How easy was it to Magento add field to custom options?

LEAVE A REPLY

Please enter your comment!
Please enter your name here