0

I have a system.xml which has 2 yes/no fields.

<field id="popup" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Pop Up</label>
    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
<field id="embed" translate="label" type="select" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Embed</label>
    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>

If the popup is set to yes I want to set the embed to no automatically and if the embed is set to yes set the popup to no.

Is it possible to do this?

2 Answers 2

1

Here is the solution:

You can use the below JS code to map the dropdown values:

require(["jquery", "domReady!"], function ($) {
    $(document).ready(function () {
        var popupField = $("#popup_section_id_popup_group_id_popup_field");
        var embedField = $("#embed_section_id_embed_group_id_embed_field");

        // Change event listener for the popup field
        popupField.change(function () {
            updateEmbedField($(this).val());
        });

        // Function to update the embed field based on the popup field value
        function updateEmbedField(popupValue) {
            var embedValue;

            // use the values as per your dropdown
            if (popupValue == 1) {
                embedValue = 0;
            } else {
                embedValue = 1;
            }
            embedField.val(embedValue);
        }
    });
});

Steps:

  1. Create a JS file with above code.
  2. Call the JS file into the backend.

Note: I have tested it on my local setup & it seems to be working fine.

0
1

In your system.xml file add below code as per your requiremnet

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="vendor" translate="label" class="vendor" sortOrder="100">
            <label>vendor</label>
        </tab>
        <section id="extension" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1"
                 showInStore="1">
            <class>separator-top</class>
            <label>Extension</label>
            <tab>vendor</tab>
            <resource>Vendor_Extension::config_extension</resource>
            <group id="general" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1"
                   showInStore="1">
                <label>Slider</label>
                <field id="popup" translate="label" type="select" sortOrder="1" showInDefault="1"
                       showInWebsite="1" showInStore="1">
                    <label>Pop Up</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <frontend_model>Vendor\Extension\Block\Adminhtml\System\Config\Field\Template</frontend_model>
                </field>
                <field id="embed" translate="label" type="select" sortOrder="2" showInDefault="1"
                       showInWebsite="1" showInStore="1">
                    <label>Embed</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
            </group>
        </section>
    </system>
</config>

Add Template.php Block file in the below path Vendor\Extension\Block\Adminhtml\System\Config\Field\Template.php

<?php

namespace Vendor\Extension\Block\Adminhtml\System\Config\Field;

use Magento\Config\Block\System\Config\Form\Field;
use Magento\Framework\Data\Form\Element\AbstractElement;

class Template extends Field
{

    /**
     * Retrieve element HTML markup
     * 
     * @param AbstractElement $element
     * @return string
     */
    protected function _getElementHtml(AbstractElement $element): string
    {
        $html = $element->getElementHtml();
        $html .= <<<HTML
        <script type="text/javascript">
            require(["jquery"], function ($) {
                $(document).ready(function () {
                    var input = $("#{$element->getHtmlId()}"),
                    input2 = $("#extension_general_embed");

                    input.change(function() {
                        var value = $(this).val();
                        input2.val(value === '1' ? '0' : '1');
                    });

                    input2.change(function() {
                        var value = $(this).val();
                        input.val(value === '1' ? '0' : '1');
                    });
                });
            });
        </script>
        HTML;

        return $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.