Category Archives: Uncategorised

A Beginners Guide: Adding Templates to your first Module

Hi,

So building on top of the module that we created in the first post “Creating your First Module” in this post we are going to add a template and some JS to our module.

Step 1: Create your module

If you haven’t done so already, please navigate over to the “Creating your First Module” post and follow the instructions there first to get a basic module created.

Step 2: Create your Custom Block

Create a directory called “Block” in app/code/Johnadavies/Demo/ , in there create a block PHP file named something logical. We want a block that is for saying “hello World”, so we’re going to call it HelloWorld.php.

So you should have something like (YMMV):
app/code/Johnadavies/Demo/Block/HelloWorld.php

Go ahead and open this file up in your editor and in there we’re going to define our Block. Add the following class, swapping the namespace out for yours.

<?php
namespace Johnadavies\Demo\Block;
class HelloWorld extends \Magento\Framework\View\Element\Template
{
   
public function getHelloWorld(){ 
        return 'Hello world!'; 
    } 
}

You will also define methods here, but they have to return data not echo it out.

Step 3: Initial Structure

Navigate back to “app/code/Johnadavies/Demo” and create the following directories.

  • app/code/Johnadavies/Demo/view
  • app/code/Johnadavies/Demo/view/frontend
  • app/code/Johnadavies/Demo/view/frontend/layout
  • app/code/Johnadavies/Demo/view/frontend/templates

Step 4: Give your Block a Template

Create an appropriately named PHTML file in app/code/Johnadavies/Demo/view/frontend/templates which in our case is going to be called HelloWorld.phtml. So now I have:
app/code/Johnadavies/Demo/view/frontend/templates/HelloWorld.phtml

In that file add your code, such as:

<h1><?php echo $this->getHelloWorld(); ?></h1>

To call a method defined in our block, we simply as per Magento 1 refer to it as $this.

Step 5: Put our Block on the Page

We want our block to be located in the footer, so we need to tell Magento where to place it. so in app/code/Johnadavies/Demo/view/frontend/layout create a file called default.xml with the following content in:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="footer-container">
            <block class="Johnadavies\Demo\Block\HelloWorld" name="hello-world" template="HelloWorld.phtml"/>
        </referenceBlock>
    </body>
</page>

So long as you’ve installed your module previously you can now just run these commands and all being well it should show on the frontend:

php bin/magento setup:static-content:deploy -f
php bin magento cache:flush

Next in the series will be how to apply CSS and JS to your block

Managing Magento 2 Modules via Composer

Although most Magento modules have their own installation requirements and they should be referred to primarily, here is just a quick overview of some basic steps that you may need to undertake.

Installing a Module via composer

Using Adyen as an example, to install the module, you simply login on the command line and navigate to the root directory of Magento and issue the following command.

composer require adyen/module-payment

Enable the Module

bin/magento module:enable Adyen_Payment

Please also refer to notes below on “Additional tasks that maybe required”.

Execute the update scripts

bin/magento setup:upgrade

Flush cache:

bin/magento cache:flush

Please also refer to notes below on “Additional tasks that maybe required”.

Upgrading a Specific module

More often than not you will want to update a specific module from a vendor. The command to do this is (replace “adyen/module-payment” with the actual vendor/module names 😉 ):

composer update adyen/module-payment

Then run setup scripts again:

php bin/magento setup:upgrade

Please also refer to notes below on “Additional tasks that maybe required”.

Upgrading all modules from a vendor

To update all vendors modules that you have installed then issue this command (again replace “amasty” with the vendors name 😉 ) :

composer update amasty

Followed by set up scripts again:

php bin/magento setup:upgrade

Please also refer to notes below on “Additional tasks that maybe required”.

Additional Tasks that may be required

Although you need to refer to the specific module docs, you may need to also run these additional tasks

php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
bin/magento cache:flush

Final thoughts..

Whilst the above I’m using Adyen and Amasty as the examples, that is not the complete installation process for these Modules. Should you be trying to do a full installation then please refer to the full documentation here (Install Adyen via Composer). (Upgrade Amasty Modules)

Also another great more comprehensive article can be found here:

read://https_thedeveloperworldisyours.com/?url=https%3A%2F%2Fthedeveloperworldisyours.com%2Fmagento-2%2Fmagento-2-composer-module-update%2F