Magento 2 Add New Drop-Down Custom Option Type – Tutorial

custom-optionsmagento2

I need a new custom option type which extends from select/dropdown, so I can preload my options from a database dynamically. I did not find any tutorial or documentation how I would do something like that. Can anybody help me out?

enter image description here

EDIT:

My backend template doesn't get loaded properly. Although I can select my option type, the template paper.phtml does not appear.
What I got so far:

MyVendor/MyModule/etc/product-options.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Catalog:etc/product_options.xsd">
    <option name="MyOptions" label="MyOptions" renderer="MyVendor\MyModule\Block\Adminhtml\Product\Edit\Tab\Options\Type\Paper">
        <inputType name="Paper" label="Paper" />
    </option>
</config>

MyVendor\MyModule\Block\Adminhtml\Product\Edit\Tab\Options\Type\Paper.php

<?php

namespace MyVendor\MyModule\Block\Adminhtml\Product\Edit\Tab\Options\Type;

class Paper extends \Magento\Catalog\Block\Adminhtml\Product\Edit\Tab\Options\Type\Select
{

    protected $_template = 'MyVendor_MyModule::catalog/product/edit/options/type/paper.phtml';

    /**
     * Class constructor
     *
     * @return void
     */
    protected function _construct()
    {
        parent::_construct();
        $this->setTemplate($_template);

    }

}

MyVendor/MyModule/view/adminhtml/templates/catalog/product/edit/options/type/paper.phtml

which is a exact copy of magento/catalog/view/adminhtml/templates/catalog/products/edit/options/type/select.phtml

Best Answer

Our team just recently went through this. In fact, one of our Ace member solved this. So this one is tricky because it nests so close to Magento's core. The best way to go about this is to start with living in vendor/magento/module-catalog

A few sub directories that come to mind would be:

  • Block/Adminhtml/Category/Tab/Product.php
  • Model/Product/Option/Value.php
  • Model/Product/Option/Type/*

Now for the fun part!

In your modules etc, create a product_options.xml and add in something like this:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Catalog:etc/product_options.xsd">
    <option name="CategoryName" label="CategoryName" renderer="Namespace\Module\Block\Adminhtml\Product\Edit\Tab\Options\Type">
        <inputType name="your_custom_type" label="WhatWillBeDisplayed" />
        <inputType name="another_custom_type" label="WhatWillBeDisplayedForThisOne" />

    </option>
</config>

This is the building blocks and mayhap all you'll need moving forward.

With that said, in our build, we required more advanced functionality. This functionality being a custom key to prevent collisions with default key values. We also needed to save them onto a separate table to prevent any undesirables if someone ever removes the module.

If you are looking to add more customization to your implementation, you'll want to take advantage of plugins and you'll want to add something like we have below:

<type name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions">
    <plugin name="Somename_Product_CustomOptions_Modifier"
            type="Namespace\Module\Ui\DataProvider\Product\Form\Modifier\CustomOptionsPlugin"
            disabled="false" />
</type>

<type name="Magento\Catalog\Model\Product\Option">
    <plugin name="Somename_Product_Option"
            type="Namespace\Module\Controller\Adminhtml\Product\Option"
            disabled="false" />
</type>

<type name="Magento\Catalog\Model\Product\Option\Value">
    <plugin name="Somename_Product_Option_Value"
            type="Namespace\Module\Controller\Adminhtml\Product\Option\Value"
            disabled="false" />
</type>
  • The first plugin is to take control over the meta data to inject our structure in preventing any undesired malformed data with Magento's default values.
  • The second plugin is to capture the after save to move the keys around to store the data that Magento will consume as desired.
  • Finally the third plugin is to extract our custom values (not to be confused with Magento's custom option select type values) and save them into our custom table.

Here is a sample of the First plugin CustomOptionPlugin.php. In some cases you may not need to make any changes here, but if you are looking to build custom option inputs you may have to inject them. You'll want the inner file to be something like the following:

<?php
namespace Namespace\Module\Ui\DataProvider\Product\Form\Modifier;

use Magento\Ui\Component\Container;
use Magento\Ui\Component\Form\Field;
use Magento\Ui\Component\Form\Element\Input;
use Magento\Ui\Component\Form\Element\Select;
use Magento\Ui\Component\Form\Element\ActionDelete;
use Magento\Ui\Component\Form\Element\DataType\Text;
use Magento\Ui\Component\Form\Element\DataType\Number;

class CustomOptionsPlugin
{
    /**
     * @var \Magento\Store\Model\StoreManagerInterface
     */
    private $storeManager;

    /**
     * @var \Magento\Catalog\Model\Config\Source\Product\Options\Price
     */
    private $productOptionsPrice;

    public function __construct(
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        \Magento\Catalog\Model\Config\Source\Product\Options\Price $productOptionsPrice,
        \Magento\Ui\Component\Container $container,
        \Namespace\Module\Model\ProductOptionTypeSupportFactory $productOptionTypeSupportFactory
    )
    {
        $this->productOptionTypeSupportFactory = $productOptionTypeSupportFactory->create();
        $this->storeManager = $storeManager;
        $this->productOptionsPrice = $productOptionsPrice;
    }

    /*
     * Method that modifies core Magento edit page for the product
     * Mainly adds additional Custom Option Type
     */
    public function afterModifyMeta($subject, $result)
    {
        // This is where you'll want to add all your values into the $results array
        ...
        return $result;
    }

    /*
     * Method adds data from Custom Table that holds support period dates
     */
    public function afterModifyData($subject, $result)
    {
        /*
         * This here also has a lot of of logic to parse through the $result values to add in the correct values as needed. 
         * I have faith in you.
         */
         ...
         return $result;
    }
}

