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.
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.
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 :
For more reference : click here
Hope, It will helpful for you.
