Author Archives: John

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

A Beginners guide: Creating your first Magento 2 Theme

Hi,

Following on from my last article entitled “creating your First Magento 2 Module” in the series of guides, in this guide I’m going show you the basics for creating a new theme in Magento 2. The theme as per the previous post won’t “do” much other than to demonstrate the basics of what is required for a new theme.

First up – we’re not going to create a new theme, we’re going “extend” one of Magento’s out-of-the-box themes. This is the more normal and fastest approach. Magento ships with two themes out-of-the-box; Blank and Luma.

If you have never had any dealings with Magento previously and are just learning, then I’d highly recommend installing Magento with its sample data and using the “Luma” theme to learn with.

So, without delaying any further, let’s get started creating our new theme.

Directory Structures

On the command line login and navigate to your Magento Application root directory. When in there create the following directories:

  • app/design/frontend/Johnadavies
  • app/design/frontend/Johnadavies/Demo

Replace “Johnadavies” with your company name and replace “Demo” with whatever you’d like your package to be called.

Standing on the shoulders of Giants

We’re going to start by basing our “new” theme off the “Luma” theme. In reality, for anything more than basic we’re probably more likely to base it off the “blank” theme.

In your newly created theme package directory we need to tell Magento a little more about our theme. So we need to create a file called app/design/frontend/Johnadavies/Demo/theme.xml and inside the file we place the following code:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Johns Demo Theme</title> <!-- your theme's name -->
    <parent>Magento/luma</parent> <!-- this tells Magento the parent theme to base it off -->
</theme>

If you want to do things properly you can also add an extra line underneath the parent tag to show a nice little preview image in the admin area.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Johns Demo Theme</title> <!-- your theme's name -->
    <parent>Magento/luma</parent> <!-- this tells Magento the parent theme to base it off -->
<media>
      <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
   </media>
</theme>

Registering our Theme

As per my blog on creating a custom module, we need to again “register” our new code with Magento, we do this by creating a new file called app/design/frontend/Johnadavies/Demo/registration.php and adding the following code.

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/Johnadavies/Demo', __DIR__);

This just tells Magento how we’re going to refer to it.

Once this is completed, you should be able to navigate to “Content” > “Design configuration” in the admin area:

From here in the “action” column you change the “Applied Theme” to your new theme and hit save.

Congratulations – you now have a new theme.

Please check the next article in the series on what to do next. How to apply CSS updates and Template changes.

A Beginners guide: Creating your first Magento 2 Module

Hi,

In this series of guides, I am going to show you how to get started customising Magento 2 for your exact requirements.

The whole of Magento is comprised of “modules”. These are custom units of functionality that are added to the framework. Examples of these units are:

  • CMS (module-cms) – basic CMS functionality that allows a user to create static pages.
  • Catalog (module-catalog) – this is related to all functionality for Product and Product Category management
  • Inventory (module-inventory) – this relates to inventory management for Products
  • Theme (module-theme) – controls functionality for the theme, refer to this for when creating custom themes.

For the full list of Magento core modules, this can be found in /vendor/magento. So, when we want to consider customising Magento’s core functionality we can use this folder to refer to. Please note – we must never make changes to any code in here.

In this guide, I’m going to show you how to create the basic Skeleton for a Module.

Step 1. Create the required Directory Structures

Using the command line, navigate to the root directory of your Magento installation and create the following folders:

  • app/code/Johnadavies
  • app/code/Johnadavies/Demo
  • app/code/Johnadavies/Demo/etc

Replace “Johnadavies” with the name of your company and “Demo” with an appropriate name for the new functionality you’re introducing such as “Postcode” if you were creating a module for custom handling Postcodes.

Step 2. Let Magento know of your Module.

In app/code/Johnadavies/Demo/etc create file called module.xml and place the following code in it.

<?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="Johnadavies_Demo" setup_version="0.0.1">
</config>

In future you will probably need to add to this depending on what you’re module is going to do.

Next we need to create a file called /app/codeJohnadavies/Demo/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Johnadavies_Demo',
    __DIR__
);

This file tells Magento how your new module should be referred to.

Step 3. Activate your Module

Finally go to the root of your Magento site on the command line and run the following command.

$php bin/magento setup:upgrade

This makes Magento become aware of your new module. To see if its worked simply go to /app/etc/confi.php and open it, in there you should see a line that looks like this:

'Johnadavies_Demo' => 1,

Congratulations – your new Magento Module is Active!

Your new module is now active and running! (although not doing anything 😉 )

A Beginners guide: Installing Magento 2.4

In this guide, I will just show you the quick basics to get your Magento site up and running.

Check your Server Requirements

Before we start, ensure that your server meets the requirements set up here: https://devdocs.magento.com/guides/v2.4/install-gde/system-requirements.html

As per the devdocs for Magento 2.4, you must also install Elasticsearch prior to installing Magento see this guide on how to do this. https://devdocs.magento.com/guides/v2.4/install-gde/prereq/elasticsearch.html

Install Composer

Magento 2+ use Composer for dependency management, this allows modules (and Magento) to be installed and managed. So, you need to have Composer installed https://getcomposer.org/download/.

Authentication Keys

Create or Login to your Magento account (https://account.magento.com/customer/account/)

and then navigate to “marketplace” > “Access Keys”

Create a new set of access keys and make a note of the Public and Private Keys. The “Public Key” will be our “Username” and the “private key” will be our “Password”.

Download Magento!

Navigate to the directory, using SSH, where you want Magento to be installed and enter the following command.

composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition .

The “.” at the end installs it in the current directory, but you can adjust this to wherever you want.

When requested for a username and password, simply use the one in “Authentication Keys” in the previous step.

Set the Permissions

As per the devdocs you should set permissions like this:

cd /var/www/html/<magento install directory>
find var generated vendor pub/static pub/media app/etc -type f -exec chmod g+w {} +
find var generated vendor pub/static pub/media app/etc -type d -exec chmod g+ws {} +
chown -R :www-data . # Ubuntu
chmod u+x bin/magento

Install Magento!

Now that Magento is downloaded we finally need to install it by running this following command:

bin/magento setup:install \
--base-url=http://m2.johnadavies.me \
--db-host=localhost \
--db-name=some_database_name \
--db-user=some_database_user \
--db-password=some_database_password \
--admin-firstname=a_firstname \
--admin-lastname=a_lastname \
--admin-email=your.email@address.com \
--admin-user=dont_use_admin_for_a_name \
--admin-password=dont_use_admin123 \
--language=en_GB \
--currency=GBP \
--timezone=Europe/London \
--use-rewrites=1