2

We created text box near to custom option can it be possible to put wysiwyg?

enter image description here

Code we use for that

StackExchange\Affordablemantel\Plugin\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions\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\Ui\DataProvider\Product\Form\Modifier\CustomOptions">
        <plugin name="stackexchange_affordablemantel_custom_option" type="StackExchange\Affordablemantel\Plugin\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions" sortOrder="1"/>
    </type>
</config>

StackExchange\Affordablemantel\Plugin\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions.php

<?php
namespace StackExchange\Affordablemantel\Plugin\Catalog\Ui\DataProvider\Product\Form\Modifier;


class CustomOptions
{

    public function afterModifyMeta(
        \Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions $subject,
        $meta
    ) {
        $meta['custom_options']['children']['options']['children']['record']['children']['container_option']['children']['container_common']['children']['custom_text'] =
        $this->getTitleFieldConfig(
            200,
            [
                'arguments' => [
                    'data' => [
                        'config' => [
                            'label' => __('Custom Text'),
                            'component' => 'Magento_Catalog/component/static-type-input',
                            'valueUpdate' => 'input',
                            'imports' => [
                                'optionId' => '${ $.provider }:${ $.parentScope }.option_id'
                            ]
                        ],
                    ],
                ],
            ]
        );
        return $meta;
    }

    /**
     * Get config for "Title" fields
     *
     * @param int $sortOrder
     * @param array $options
     * @return array
     */
    protected function getTitleFieldConfig($sortOrder, array $options = [])
    {
        return array_replace_recursive(
            [
                'arguments' => [
                    'data' => [
                        'config' => [
                            'label' => __('Custom Text'),
                            'componentType' => \Magento\Ui\Component\Form\Field::NAME,
                            'formElement' => \Magento\Ui\Component\Form\Element\Input::NAME,
                            'dataScope' => 'custom_text',
                            'dataType' => \Magento\Ui\Component\Form\Element\DataType\Text::NAME,
                            'sortOrder' => $sortOrder,
                            'validation' => [
                                'required-entry' => false
                            ],
                        ],
                    ],
                ],
            ],
            $options
        );
    }
}

create a column 'catalog_product_option' table same as field name. e.g: custom_text

2 Answers 2

4

Please update your

StackExchange\Affordablemantel\Plugin\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions.php

File with below code

<?php
namespace StackExchange\Affordablemantel\Plugin\Catalog\Ui\DataProvider\Product\Form\Modifier;


class CustomOptions
{

   public function afterModifyMeta(
       \Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions $subject,
       $meta
   ) {
       $meta['custom_options']['children']['options']['children']['record']['children']['container_option']['children']['container_common']['children']['custom_text'] =
       $this->getTitleFieldConfig(
           200,
           [
               'arguments' => [
                   'data' => [
                       'config' => [
                           'label' => __('Custom Text'),
                           'component' => 'Magento_Ui/js/form/element/wysiwyg', // updated
                           'valueUpdate' => 'input',
                           'imports' => [
                               'optionId' => '${ $.provider }:${ $.parentScope }.option_id'
                           ]
                       ],
                   ],
               ],
           ]
       );
       return $meta;
   }

   /**
    * Get config for "Title" fields
    *
    * @param int $sortOrder
    * @param array $options
    * @return array
    */
   protected function getTitleFieldConfig($sortOrder, array $options = [])
   {
       return array_replace_recursive(
           [
               'arguments' => [
                   'data' => [
                       'config' => [
                           'label' => __('Custom Text'),
                           'componentType' => \Magento\Ui\Component\Form\Field::NAME,
                           'formElement' => \Magento\Ui\Component\Form\Element\Wysiwyg::NAME, //updated
                           'dataScope' => 'custom_text',
                           'dataType' => \Magento\Ui\Component\Form\Element\Wysiwyg::NAME, //updated
                           'sortOrder' => $sortOrder,
                           'validation' => [
                               'required-entry' => false
                           ],
                       ],
                   ],
               ],
           ],
           $options
       );
   }
}
2

You can use 'Magento_Ui/js/form/element/wysiwyg' component.

Ref. http://devdocs.magento.com/guides/v2.1/ui_comp_guide/components/ui-wysiwyg.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.