How to Add Custom Field to Advanced Product Options Extension

0
7578
How to Add Custom Field to Advanced Product Options | Mageworx Blog
Reading Time: 7 minutes

From this article, you will learn how to create a “Gtin” field for product custom options, show it on the product page front-end, and display it in the order.

Without further ado, let’s proceed to the step-by-step guidelines.

Step #1. Create New Module

We described in detail how to create a module in this article. Thus, let’s skip this part, and move straight to the code you’ll need to create an add-on:

1.composer.json

2.etc/module.xml

3.registration.php

Step #2. Add our New Fields to Database

After we’ve built an empty module, it’s time to create the new “Gtin” field and add it to the database within the corresponding table. As we add a field for option values, we’ll need the “catalog_product_option” table.

Let’s create the following file:

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

Step #3. Add Logic to Work with Backend

We’ll use the pool-modifier mechanism to add our new field.

Now, add the following file:

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

Here, let’s add our modifier to the shared pool of the Advanced Product Options extension―”MageWorx\OptionBase\Ui\DataProvider\Product\Form\Modifier\Pool”. “VendorName\OptionGtin\Ui\DataProvider\Product\Form\Modifier\OptionGtin” is our class modifier. 

The code that allows adding our field to the app/code/VendorName/OptionGtin/Ui/DataProvider/Product/Form/Modifier/OptionGtin.php form is provided below:

Now, let’s try to install the extension and check that everything gets displayed:

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

Our new field has been added successfully:

How to Add Custom Field to Advanced Product Options | Mageworx Blog

Step #4. Display our Field on Product Page Front-End

The Mageworx Advanced Product Options extension already has it all to display and work with attributes that our module adds. All we need to do is add the new attribute to the shared dataset.

Our MageWorx_OptionBase module already uses the getExtendedOptionsConfig()method. It collects and displays all the custom attributes in a block on the front-end. Open the app/code/MageWorx/OptionBase/Block/Product/View/Options.php class to see how it gets implemented.  

Let’s start with creating a model with our attribute:

app/code/VendorName/OptionGtin/Model/Attriburte/Option/Gtin.php

Now, use the “dependency injection” mechanism and add our attribute to the shared attributes dataset of the Advanced Product Options extension.

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

In other words, by opening the MageWorx\OptionBase\Model\Product\Option\Attributes class, you will see that it simply collects all attribute objects to the shared dataset.

To display data of our new “Gtin” attribute, we’ve decided to use the firstrun() function from app/code/MageWorx/OptionFeatures/view/base/web/js/catalog/product/features.js. It already has all the required implementation that fits our example the best. To avoid overwriting the whole file, we will apply the “JavaScript mixins” mechanism, which will help us change the necessary function only.

Create the following file, and define our mixin there: app/code/VendorName/OptionGtin/view/frontend/requirejs-config.js

Here, MageWorx_OptionFeatures/js/catalog/product/features is the root to our file, which method we need to rewrite. VendorName_OptionGtin/js/catalog/product/features-gtin-mixin is the file, where we will rewrite the method.

So, let’s create it: app/code/VendorName/OptionGtin/view/frontend/web/js/catalog/product/features-gtin-mixin.js

Generally, we can run the following commands now:

  • php bin/magento cache:flush
  • php bin/magento setup:static-content:deploy (only for production mode)

and see what we’ve got. But first, add some styles to our new attribute and make it look nice on the front-end.

Create a layout and define our new styles file there: app/code/VendorName/OptionGtin/view/frontend/layout/catalog_product_view.xml

It’s time to create a styles file: app/code/VendorName/OptionGtin/view/frontend/web/css/gtin.css

Now, let’s run the previously described commands and check the results:

How to Add Custom Field to Advanced Product Options | Mageworx Blog

Step #5. Add our Attribute Data to Order Details in Database

When a customer makes a purchase, an order gets created. Details about the added items get included in the sales_order_item table. This table has the product_options field that contains information about the selected parameters of an added item. That’s where we should add our new attribute’s data.

As an order gets created, the sales_quote_address_collect_totals_before event gets triggered. We will use it to add our data to product options.

Let’s define the event by creating: app/code/VendorName/OptionGtin/etc/events.xml

Then, create our observer: app/code/VendorName/OptionGtin/Observer/AddGtinToOrder.php

Here, with the help of the observer, we get the list of all items in the order and add the data of our “Gtin” attribute to the so-called $infoBuyRequest.

To check that everything has been performed correctly, create an order with the product, which options have “Gtin” data. You can check that the data has been added in the Database sales_order_item table -> product_options field:

How to Add Custom Field to Advanced Product Options | Mageworx Blog

Step #6. Display Data on Orders Page in Admin Panel

There are different means to display the required information in the ready template. For example, using “js”. We worked with “js” in this article. Let’s work with the templates themselves for a change, and try to rewrite them! 

Change the previously created app/code/VendorName/OptionGtin/etc/adminhtml/di.xml by adding the plugin there:

Create the plugin itself:

app/code/VendorName/OptionGtin/Plugin/AddDefaultColumn.php

This plugin adds information about our new attribute for order options, for which these data exist.

vendor/magento/module-sales/view/adminhtml/templates/items/column/name.phtml is responsible for displaying information about product options on the order page in the admin panel.

Let’s rewrite it to display our “Gtin”. For that, we need to rewrite the “column_name” block, or rather its template. Create a layout and a template:  

app/code/VendorName/OptionGtin/view/adminhtml/layout/sales_order_view.xml

app/code/VendorName/OptionGtin/view/adminhtml/templates/items/column/name.phtml

If everything has been performed correctly, cleared, and compiled, then you will see the following result:

How to Add Custom Field to Advanced Product Options | Mageworx Blog

We hope you find this article helpful. Should you have any difficulties or issues, feel free to let us know in the comments field below.

LEAVE A REPLY

Please enter your comment!
Please enter your name here