Magento – Magento2 : How to add a new product custom option type

custom-optionsmagento2xml

Two years ago, I developed under Magento 1.9 a module aiming at adding a new product custom option input type using this tutorial :

http://magento.ikantam.com/qa/custom-input-types-custom-options

I would like now to do the same under Magento 2.1, but as I am just starting developing under Magento 2, I did not manage…

I saw the method to add a product type was to write a product_types.xml file declaring the new type. Is it possible to do the same way, i.e. creating a product_option_types.xml or something like?

Could you please help me on this custom option input type xml declaration?

Thanks for your help,

EDIT :

I started the module using other module examples :

Mine/Custoptiontype/etc/module.xml

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Mine_Custoptiontype" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

Mine/Custoptiontype/etc/product_types.xml

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Catalog:etc/product_options.xsd">
    <option name="xfile" label="X File" renderer="Mine\Custoptiontype\Block\Adminhtml\Product\Edit\Tab\Options\Type\Xfile">
        <inputType name="xfile" label="X File" />
    </option>
</config>

Mine\Custoptiontype\Block\Adminhtml\Product\Edit\Tab\Options\Type\Xfile.php

<?php
namespace Mine\Custoptiontype\Block\Adminhtml\Product\Edit\Tab\Options\Type;

class Xfile extends \Magento\Catalog\Block\Adminhtml\Product\Edit\Tab\Options\Type\AbstractType
{
    /**
     * @var string
     */
    protected $_template = 'catalog/product/edit/options/type/xfile.phtml';
}

I then installed the module.
My new option type is present in the backend under product, but when I select it, the file.phtml is not displayed…

Best Answer

Here is the way to the solution :

1. Create the module

2. Declare your new product option : app/code/Vendor/Module/etc/product_options.xml

3. Add the new custom Option in Admin/Product :

  • Vendor\Module\Block\Adminhtml\Catalog\Product\Edit\Tab\Options\Type\Newtype.php
  • Vendor\Module\Block\Adminhtml\Catalog\Product\Edit\Tab\Options\Option.php to define the template
  • create the associated .phtml files

Vendor/Module/view/adminhtml/templates/catalog/product/edit/options/type/newtype.phtml

and

Vendor/Module/view/adminhtml/templates/catalog/product/edit/options/option.phtml

4. Add the new custom Option in Frontend Catalog :

  • Vendor\Module\Block\Catalog\Product\View\Options\Type\Newtype.php;
  • The associated template : Vendor/Module/view/frontend/templates/catalog/product/view/options/type/newtype.phtml
  • The layout definition : Vendor\Module\view\frontend\layout\catalog_product_view.xml

5. the Models for all that

  • Vendor\Module\Model\Catalog\Product\Option\Type\Newtype.php
  • Vendor\Module\Model\Catalog\Product\Option.php
  • Vendor\Module\Model\Catalog\ResourceModel\Product\Option.php

6. Extend Ui :

  • Vendor\Module\Ui\DataProvider\Catalog\Product\Form\Modifier\CustomOptions.php

Hope this help !