Depending on your approach and end goal, you may need to use the second and third plugin as well. Feel free to ask any other questions you have and I will do my best to answer them.

Edit w/ addition info for the afterModifyMeta method listed above. Here you'll see the result parameter, this has the values needed to render the code. If you take advantage of var_dump within afterModifyMeta on results parameter using a Magento default option type, you can see how they structure it as well. Here is an example below:

$result['custom_options']['children']['options']['children']['record']['children']['container_option']['children']['values'] = [
        'arguments' => [
            'data' => [
                'config' => [
                    'addButtonLabel' => __('Add Value'),
                    'componentType' => 'dynamicRows',
                    'component' => 'Magento_Ui/js/dynamic-rows/dynamic-rows',
                    'additionalClasses' => 'admin__field-wide',
                    'deleteProperty' => 'is_delete',
                    'deleteValue' => 1,
                    'renderDefaultRecord' => '',
                    'sortOrder' => '40'
                ]
            ]
        ],
        'children' => [
            'record' => [
                'arguments' => [
                    'data' => [
                        'config' => [
                            'componentType' => Container::NAME,
                            'component' => 'Magento_Ui/js/dynamic-rows/record',
                            'positionProvider' => $subject::FIELD_SORT_ORDER_NAME,
                            'isTemplate' => true,
                            'is_collection' => true
                        ]
                    ]
                ],
                'children' => [
                    $subject::FIELD_TITLE_NAME => [
                        'arguments' => [
                            'data' => [
                                'config' => [
                                    'label' => __('Title'),
                                    'componentType' => Field::NAME,
                                    'formElement' => Input::NAME,
                                    'dataScope' => 'title',
                                    'dataType' => 'text',
                                    'sortOrder' => '10',
                                    'validation' => [
                                        'required-entry' => '1'
                                    ]
                                ]
                            ]
                        ]
                    ],
                    $subject::FIELD_PRICE_NAME => [
                        'arguments' => [
                            'data' => [
                                'config' => [
                                    'label' => __('Price'),
                                    'componentType' => Field::NAME,
                                    'formElement' => Input::NAME,
                                    'dataScope' => 'price',
                                    'dataType' => Number::NAME,
                                    'addbefore' => $this->storeManager->getStore()->getBaseCurrency()->getCurrencySymbol(),
                                    'sortOrder' => '20',
                                    'validation' => [
                                        'validate-zero-or-greater' => true
                                    ]
                                ]
                            ]
                        ]
                    ],
                    'paper' => [
                        'arguments' => [
                            'data' => [
                                'config' => [
                                    'label' => __('Paper'),
... Rest of your code here ...
return $result;
Related Topic