0

I want to add custom field for image upload in custom option value like given in image. I tried following Magento 2 add new custom option image upload field but it add earlier while i need it with custom option value.

enter image description here

1
  • Here is the solution for the same: To add an extra field to Magento product custom options, you can refer to the following link: mageworx.com/blog/… Using the above link, you can easily add an additional field to the custom options. The link provided demonstrates how to create a text field, but you can modify it to add an image field instead. Feb 1 at 9:17

1 Answer 1

0

Use the below Solution based on your requirement

app/code/Vendor/ModuleName/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">
    <virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool"
                 type="Magento\Ui\DataProvider\Modifier\Pool">
        <arguments>
            <argument name="modifiers" xsi:type="array">
                <item name="custom-options-images" xsi:type="array">
                    <item name="class" xsi:type="string">
                        Vendor\ModuleName\Ui\DataProvider\Product\Form\Modifier\CustomOptions
                    </item>
                    <item name="sortOrder" xsi:type="number">55</item>
                </item>
            </argument>
        </arguments>
    </virtualType>
</config>

app/code/Vendor/ModuleName/Ui/DataProvider/Product/Form/Modifier/CustomOptions.php

<?php

namespace Vendor\ModuleName\Ui\DataProvider\Product\Form\Modifier;

use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions as OriginalCustomOptions;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Catalog\Model\Locator\LocatorInterface;
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\Framework\App\Config\ScopeConfigInterface;

class CustomOptions extends OriginalCustomOptions
{
    const FIELD_IMAGE_UPLOAD_NAME = 'image';

    private $scopeConfig;

    /**
     * @param LocatorInterface $locator
     * @param StoreManagerInterface $storeManager
     * @param ConfigInterface $productOptionsConfig
     * @param ProductOptionsPrice $productOptionsPrice
     * @param UrlInterface $urlBuilder
     * @param ArrayManager $arrayManager
     * @param ScopeConfigInterface $scopeConfig
     */
    public function __construct(
        LocatorInterface      $locator,
        StoreManagerInterface $storeManager,
        ConfigInterface       $productOptionsConfig,
        ProductOptionsPrice   $productOptionsPrice,
        UrlInterface          $urlBuilder,
        ArrayManager          $arrayManager,
        ScopeConfigInterface  $scopeConfig
    )
    {
        $this->scopeConfig = $scopeConfig;
        parent::__construct(
            $locator,
            $storeManager,
            $productOptionsConfig,
            $productOptionsPrice,
            $urlBuilder,
            $arrayManager
        );
    }

    /**
     * @param array $data
     * @return array
     */
    public function modifyData(array $data)
    {
        return $data;
    }

    /**
     * @param array $meta
     * @return array
     */
    public function modifyMeta(array $meta)
    {
        $this->meta = $meta;
        $this->createCustomOptionsPanel();
        $this->setColumnOrder('image', 35);
        return $this->meta;
    }

    protected function createCustomOptionsPanel()
    {
        $this->meta = array_replace_recursive(
            $this->meta,
            [
                static::GROUP_CUSTOM_OPTIONS_NAME => [
                    'children' => [
                        static::GRID_OPTIONS_NAME => $this->getOptionsGridConfig(10),
                    ],
                ],
            ]
        );

        return $this;
    }

    protected function getOptionsGridConfig($sortOrder)
    {
        return [
            'children' => [
                'record' => [
                    'children' => [
                        static::CONTAINER_OPTION => [
                            'children' => [
                                static::GRID_TYPE_SELECT_NAME => $this->getSelectTypeGridConfig(10),
                            ],
                        ],
                    ],
                ],
            ],
        ];
    }

    protected function getSelectTypeGridConfig($sortOrder)
    {
        $imagesGrid = [
            'children' => [
                'record' => [
                    'children' => [
                        static::FIELD_IMAGE_UPLOAD_NAME => $this->getImgConfig(10),
                    ],
                ],
            ],
        ];

        return $imagesGrid;
    }

    private function getImgConfig($sortOrder)
    {
        return [
            'arguments' => [
                'data' => [
                    'config' => [
                        'label' => __('Swatch Image'),
                        'componentType' => 'field',
                        'formElement' => 'fileUploader',
                        'dataScope' => 'image',
                        'dataType' => 'file',
                        'fileInputName' => 'image',
                        'sortOrder' => 35,
                        'isMultipleFiles' => false,
                        'elementTmpl'        => 'Magento_Ui/js/form/element/file-uploader',
                        'previewTmpl'     => 'Magento_Catalog/image-preview',
                        'uploaderConfig' => [
                            'url' => 'helloworld/index/upload',
                            'imageUrl' => 'tttt',
                        ],
                    ],
                ],
            ],
        ];
    }

    /**
     * @param string $name
     * @param int $order
     * @return void
     */
    private function setColumnOrder(string $name, int $order)
    {
        $columns = &$this->meta[static::GROUP_CUSTOM_OPTIONS_NAME]['children'][static::GRID_OPTIONS_NAME]
        ['children']['record']['children'][static::CONTAINER_OPTION]['children'][static::GRID_TYPE_SELECT_NAME]
        ['children']['record']['children'];
        $columns[$name]['arguments']['data']['config']['sortOrder'] = $order;
    }
}

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.