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!

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

  1. 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

  2. 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

Leave a Reply

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