3

I want to create custom image swatches for custom option. There is functionality in magento 1 please check this video. https://www.youtube.com/watch?v=tUvVjvgbJzI

I want to develop similar functionality in magento 2. I just want to add multiple images dynamically from the admin. I have created some files for that anyone has an idea how to add multiple custom images and save those images. Please see the attached image.

enter image description here

So i can use those images on the frontend. Don't worry about frontend. I have login for frontend. But for now i want to save custom images from the admin. Please check my module files.

app/code/Bliss/Customcoll/view/adminhtml/ui_component/product_form.xml

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">  
    <fieldset name="my_fieldset" class="Bliss\Customcoll\Ui\Component\Form\Fieldset">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Upload Custom Images</item>
                <item name="sortOrder" xsi:type="number">1000</item>
            </item>
        </argument>
    </fieldset>
</form>

app/code/Bliss/Customcoll/Ui/Component/Form/Fieldset.php

<?php  
namespace Bliss\Customcoll\Ui\Component\Form;


use Magento\Framework\View\Element\UiComponent\ContextInterface;  
use Magento\Framework\View\Element\UiComponentInterface;  
use Magento\Ui\Component\Form\FieldFactory;  
use Magento\Ui\Component\Form\Fieldset as BaseFieldset;

class Fieldset extends BaseFieldset  
{
    /**
     * @var FieldFactory
     */
    private $fieldFactory;

    public function __construct(
        ContextInterface $context,
        array $components = [],
        array $data = [],
        FieldFactory $fieldFactory)
    {
        parent::__construct($context, $components, $data);
        $this->fieldFactory = $fieldFactory;
    }

    /**
     * Get components
     *
     * @return UiComponentInterface[]
     */
    public function getChildComponents()
    {
        $fields = [
            [
                'label' => __('Field Label From Code'),
                'value' => __('Field Value From Code'),
                'formElement' => 'image',
            ],
            [
                'label' => __('Another Field Label From Code'),
                'value' => __('Another Field Value From Code'),
                'formElement' => 'image',
            ],
            [
                'label' => __('Yet Another Field Label From Code'),
                'value' => __('Yet Another Field Value From Code'),
                'formElement' => 'image',
            ]
        ];

        foreach ($fields as $k => $fieldConfig) {
            $fieldInstance = $this->fieldFactory->create();
            $name = 'my_dynamic_field_' . $k;

            $fieldInstance->setData(
                [
                    'config' => $fieldConfig,
                    'name' => $name
                ]
            );

            $fieldInstance->prepare();
            $this->addComponent($name, $fieldInstance);
        }

        return parent::getChildComponents();
    }
}

app/code/Bliss/Customcoll/etc/adminhtml/events.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="catalog_product_save_after">
        <observer name="Bliss_Customcoll::save_custom_data" instance="Bliss\Customcoll\Observer\AfterProductSave"/>
    </event>
</config>

app/code/Bliss/Customcoll/Observer/AfterProductSave.php

<?php

namespace Bliss\Customcoll\Observer;

use Magento\Framework\Event\ObserverInterface;

class AfterProductSave implements ObserverInterface
{

    /**
     * Custom factory
     *
     * @var \Vendor\ModuleName\Model\CustomProductsFactory
     */
    protected $_CustomProductsFactory;

    /**
     * Http Request
     *
     * @var \Magento\Framework\App\Request\Http
     */
    protected $request;


    /**
     * @param \Magento\Customer\Model\ResourceModel\Group\Collection $customerGroup
     * @param \Magento\Framework\App\Request\Http $request
     * @param array $data
     */
    public function __construct(
        \Magento\Catalog\Model\ProductFactory $customProductsFactory,
        \Magento\Framework\App\Request\Http $request,
        array $data = []
    ) {
        $this->_CustomProductsFactory = $customProductsFactory;
        $this->request = $request;
    }


    /**
     *
     *  @param \Magento\Framework\Event\Observer $observer
     */
    public function execute(\Magento\Framework\Event\Observer $observer)
    {

        $product = $observer->getProduct();

        if ((!empty($product))) {
            $productId = $product->getId();
            $requestId = $this->request->getParam('id');
            $productName =  $product->getName();
            $customFieldSetData = serialize($product->getCustomFieldSet());
            if ($productId) {
                $this->saveCustomProductData($requestId,$productId,$customFieldSetData);
            }
        }
    }


    public function saveCustomProductData($requestId,$productId,$customFieldSetData)
    {

        $model = $this->_CustomProductsFactory->create();

        if (empty($requestId)) {
            $data = ['custom_data'=>$customFieldSetData,'product_id'=>$productId];
        } else {
            //load model
            $model->load($productId, 'product_id');
            $data = ['custom_data'=>$customFieldSetData,'product_id'=>$productId];
        }

        $model->addData($data);

        $model->save();
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.