I would like to add new custom option text field like 'New Text Field Title' in the magento 2.x 'Customizable Options' section could you please suggest me and guide me how to add please refer my screenshot.
Magento 2 – Add New Custom Option Text Field
magento2
Related Solutions
Here is how I added Inventory text field for Drop-down custom option.
Create a module using following code -
app/code/MyCompany/MyModule/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="MyCompany_MyModule" setup_version="1.0.0" />
</config>
app/code/MyCompany/MyModule/etc/adminhtml/di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions" type="MyCompany\MyModule\Ui\DataProvider\Product\Form\Modifier\CustomOptions" />
</config>
app/code/MyCompany/MyModule/Ui/DataProvider/Product/Form/Modifier/CustomOptions.php
<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace MyCompany\MyModule\Ui\DataProvider\Product\Form\Modifier;
use Magento\Catalog\Model\Locator\LocatorInterface;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Catalog\Model\ProductOptions\ConfigInterface;
use Magento\Catalog\Model\Config\Source\Product\Options\Price as ProductOptionsPrice;
use Magento\Framework\UrlInterface;
use Magento\Framework\Stdlib\ArrayManager;
use Magento\Ui\Component\Modal;
use Magento\Ui\Component\Container;
use Magento\Ui\Component\DynamicRows;
use Magento\Ui\Component\Form\Fieldset;
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\Checkbox;
use Magento\Ui\Component\Form\Element\ActionDelete;
use Magento\Ui\Component\Form\Element\DataType\Text;
use Magento\Ui\Component\Form\Element\DataType\Number;
use Magento\Framework\Locale\CurrencyInterface;
class CustomOptions extends \Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions
{
/**#@+
* Field values
*
*/
const FIELD_QTY_NAME = 'quantity';
/**
* Get config for grid for "select" types
*
* @param int $sortOrder
* @return array
*/
protected function getSelectTypeGridConfig($sortOrder)
{
return [
'arguments' => [
'data' => [
'config' => [
'addButtonLabel' => __('Add Value'),
'componentType' => DynamicRows::NAME,
'component' => 'Magento_Ui/js/dynamic-rows/dynamic-rows',
'additionalClasses' => 'admin__field-wide',
'deleteProperty' => static::FIELD_IS_DELETE,
'deleteValue' => '1',
'renderDefaultRecord' => false,
'sortOrder' => $sortOrder,
],
],
],
'children' => [
'record' => [
'arguments' => [
'data' => [
'config' => [
'componentType' => Container::NAME,
'component' => 'Magento_Ui/js/dynamic-rows/record',
'positionProvider' => static::FIELD_SORT_ORDER_NAME,
'isTemplate' => true,
'is_collection' => true,
],
],
],
'children' => [
static::FIELD_TITLE_NAME => $this->getTitleFieldConfig(10),
static::FIELD_PRICE_NAME => $this->getPriceFieldConfig(20),
static::FIELD_PRICE_TYPE_NAME => $this->getPriceTypeFieldConfig(30, ['fit' => true]),
static::FIELD_SKU_NAME => $this->getSkuFieldConfig(40),
static::FIELD_SORT_ORDER_NAME => $this->getPositionFieldConfig(50),
static::FIELD_QTY_NAME => $this->getQtyFieldConfig(55),
static::FIELD_IS_DELETE => $this->getIsDeleteFieldConfig(60)
]
]
]
];
}
/**
* Get config for "Inventory" fields
*
* @param $sortOrder
* @param array $options
* @return array
*/
protected function getQtyFieldConfig($sortOrder, array $options = [])
{
return array_replace_recursive(
[
'arguments' => [
'data' => [
'config' => [
'label' => __('Inventory'),
'componentType' => Field::NAME,
'formElement' => Input::NAME,
'dataScope' => static::FIELD_QTY_NAME,
'dataType' => Text::NAME,
'sortOrder' => $sortOrder,
'validation' => [
'validate-digits' => true
],
],
],
],
],
$options
);
}
}
Add a column with name 'quantity' in Database table 'catalog_product_option_type_value' for storing the inventory value.
Hope this helps.
Create a plugin for that. So you need to create new module Or add following code into your existing module.
SR/StackExchange/etc/adminhtml/di.xml
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Catalog\Model\Config\Source\Product\Options\Price"> <plugin name="sr_stackexchange_add_price_type" type="SR\StackExchange\Plugin\Catalog\Model\Config\Source\Product\Options\Price" sortOrder="1"/> </type> </config>
SR/StackExchange/Plugin/Catalog/Model/Config/Source/Product/Options/Price.php
namespace SR\StackExchange\Plugin\Catalog\Model\Config\Source\Product\Options; class Price { /** * {@inheritdoc} * * @codeCoverageIgnore */ public function afterToOptionArray( \Magento\Catalog\Model\Config\Source\Product\Options\Price $subject, array $priceTypeOption ){ $priceTypeOption[] = ['value' => 'new_type', 'label' => __('New Type')]; return $priceTypeOption; } }
Clear magento cache.
Best Answer
Create a plugin for that. Try following way:
SR/StackExchange/etc/adminhtml/di.xml
SR/StackExchange/Plugin/Catalog/Ui/DataProvider/Product/Form/Modifier/CustomOptions.php
Clear Magento cache.
NB: This solution only for M2.1.x. and greater.
[Update]
How to save?
-> create a column 'catalog_product_option' table same as field name. e.g: custom_text
-> clear cache.