Custom block with store configuration options in Magento 2

Often clients want to enable/disable or modify some blocks or contents. Let me show you how to implement custom block and add store config options for it through simple module. We’ll create a quick module named “Mymodule”.

Let’s look at the list of files we’ll create:

app/code/Cookiecode/Mymodule/Block/FirstBlock.php
app/code/Cookiecode/Mymodule/etc/adminhtml/system.xml
app/code/Cookiecode/Mymodule/etc/module.xml
app/code/Cookiecode/Mymodule/Helper/Data.php
app/code/Cookiecode/Mymodule/Model/System/Config/Source/Blockoptions.php
app/code/Cookiecode/Mymodule/view/frontend/layout/default.xml
app/code/Cookiecode/Mymodule/view/frontend/templates/firstblock.phtml
app/code/Cookiecode/Mymodule/registration.php

Step 1. Define module

Latest Magento 2 version implements registration component for modules, themes and languages. That’s why we’ll create “registration.php” file within our module structure. Second news is that modules can live anywhere under the Magento root directory, see more details here.

registration.php

<?php

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Cookiecode_Mymodule', __DIR__);

<?php

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Cookiecode_Mymodule', __DIR__);

“module.xml” file is core part of every module. There’s a code snippet of the file.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Cookiecode_Mymodule" setup_version="1.0.0" />
</config>

<?xml version="1.0"?>

</config>

Additionally, to create “composer.json” find more information here.

Step 2. Create block and block class

In this step we’ll create block, name it “firstblock.phtml” and save it into the “default.xml” file. Call that block inside content part of every page. First, we need to define our block into file “FirstBlock.php”.

firstblock.phtml

<div style="background: #ff0; padding: 50px; margin: 0 auto; text-align: center;">
       <h1>Cookiecode First Block!!!</h1>
</div>

<h1>Cookiecode First Block!!!</h1>

</div>

FirstBlock.php – here we’ve created block class which we’ll use for our block into xml files.

<?php
namespace Cookiecode\Mymodule\Block;
class FirstBlock extends \Magento\Framework\View\Element\Template
{
}
?>

<?php

namespace Cookiecode\Mymodule\Block;

class FirstBlock extends \Magento\Framework\View\Element\Template

{

}

default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Cookiecode\Mymodule\Block\FirstBlock" name="firstblock" template="firstblock.phtml" />
        </referenceContainer>
    </body>
</page>

<body>

</referenceContainer>

</body>

</page>

Now we can do “bin/php magento setup:upgrade” through the terminal and clear cache. After refreshing the homepage you’ll be able to see yellow block.

Step 3. Creating store configuration options (system configuration)

Now we’ll create config options within Magento configuration “Stores -> Configuration -> Cookiecode -> Block config”

system.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
    <system>

        <tab id="cookiecode" translate="label" sortOrder="50">
            <label>Cookiecode</label>
            <class>cookiecode</class>
        </tab>

        <section id="cc_block_config" translate="label" type="text" sortOrder="200" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Block config</label>
            <tab>cookiecode</tab>
            <resource>Cookiecode_Mymodule::mymodule</resource>

            <group id="cc_custom_block" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Custom block options</label>

                <field id="cc_enable_custom_block" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable custom block</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                
                <field id="cc_block_width" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Block width</label>
                    <source_model>Cookiecode\Mymodule\Model\System\Config\Source\Blockoptions</source_model>
                    <depends>
                        <field id="cc_enable_custom_block">1</field>
                    </depends>
                </field>
            </group>
        </section>
    </system>
</config>

<label>Cookiecode</label>

<class>cookiecode</class>

</tab>

<label>Block config</label>

<tab>cookiecode</tab>

<resource>Cookiecode_Mymodule::mymodule</resource>

<label>Custom block options</label>

<label>Enable custom block</label>

<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>

</field>

<label>Block width</label>

<source_model>Cookiecode\Mymodule\Model\System\Config\Source\Blockoptions</source_model>

</depends>

</field>

</group>

</section>

</system>

</config>

The “Block width” will be visible depending on whether the field “Enable custom block” is set as “Yes” – <depends><field id=”cc_enable_custom_block”>1</field></depends>

For more details on available types of fields in system configuration you can read this article.

