0

I am trying to add a custom drop-down in Product edit page. I want to add this drop-down in each image of the product. Please see the following screenshot how I want to show the drop-down.

enter image description here

Can someone help and guide me how to achieve this functionality? I found a phtml file where I can add a drop-down field but I need a help to store this value to each image.

3

You need to use catalog_product_gallery_prepare_layout observer event for that and override gallery.phtml file.

Follow the below steps to add custom drop-down in product edit form :

1) Create events.xml file on this below path for add events catalog_product_gallery_prepare_layout :

/app/code/CompanyName/ModuleName/etc/adminhtml

<?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_gallery_prepare_layout">
        <observer name="change_template" disabled="true"/>
        <observer name="custom_change_template" instance="RH\Helloworld\Observer\ChangeTemplateObserver" />
    </event> 
</config>

2) Create ChangeTemplateObserver.php file for prepare layout of product gallery :

/app/code/CompanyName/ModuleName/Observer

<?php

namespace CompanyName\ModuleName\Observer;

use Magento\Framework\Event\ObserverInterface;

class ChangeTemplateObserver implements ObserverInterface {

    public function execute(\Magento\Framework\Event\Observer $observer) {
        $observer->getBlock()->setTemplate('CompanyName_ModuleName::helper/gallery.phtml');
    }
}

3) Create gallery.phtml on the below path for make layout of product gallery :

