3

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

enter image description here

5

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" type="checkbox" translate="label" sortOrder="104" showInDefault="1" showInWebsite="0" showInStore="0">
    <frontend_model>Vendor\Module\Block\Adminhtml\System\Config\Advanced</frontend_model>
    <attribute type="shared">1</attribute>
</field>  

Block file which is the class Advanced code

<?php

namespace Vendor\Module\Block\Adminhtml\System\Config;

class Advanced extends \Magento\Config\Block\System\Config\Form\Field
{
/**
 * Template path
 *
 * @var string
 */
protected $_template = 'system/config/advance/check.phtml';

/**
 * Render fieldset html
 *
 * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
 * @return string
 */
public function render(\Magento\Framework\Data\Form\Element\AbstractElement $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";
    }
}
</script>
<label class="switch">
    <input type="checkbox" onclick="myFunction()" checked>
    <span class="slider round" id="spa"></span>
</label>
<span id="toggle"></span>

Main reference for the whole idea

The output

Yes No

| improve this answer | |
  • 2
    Do you spent a lot of hours to obtain that? Why you could not be happy with the dropdown? Are you crazy :) +1 for your determination – LucScu Jan 23 '19 at 8:54
  • I am getting this error.. 1 exception(s): Exception #0 (Magento\Framework\Exception\ValidatorException): Invalid template file: 'system/config/advance/check.phtml' in module: 'Vendor_Module' block's name: 'adminhtml\system\config\advanced_0' – Ajwad Syed Apr 24 '19 at 9:22
  • @AjwadTaqvi where did you put your phtml file? can you show which path – fmsthird Apr 24 '19 at 9:25
  • it should be under view/adminhtml/templates/system/config/advance/check.phtml – fmsthird Apr 24 '19 at 9:33
  • Yes, the path was not correct, now template is detected but toggle is not coming in System configuration page. Output is paste.pics/c528ac1adbbfaa385c81b4f9a912e6db – Ajwad Syed Apr 24 '19 at 9:43
1

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>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
...

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

| improve this answer | |
  • I have updated the question with your answer and inserted the output. kindly check – fmsthird Jan 4 '19 at 10:03
  • I need a toggle switch like in the first image. – fmsthird Jan 4 '19 at 10:12
  • ok, i understand now...i think is not possible, i don't found anything like you need in the core, every enable settings are with dropdown. Why don't you use a dropdown, but you need a switch? – LucScu Jan 4 '19 at 14:29
  • a switch is a toggle it is better to use than selecting an option using dropdown. – fmsthird Jan 5 '19 at 0:32
  • 1
    okay I'll be posting it. – fmsthird Jan 7 '19 at 10:52

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.