Reading list Switch to dark mode

    How to create checkbox field in system configuration Magento 2

    Updated 22 February 2024

    Here we learn, how to create checkbox field in system configuration Magento 2.

    1. Create a field in system.xml (Webkul/DemoModule/etc/adminhtml/system.xml)

    <field id="checkbox" translate="label" sortOrder="350" showInDefault="1" showInWebsite="1" showInStore="0">
       <label>Checkbox</label>
       <frontend_model>Webkul\DemoModule\Block\System\Config\Checkbox</frontend_model>
    </field>

    2. Now create Frontend Model file Checkbox.php (Webkul/DemoModule/Block/System/Config/Checkbox.php)

    <?php
    /**
     * Webkul Software.
     *
     * @category  Webkul
     * @package   Webkul_DemoModule
     * @author    Webkul
     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
     * @license   https://store.webkul.com/license.html
     */
    namespace Webkul\DemoModule\Block\System\Config;
    
    class Checkbox extends \Magento\Config\Block\System\Config\Form\Field
    {
        const CONFIG_PATH = 'demomodule/group_id/checkbox';
    
        protected $_template = 'Webkul_DemoModule::system/config/checkbox.phtml';
    
        protected $_values = null;
        /**
         * @param \Magento\Backend\Block\Template\Context $context
         * @param \Magento\Config\Model\Config\Structure $configStructure
         * @param array $data
         */
        public function __construct(
            \Magento\Backend\Block\Template\Context $context,
            array $data = []
        ) {
            parent::__construct($context, $data);
        }
        /**
         * Retrieve element HTML markup.
         *
         * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
         *
         * @return string
         */
        protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
        {
            $this->setNamePrefix($element->getName())
                ->setHtmlId($element->getHtmlId());
    
            return $this->_toHtml();
        }
        
        public function getValues()
        {
            $values = [];
            $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    
            foreach ($objectManager->create('Webkul\DemoModule\Model\Config\Source\Checkbox')->toOptionArray() as $value) {
                $values[$value['value']] = $value['label'];
            }
    
            return $values;
        }
        /**
         * 
         * @param  $name 
         * @return boolean
         */
        public function getIsChecked($name)
        {
            return in_array($name, $this->getCheckedValues());
        }
        /**
         * 
         *get the checked value from config
         */
        public function getCheckedValues()
        {
            if (is_null($this->_values)) {
                $data = $this->getConfigData();
                if (isset($data[self::CONFIG_PATH])) {
                    $data = $data[self::CONFIG_PATH];
                } else {
                    $data = '';
                }
                $this->_values = explode(',', $data);
            }
    
            return $this->_values;
        }
    }

    3. Create Webkul/DemoModule/Model/Config/Source/Checkbox.php

    <?php
    /**
     * Webkul Software.
     *
     * @category  Webkul
     * @package   Webkul_DemoModule
     * @author    Webkul
     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
     * @license   https://store.webkul.com/license.html
     */
    namespace Webkul\DemoModule\Model\Config\Source;
    
    /**
     * Used in creating options for getting product type value
     *
     */
    class Checkbox
    {
        /**
         * Options getter
         *
         * @return array
         */
        public function toOptionArray()
        {
            return [['value' => 'checkbox', 'label'=>__('Checkbox')]];
        }
    }

    4. Finally Create template file(Webkul/DemoModule/view/adminhtml/templates/system/config/checkbox.phtml) which we have defined in Webkul/DemoModule/Block/System/Config/Checkbox.php File

    Start your headless eCommerce
    now.
    Find out More
    <input type="hidden" name="<?php echo $block->getNamePrefix() ?>" value="" /><!-- this is send if nothing is checked -->
    <ul class="checkboxes">
        <?php foreach ($block->getValues() as $name => $label): ?>
            <li>
                <input type="checkbox" value="<?php echo $name?>" name="<?php echo $block->getNamePrefix() ?>[]"
                        id="<?php echo $block->getHtmlId() . '_' . $name ?>"
                        <?php echo ($block->getIsChecked($name) ? ' checked="checked"' : '') ?>/>
                <label for="<?php echo $block->getHtmlId() . '_' . $name ?>">
                    <?php echo $label ?>
                </label>
            </li>
        <?php endforeach;?>
    </ul>

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home