Step 4. Model for custom store config options.

This line of code, form step 3 “<source_model>Cookiecode\Mymodule\Model\System\Config\Source\Blockoptions</source_model>“ will call model which we’ll create now. Similarly, we can add custom options on all types of fields into Magento configuration.

Blockoptions.php

<?php

namespace Cookiecode\Mymodule\Model\System\Config\Source;

class Blockoptions implements \Magento\Framework\Option\ArrayInterface
{
    /**
     * @return array
     */
    public function toOptionArray()
    {
        return array(
            array('value' => '100%', 'label' => __('100%')),
            array('value' => '75%', 'label' => __('75%')),
            array('value' => '50%', 'label' => __('50%')),
            array('value' => '25%', 'label' => __('25%')),
        );
    }
}

<?php

namespace Cookiecode\Mymodule\Model\System\Config\Source;

class Blockoptions implements \Magento\Framework\Option\ArrayInterface

{

/**

* @return array

public function toOptionArray()

{

return array(

array('value' => '100%', 'label' => __('100%')),

array('value' => '75%', 'label' => __('75%')),

array('value' => '50%', 'label' => __('50%')),

array('value' => '25%', 'label' => __('25%')),

);

}

You can see our configuration in Magento Admin. If you’re unable to see it, please clear the cache and if necessary execute deploy static command through the terminal.

Step 5. Enable/disable part of block with store config options

There’s lots of ways to get store config information. In our example we’ll show one, let’s say it’s a nicer way to get information into magento block.

We’ll create “Data.php” helper and within it we’ll call for information form our store config options.

Data.php

<?php

namespace Cookiecode\Mymodule\Helper;


class Data extends \Magento\Framework\App\Helper\AbstractHelper
{
    const CC_BLOCK_ENABLE = 'cc_block_config/cc_custom_block/cc_enable_custom_block';
    const CC_BLOCK_WIDTH = 'cc_block_config/cc_custom_block/cc_block_width';


    /**
     * @param \Magento\Framework\App\Helper\Context $context
     */
    public function __construct(
        \Magento\Framework\App\Helper\Context $context
    ) {
        parent::__construct($context);
    }


    public function isCustomBlockEnabled()
    {
        return $this->scopeConfig->getValue(
            self::CC_BLOCK_ENABLE,
            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
        );
    }

    public function ccBlockWidth()
    {
        return $this->scopeConfig->getValue(
            self::CC_BLOCK_WIDTH,
            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
        );
    }
}

<?php

namespace Cookiecode\Mymodule\Helper;

class Data extends \Magento\Framework\App\Helper\AbstractHelper

