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

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

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

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

default.xml

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.

Costom block on Magento 2 Luma theme

Step 3. Creating store configuration options (system configuration)

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

system.xml

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

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.

Mageno 2 configuration - My module

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

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

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

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.

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

Alternativelly, we can get store config value this way:

Hope this helps. Enjoy!

One thought on “Custom block with store configuration options in Magento 2”

Leave a Reply

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