Kdjykuj

I understand that we can create a toggle switch using form with ui_component. However, I want to create an admin configuration for my custom module using system.xml configuration.

Is there any way to apply the toogle switch (yes/no) (which is a ui_component of magento, to system.xml configuration?
I want it to be implemented instead of a select type with dropdown option.

reference: Magento 2 form field toggled type

After several research, I come up with a solution that just provide solution to my requirement. (Not a clean code but still able to come up with the expected results)

I ended up creating a block to be inserted in the admin system config using the <frontend_model/> markers reference here

First, I added a Field inside system.xml config gile. It goes like this:

   <field id="status" translate="label" sortOrder="104" showInDefault="1" showInWebsite="0" showInStore="0">

                <frontend_model>VendorModuleBlockAdminhtmlSystemConfigAdvanced</frontend_model>

                <attribute type="shared">1</attribute>

   </field>  

Block file which is the class Advanced code

<?php



namespace VendorModuleBlockAdminhtmlSystemConfig;



class Advanced extends MagentoConfigBlockSystemConfigFormField

{

/**

 * Template path

 *

 * @var string

 */

protected $_template = 'system/config/advance/check.phtml';



/**

 * Render fieldset html

 *

 * @param MagentoFrameworkDataFormElementAbstractElement $element

 * @return string

 */

public function render(MagentoFrameworkDataFormElementAbstractElement $element)

{

    //$columns = $this->getRequest()->getParam('website') || $this->getRequest()->getParam('store') ? 5 : 4;

    return $this->_decorateRowHtml($element, "<td class='label'>Label Text</td><td>" . $this->toHtml() . '</td><td></td>');

}

}

check.phtml code the phtml file

<style>

.switch {

    position: relative;

    display: inline-block;

    width: 37px;

    height: 22px;

    vertical-align: middle;



}



.switch input {

    opacity: 0;

    width: 0;

    height: 0;

}



.slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #ccc;

    -webkit-transition: .4s;

    transition: .4s;

    vertical-align: middle;



}

.sliderOne {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #ccc;

    -webkit-transition: .4s;

    transition: .4s;

    vertical-align: middle;



}



.slider:before {

    position: absolute;

    content: "";

    height: 22px;

    width: 22px;

    left: -7.75px;

    bottom: 0px;

    background-color: white;

    -webkit-transition: .4s;

    transition: .4s;

    vertical-align: middle;



}

.sliderOne:before {

    position: absolute;

    content: "";

    height: 22px;

    width: 22px;

    left: .5px;

    bottom: 0px;

    background-color: white;

    -webkit-transition: .4s;

    transition: .4s;

    vertical-align: middle;



}



input:checked + .slider {

    background-color: #79a22e;

}



input:focus + .slider {

    box-shadow: 0 0 0px #2196F3;



}



input:checked + .sliderOne {

    background-color: #79a22e;

}



input:focus + .sliderOne {

    box-shadow: 0 0 0px #2196F3;



}



input:checked + .slider:before {

    -webkit-transform: translateX(22px);

    -ms-transform: translateX(22px);

    transform: translateX(22px);



}

input:checked + .sliderOne:before {

    -webkit-transform: translateX(22px);

    -ms-transform: translateX(22px);

    transform: translateX(22px);



}



/* Rounded sliders */

.slider.round {

    border-radius: 35px;



}



.slider.round:before {

    border-radius: 100%;

    display: inline-block;



}



.sliderOne.round {

    border-radius: 35px;



}



.sliderOne.round:before {

    border-radius: 100%;

    display: inline-block;



}



</style>

<script>

function myFunction() {



    if(document.getElementById('spa').classList.contains("slider")) {

        document.getElementsByClassName("slider")[0].setAttribute("class","sliderOne round");

        document.getElementById('toggle').innerHTML = "  &nbsp; No";

    }else{

        document.getElementsByClassName("sliderOne")[0].setAttribute("class","slider round");

        document.getElementById('toggle').innerHTML = "  &nbsp; Yes";

    }

}

Main reference for the whole idea

The output

You have to use this code in your system.xml

...

<field id="enable_product" translate="label" type="select" sortOrder="0" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">

    <label>Enable Product</label>

    <source_model>MagentoConfigModelConfigSourceYesno</source_model>

</field>

...

For a full example take a look at system.xml of a mine extension here.