{

const CC_BLOCK_ENABLE = 'cc_block_config/cc_custom_block/cc_enable_custom_block';

const CC_BLOCK_WIDTH = 'cc_block_config/cc_custom_block/cc_block_width';

/**

* @param \Magento\Framework\App\Helper\Context $context

public function __construct(

\Magento\Framework\App\Helper\Context $context

) {

parent::__construct($context);

}

public function isCustomBlockEnabled()

{

return $this->scopeConfig->getValue(

self::CC_BLOCK_ENABLE,

\Magento\Store\Model\ScopeInterface::SCOPE_STORE

);

}

public function ccBlockWidth()

{

return $this->scopeConfig->getValue(

self::CC_BLOCK_WIDTH,

\Magento\Store\Model\ScopeInterface::SCOPE_STORE

);

}

Functions “isCustomBlockEnabled()” and “ccBlockWidth()” return values which are saved in our config options.

We’ll improve our “FirstBlock.php” block with this code:

namespace Cookiecode\Mymodule\Block;
class FirstBlock extends \Magento\Framework\View\Element\Template
{

    protected $myModuleHelper;

    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Cookiecode\Mymodule\Helper\Data $myModuleHelper,
        array $data = []
    ) {
        parent::__construct($context, $data);
        $this->_mymoduleHelper = $myModuleHelper;
    }

    // Inside block firstblock.phtml >> $block->isCustomBlockEnabled();
    public function isCustomBlockEnabled()
    {
        return $this->_mymoduleHelper->isCustomBlockEnabled();
    }

    // Inside block firstblock.phtml >> $block->ccBlockWidth();
    public function ccBlockWidth()
    {
        return $this->_mymoduleHelper->ccBlockWidth();
    }
}
?>

namespace Cookiecode\Mymodule\Block;

class FirstBlock extends \Magento\Framework\View\Element\Template

{

protected $myModuleHelper;

public function __construct(

\Magento\Framework\View\Element\Template\Context $context,

\Cookiecode\Mymodule\Helper\Data $myModuleHelper,

array $data = []

) {

parent::__construct($context, $data);

$this->_mymoduleHelper = $myModuleHelper;

}

// Inside block firstblock.phtml >> $block->isCustomBlockEnabled();

public function isCustomBlockEnabled()

{

return $this->_mymoduleHelper->isCustomBlockEnabled();

}

// Inside block firstblock.phtml >> $block->ccBlockWidth();

public function ccBlockWidth()

{

return $this->_mymoduleHelper->ccBlockWidth();

}

Within construct function we call helper inside our block. It has enabled us to use functions form the helper. Within this block we’ve created function to return values from helper classes. Now we can add condition within “firstblock.phtml” file.

<?php if ($block->isCustomBlockEnabled()): ?>
    <div style="width:<?php echo $block->ccBlockWidth() ? $block->ccBlockWidth() : '100%' ?>;background: #ff0; padding: 50px; margin: 0 auto; text-align: center;">
        <h1>Cookiecode First Block!!!</h1>
    </div>
<?php endif; ?>

<?php if ($block->isCustomBlockEnabled()): ?>

<div style="width:<?php echo $block->ccBlockWidth() ? $block->ccBlockWidth() : '100%' ?>;background: #ff0; padding: 50px; margin: 0 auto; text-align: center;">

<h1>Cookiecode First Block!!!</h1>

</div>

<?php endif; ?>

Now you can enable or disable frontend block and change its width.

Alternativelly, we can get store config value this way:

$block->escapeHtml($this->helper('\Cookiecode\Mymodule\Helper\Data')->isCustomBlockEnabled());

$block->escapeHtml($this->helper('\Cookiecode\Mymodule\Helper\Data')->ccBlockWidth());

$block->escapeHtml($this->helper('\Cookiecode\Mymodule\Helper\Data')->isCustomBlockEnabled());

$block->escapeHtml($this->helper('\Cookiecode\Mymodule\Helper\Data')->ccBlockWidth());

Hope this helps. Enjoy!

4 thoughts on “Custom block with store configuration options in Magento 2”

Andrzej says:

4th February 2016 at 6:13 pm

Nice tutorial, thanks a lot!

Leif Bennetts says:

30th November 2019 at 10:37 pm

Looking for effective online marketing that isn’t full of BS? I apologize for sending you this message on your contact form but actually that was the whole point. We can send your promotional text to sites through their contact forms just like you’re getting this note right now. You can target by keyword or just execute mass blasts to sites in the country of your choice. So let’s say you would like to blast an ad to all the web developers in the United States, we’ll grab websites for only those and post your ad message to them. Providing you’re promoting a product or service that’s relevant to that type of business then your business will get an amazing response!

Shoot me a reply to sarah1916eva@gmail.com for the full details

Aubrey Wallner says:

17th December 2019 at 10:12 pm

Are you looking for effective advertising that isn’t full of crap? I apologize for sending you this message on your contact form but actually that was kinda the point. We can send your promotional text to websites through their contact forms just like you’re getting this message right now. You can specify targets by keyword or just start bulk blasts to websites in the location of your choice. So let’s say you would like to push through a message to all the real estate agents in the US, we’ll scrape websites for only those and post your ad message to them. As long as you’re advertising some kind of offer that’s relevant to that business category then you’ll receive awesome results!

Shoot me a reply to muhammad2435tay@gmail.com for the details

film izle says:

17th January 2021 at 12:56 am

Amazing! Its genuinely remarkable paragraph, I have got much clear idea concerning from this article. Kassey Enos Fevre

Step 1. Define module

Step 2. Create block and block class

Step 3. Creating store configuration options (system configuration)

Step 4. Model for custom store config options.

Step 5. Enable/disable part of block with store config options

4 thoughts on “Custom block with store configuration options in Magento 2”

Leave a Reply Cancel reply