/app/code/CompanyName/ModuleName/view/adminhtml/templates/helper

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/** @var $block \Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery\Content */
$elementName = $block->getElement()->getName() . '[images]';
$formName = $block->getFormName();
?>
<div id="<?= $block->getHtmlId() ?>"
     class="gallery"
     data-mage-init='{"productGallery":{"template":"#<?= $block->getHtmlId() ?>-template"}}'
     data-parent-component="<?= $block->escapeHtml($block->getData('config/parentComponent')) ?>"
     data-images="<?= $block->escapeHtml($block->getImagesJson()) ?>"
     data-types="<?= $block->escapeHtml(
         $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($block->getImageTypes())
     ) ?>"
    >
    <?php if (!$block->getElement()->getReadonly()) {?>
        <div class="image image-placeholder">
            <?= $block->getUploaderHtml() ?>
            <div class="product-image-wrapper">
                <p class="image-placeholder-text">
                    <?= /* @escapeNotVerified */ __('Browse to find or drag image here') ?>
                </p>
            </div>
        </div>
    <?php } ?>
    <?php foreach ($block->getImageTypes() as $typeData) {
    ?>
        <input name="<?= $block->escapeHtml($typeData['name']) ?>"
               data-form-part="<?= /* @escapeNotVerified */ $formName ?>"
               class="image-<?= $block->escapeHtml($typeData['code']) ?>"
               type="hidden"
               value="<?= $block->escapeHtml($typeData['value']) ?>"/>
    <?php

} ?>

    <script id="<?= $block->getHtmlId() ?>-template" type="text/x-magento-template">
        <div class="image item<% if (data.disabled == 1) { %> hidden-for-front<% } %>"
             data-role="image">
            <input type="hidden"
                   name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][position]"
                   value="<%- data.position %>"
                   data-form-part="<?= /* @escapeNotVerified */ $formName ?>"
                   class="position"/>
            <input type="hidden"
                   name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][file]"
                   data-form-part="<?= /* @escapeNotVerified */ $formName ?>"
                   value="<%- data.file %>"/>
            <input type="hidden"
                   name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][value_id]"
                   data-form-part="<?= /* @escapeNotVerified */ $formName ?>"
                   value="<%- data.value_id %>"/>
            <input type="hidden"
                   name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][label]"
                   data-form-part="<?= /* @escapeNotVerified */ $formName ?>"
                   value="<%- data.label %>"/>
            <input type="hidden"
                   name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][disabled]"
                   data-form-part="<?= /* @escapeNotVerified */ $formName ?>"
                   value="<%- data.disabled %>"/>
            <input type="hidden"
                   name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][displayimage]"
                   data-form-part="<?= /* @escapeNotVerified */ $formName ?>"
                   value="<%- data.displayimage %>"/>
            <input type="hidden"
                   name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][media_type]"
                   data-form-part="<?= /* @escapeNotVerified */ $formName ?>"
                   value="image"/>
            <input type="hidden"
                   name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][removed]"
                   data-form-part="<?= /* @escapeNotVerified */ $formName ?>"
                   value=""
                   class="is-removed"/>

            <div class="product-image-wrapper">
                <img class="product-image"
                     data-role="image-element"
                     src="<%- data.url %>"
                     alt="<%- data.label %>"/>

                <div class="actions">
                    <button type="button"
                            class="action-remove"
                            data-role="delete-button"
                            title="<?= /* @escapeNotVerified */ __('Delete image') ?>">
                    <span>
                        <?= /* @escapeNotVerified */ __('Delete image') ?>
                    </span>
                    </button>
                    <div class="draggable-handle"></div>
                </div>
                <div class="image-fade"><span><?= /* @escapeNotVerified */ __('Hidden') ?></span></div>
            </div>


            <div class="item-description">
                <div class="item-title" data-role="img-title"><%- data.label %></div>
                <div class="item-size">
                  <span data-role="image-dimens"></span>, <span data-role="image-size"><%- data.sizeLabel %></span>
                </div>
            </div>

            <ul class="item-roles" data-role="roles-labels">
                <?php
                foreach ($block->getImageTypes() as $typeData) {
                    ?>
                    <li data-role-code="<?php /* @escapeNotVerified */ echo $block->escapeHtml(
                        $typeData['code']
                    ) ?>" class="item-role item-role-<?php /* @escapeNotVerified */ echo $block->escapeHtml(
                        $typeData['code']
                    ) ?>">
                        <?= /* @escapeNotVerified */ $block->escapeHtml($typeData['label']) ?>
                    </li>
                    <?php
                }
                ?>
            </ul>
        </div>
    </script>

    <script data-role="img-dialog-container-tmpl" type="text/x-magento-template">
      <div class="image-panel" data-role="dialog">
      </div>
    </script>

    <script data-role="img-dialog-tmpl" type="text/x-magento-template">
            <div class="image-panel-preview">
                <img src="<%- data.url %>" alt="<%- data.label %>" />
            </div>
            <div class="image-panel-controls">
                <strong class="image-name"><%- data.label %></strong>

                <fieldset class="admin__fieldset fieldset-image-panel">
                    <div class="admin__field field-image-description">
                        <label class="admin__field-label" for="image-description">
                            <span><?= /* @escapeNotVerified */ __('Alt Text') ?></span>
                        </label>

                        <div class="admin__field-control">
                            <textarea data-role="image-description"
                                      rows="3"
                                      class="admin__control-textarea"
                                      name="<?php /* @escapeNotVerified */
                                      echo $elementName
                                      ?>[<%- data.file_id %>][label]"><%- data.label %></textarea>
                        </div>
                    </div>

                    <div class="admin__field field-image-role">
                        <label class="admin__field-label">
                            <span><?= /* @escapeNotVerified */ __('Role') ?></span>
                        </label>
                        <div class="admin__field-control">
                            <ul class="multiselect-alt">
                                <?php
                                foreach ($block->getMediaAttributes() as $attribute) :
                                    ?>
                                    <li class="item">
                                        <label>
                                            <input class="image-type"
                                                   data-role="type-selector"
                                                   data-form-part="<?= /* @escapeNotVerified */ $formName ?>"
                                                   type="checkbox"
                                                   value="<?php /* @escapeNotVerified */ echo $block->escapeHtml(
                                                       $attribute->getAttributeCode()
                                                   ) ?>"
                                                />
                                            <?php /* @escapeNotVerified */ echo $block->escapeHtml(
                                                $attribute->getFrontendLabel()
                                            ) ?>
                                        </label>
                                    </li>
                                <?php
                                endforeach;
                                ?>
                            </ul>
                        </div>
                    </div>

                    <div class="admin__field field-display-image">
                        <div class="admin__field-control">
                            <div class="admin__field admin__field-option">
                                <label for="display-image-from-product-page-<%- data.file_id %>" class="admin__field-label">
                                    <?= /* @escapeNotVerified */ __('Custom Image Type') ?>
                                </label>
                                <select class="admin__control-select" data-bind="attr: {name: inputName,id: uid,disabled: disabled,'aria-describedby': noticeId},
                                        hasFocus: focused,
                                        optgroup: options,
                                        value: value,
                                        optionsCaption: caption,
                                        optionsValue: 'value',
                                        optionsText: 'label'" name="custom-dropdown-name" id="custom-dropdown-id">
                                        <option data-title="type1" value="1">Type1</option>
                                        <option data-title="type1" value="2">Type2</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="admin__field admin__field-inline field-image-size" data-role="size">
                        <label class="admin__field-label">
                            <span><?= /* @escapeNotVerified */ __('Image Size') ?></span>
                        </label>
                        <div class="admin__field-value" data-message="<?= /* @escapeNotVerified */ __('{size}') ?>"></div>
                    </div>

                    <div class="admin__field admin__field-inline field-image-resolution" data-role="resolution">
                        <label class="admin__field-label">
                            <span><?= /* @escapeNotVerified */ __('Image Resolution') ?></span>
                        </label>
                        <div class="admin__field-value" data-message="<?= /* @escapeNotVerified */ __('{width}^{height} px') ?>"></div>
                    </div>

                    <div class="admin__field field-image-hide">
                        <div class="admin__field-control">
                            <div class="admin__field admin__field-option">
                                <input type="checkbox"
                                       id="hide-from-product-page"
                                       data-role="visibility-trigger"
                                       data-form-part="<?= /* @escapeNotVerified */ $formName ?>"
                                       value="1"
                                       class="admin__control-checkbox"
                                       name="<?= /* @escapeNotVerified */ $elementName ?>[<%- data.file_id %>][disabled]"
                                <% if (data.disabled == 1) { %>checked="checked"<% } %> />

                                <label for="hide-from-product-page" class="admin__field-label">
                                    <?= /* @escapeNotVerified */ __('Hide from Product Page') ?>
                                </label>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
    </script>
    <?= $block->getChildHtml('new-video') ?>
</div>
<script>
    jQuery('body').trigger('contentUpdated');
</script>

Output :

enter image description here

For more reference : click here

Hope, It will helpful for you.

  • Thanks :) It is very useful. Now I can try it. – Dinesh Yadav Aug 12 at 12:39
  • Okay. Happy to help !! Happy coding :) You can accept answer if it's working for you or if you face issue then, let me know. – Rohan Hapani Aug 12 at 12:40

Your Answer

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

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