Magento 2: Add Custom Field to Product Option Templates

0
7304
magento add custom field to product attributes
Reading Time: 3 minutes

The Advanced Product Options extension allows you to deal not only with options on product pages but to create various option templates and mass-assign them to specific products.

This article provides you with step-by-step guidelines on adding custom fields Magento for options and option templates in compliance with the Advanced Product Options (APO) best practices and standards.

Table of Contents

What are Advanced Custom Fields?

The Advanced Product Options extension was built to offer versatile possibilities. However, as every business is different and distinct, customization can be required to complement one-off objectives. This is especially the case when mass-assigning option templates and the added advanced product fields to your offerings.

Step-by-Step Guidelines

Before We Begin

  • Read the article about how to add a new field in custom option, Magento. It’s available here.

We will use and modify the example from the mentioned blog post, where we added a Magento 2 custom field to APO.

Magento product options

Step #1. Class Rewrite

Tables that are created for templates store all the necessary attributes as the core Magento tables.

When we Magento add a custom field to product option or attribute for an option or its values, it’s also required to add this advanced custom field to templates right off. Unless you don’t intend to use it in the templates. 

For this purpose, we created the custom `app/code/MageWorx/OptionBase/Model/Installer.php` installer in our main Option_Base module.

This installer helps you to Magento add fields for options, option values, and templates more conveniently.

Unlike in the previous example where we created a schema of the required field in app/code/VendorName/OptionGtin/Setup/InstallSchema.php, we will need to rewrite this class and add a connection to our custom installer:

<?php
namespace VendorName\OptionGtin\Setup;

use Magento\Framework\Setup\InstallSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;

/**
 * @codeCoverageIgnore
 */
class InstallSchema implements InstallSchemaInterface
{
    /**
     * @var \MageWorx\OptionBase\Model\Installer
     */
    protected $optionBaseInstaller;

    /**
     * @param \MageWorx\OptionBase\Model\Installer $optionBaseInstaller
     */
    public function __construct(
        \MageWorx\OptionBase\Model\Installer $optionBaseInstaller
    ) {
        $this->optionBaseInstaller = $optionBaseInstaller;
    }

    /**
     * {@inheritdoc}
     * @SuppressWarnings(PHPMD.ExcessiveMethodLength)
     */
    public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
    {
        $installer = $setup;
        $installer->startSetup();

        $this->optionBaseInstaller->install();

        $installer->endSetup();
    }
}

Step # 2. Dependency Injection Rewrite

Next, let’s rewrite `dependency injection` and change `app/code/VendorName/OptionGtin/etc/di.xml` by adding our custom installer:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <!-- Data -->
    <type name="MageWorx\OptionBase\Model\Product\Option\Attributes">
        <arguments>
            <argument name="data" xsi:type="array">
                <item name="gtin" xsi:type="object">VendorName\OptionGtin\Model\Attribute\Option\Gtin</item>
            </argument>
        </arguments>
    </type>
    <!-- Installation -->
    <type name="MageWorx\OptionBase\Model\Installer">
        <arguments>
            <argument name="installSchema" xsi:type="array">
                <item name="option_gtin_install_schema_data" xsi:type="object">VendorName\OptionGtin\Model\InstallSchema</item>
            </argument>
        </arguments>
    </type>
</config>

Step #3. New Class Creation

It’s time to create a class that contains schemas of the required fields that used to be located in `app/code/VendorName/OptionGtin/Setup/InstallSchema.php`.

Create the `app/code/VendorName/OptionGtin/Model/InstallSchema.php` class with the following code:

<?php
namespace VendorName\OptionGtin\Model;

use Magento\Framework\DB\Ddl\Table;

class InstallSchema implements \MageWorx\OptionBase\Api\InstallSchemaInterface
{
    /**
     * Get module table prefix
     *
     * @return string
     */
    public function getModuleTablePrefix()
    {
        return '';
    }

    /**
     * Retrieve module fields data array
     *
     * @return array
     */
    public function getData()
    {
        $dataArray = [
            [
                'table_name' => 'catalog_product_option',
                'field_name' => 'gtin',
                'params'     => [
                    'type'     => Table::TYPE_INTEGER,
                    'unsigned' => true,
                    'nullable' => false,
                    'comment'  => 'Option gtin',
                ]
            ],

        ];

        return $dataArray;
    }

    /**
     * Retrieve module indexes data array
     *
     * @return array
     */
    public function getIndexes()
    {
        return [];
    }

    /**
     * Retrieve module foreign keys data array
     *
     * @return array
     */
    public function getForeignKeys()
    {
        return [];
    }
}

Step #4. Version Increase

As we already have the installed OptionGtin module with the `gtin` field in the `catalog_product_option` table, it’s required to create its one class and increase the version of the extension.

We need the version increase to run the installation once again and finish the `gtin` field installation to the required templates’ table.

`app/code/VendorName/OptionGtin/Setup/UpgradeSchema.php`

<?php
namespace VendorName\OptionGtin\Setup;

use Magento\Framework\Setup\UpgradeSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;
use MageWorx\OptionFeatures\Model\OptionDescription;
use MageWorx\OptionFeatures\Model\OptionTypeDescription;
use MageWorx\OptionFeatures\Model\Image;
use MageWorx\OptionFeatures\Model\OptionTypeIsDefault;

class UpgradeSchema implements UpgradeSchemaInterface
{
    /**
     * @var \MageWorx\OptionBase\Model\Installer
     */
    protected $optionBaseInstaller;

    /**
     * @var SchemaSetupInterface
     */
    protected $setup;

    /**
     * UpgradeSchema constructor.
     *
     * @param \MageWorx\OptionBase\Model\Installer $optionBaseInstaller
     */
    public function __construct(
        \MageWorx\OptionBase\Model\Installer $optionBaseInstaller
    ) {
        $this->optionBaseInstaller = $optionBaseInstaller;
    }

    /**
     * {@inheritdoc}
     */
    public function upgrade(SchemaSetupInterface $setup, ModuleContextInterface $context)
    {
        $this->setup = $setup;

        $this->optionBaseInstaller->install();

    }

}

Now, increase the version of the module:

`app/code/VendorName/OptionGtin/etc/module.xml`

<?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_OptionGtin" setup_version="1.0.1">
        <sequence>
            <module name="Magento_Catalog"/>
            <module name="MageWorx_OptionBase"/>
            <module name="MageWorx_OptionFeatures"/>
        </sequence>
    </module>
</config>

Step #5. Finale

All the hard work is over. The only thing left is to run the `bin/magento setup:upgrade` installation command and check that our field is written in the corresponding templates’ table.

In our case, it’s the `mageworx_optiontemplates_group_option` table.

add advance custom field to template

Recap

We hope that you find our series of articles dedicated to increasing the Advanced Product Options customizability useful.

Now, you know how to add a custom field to the template and make the best use of the product option templates in Magento 2.

If you are missing specific customization possibilities in the Advanced Product Options extension, please submit a request at [email protected]. We will do our best to help you out!

magento 2 dependent custom options

 

Book a Live Demo with Mageworx

LEAVE A REPLY

Please enter your comment!
Please enter your name here