Categories: Magento News

How To Create and Move Magento 2 Block Fast

Perhaps, almost you do not know exactly what Magento 2 Block is and what are its functions. The best question is how can we utilize it.

Here is the deal!

We will give you Magento 2 Block’s definition and show you the way to create and move a template block in Magento 2.

Let’s start with its definition!

First of all, the block is the logical part that will be used in the layout to display the template. There are two parts in a block: the “visual” part which is the phtml, and the logical part which I call “block”.

That is not all we can provide you.

When talking about the block, we will mention the “logical” part belonging to the “Block” folder of our module; when the “template” is mentioned, it means the phtml in your “view” folder.

Let’s see how to create and move Magento 2 Block!

1. Detailed process to create a Magento 2 Block.

In this tutorial, we won’t use Composer or Packagist to save time. Instead of that, we are just writing code to test out functionality. Following the below steps:

Step 1: Create a module skeleton:
mkdir -p app/code/Foo/Bar/etc
Then, we’ll create the module definition file at setup:upgrade 

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Foo_Bar" setup_version="0.0.0"/>
</config>

With Magento 2, modules are not automatically picked up until they are enabled by command line. Hence, you have to enable the module. The “setup: upgrade” line is needed right now because of a bug in Magento 2. However, this should only be needed in the future if there are database installer scripts in your module.

./bin/magento module:enable Foo_Bar
./bin/magento setup:upgrade

Note: If Magento is running through a Docker container, you should “bash” it into the container before executing shell commands:

docker exec -it CONTAINER_ID bash

By following the above steps, we are now enabling a module also flushes the cache for us.

Step 2: Block class & Layout XML:
Magento 2 is now aware of our module, so let’s create our block class. We’ll do this by extending the \Magento\Framework\View\Element\Template class, and create a custom getName function:

namespace Foo\Bar\Block;
/**
* Baz block
*/
class Baz
extends \Magento\Framework\View\Element\Template
{
public function getTitle()
{
return "Foo Bar Baz";
}
}

Step 3: Link our magento2 block to our template.

As we have programmed our block, we want it to be displayed on the homepage. Naming the file is important because it is a new way in using layout handles. The cms_index_index.xml name will make our block appear only on the homepage (module_controller_action.xml).

Create the folder location: mkdir -p app/code/Foo/Bar/view/frontend/layout

Then create a layout XML file at app/code/Foo/Bar/view/frontend/layout/cms_index_index.xml containing:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="main">
            <block class="Foo\Bar\Block\Baz" template="Foo_Bar::default/baz.phtml"/>
        </referenceContainer>
    </body>
</page>

After a cache flush, refresh your homepage and you can see Foo Bar Baz shown at the top of the main content area.

2. How to move block in Magento 2?

Firstly, we use following code snippet in layout file to move blocks and containers.

<move element="name of conatiner or block" destination="destination block or container name" />

Here is an example. We will move price block to media block on the product page.

Next, we will move the price block.

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <move element="product.info.price" destination="product.info.media" />
</page>

That’s all for moving block in magento2 via layout file.

Hopefully, with our tutorial, you will know how to create and move magento 2 block. If you have any query or issue, comment below.

Here are some new Magento 2 extensions you may be looking for:

Phuong Pham

Recent Posts

What To Consider While Using Magento 2.0 For Your Streaming App?

When it comes to e-Commerce platforms, undoubtedly Magento 2.0 grabs the spotlight. Magento might not…

10 hours ago

Black Friday 2024: Hot Deals Collection For Magento 2

Black Friday and Cyber Monday – BFCM 2024 are nearly around the corner, and it’s…

1 day ago

Landofcoder BFCM 2024: Biggest Sale Of The Year – 30% OFF All Magento 2 Extensions

The holiday shopping season is here, and there’s no better time to supercharge your Magento…

3 days ago

Top 10 Progressive Web App Development Companies To Elevate Your Business

In today’s digital landscape, the rapid evolution of advanced web applications, particularly Progressive Web Apps…

1 week ago

Why Your Retail Business Needs Big Data eCommerce In 2025?

As eCommerce booms, big data eCommerce will be all about providing insight into how to…

1 week ago

The Best Role Of Magento 2 In Shaping The Future Of Ecommerce

The ecommerce industry is booming like never before. In fact, global retail ecommerce sales are…

1 week ago