Create Magento 2 module to display pop up in homepage.

Written By rameshkrr
xploiting-magento

Brief:This articles explains the magento 2 module creation with a quite example. A pop up will be shown in the homepage using module. Patience is the only tool to learn something new.

Note: Each and every line are explained below. Take some time to read everything.

Step 1: Creating required folders onto your module’s directory.

The below image represents the folder structure of our module.

magento2-xploiting

Don’t get confused about the above image. You’ll get explanations below.

First of all, create a file named,

registration.php

Copy and paste the code.

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Home_Wall',
__DIR__
);

Create a folder named

Home

And inside it create a folder.

Wall

We are going to create following folders inside

 Home>Wall
  • Block
  • etc
  • view

Make sure your folder structure is as accurate as the above image.

Step 2: Jump into Block folder codings.

Create a file Homee.php in Block folder.

Copy and paste the code.

<?php

namespace Home\Wall\Block;

class Homee extends \Magento\Framework\View\Element\Template 
{
       public function displayText(){
    
         return "Welcome Guest User";
    
    }
}

Explanation:

The above PHP code says that “Hey Magento create a class named Homee and extend your default Template class into it”. And again says something like “Create a function with name displayText and return a string”. This string consists of a data like “Welcome Guest User.” At the end of this article, you’ll know why this class and function is created.

Step 3: Jump into etc folder codes

Create a folder named.

module.xml

Copy and paste the code.

<?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="Home_Wall" setup_version="1.0.0">
</config>

Explanation:

The above XML code says that this module has a name like Home_Wall and its version is 1.0.0.

Step 4: Jump Into view folder codes

Create a folder named

frontend

Copy and paste the code.

  • layout
  • templates

Inside layout folder create an XML named cms_index_index.xml .

Use the following code inside it.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Home\Wall\Block\Homee" template="Home_Wall::html/cms.phtml" cacheable="false" />
</referenceContainer>
</body>
</page>

Explanation:

This XML code inside layout folder is a game changer. If you look below body tag you can see a tag named block. First, we created a Block folder and now we create a block tag inside XML file. This is because we calling the class Homee and assigning a template file called cms.phtml. Also, this page doesn’t use any cache. This code is what I’m talking about <block class="Home\Wall\Block\Homee" template="Home_Wall::cms.phtml" cacheable="false" />

Next, create a folder named

template

Inside template folder create a file named cms.phtml.

Copy and paste the code.

<style>
.modal-footer {
display: none;
}
#custom-popup-modal strong{
text-transform:capitalize;
}
</style>
<?php

$text = $block->displayText();

echo "<div id='custom-popup-modal' style='display:block'>
<h1> $text,</h1>
<h2>Surf on thousands of offers.</h2>
<a href='http://xploiting.com'>Continue</a>
</div>";

?>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
modalClass: 'custom-popup-modal',

};

var popup = modal(options, $('#custom-popup-modal'));

$( document ).ready(function() {
$('#custom-popup-modal').modal('openModal');
});
}
);
</script>

Explanation: 

Here we created a local variable $text. This variable contains some data like$block->displayText();

The $block is a default Magento’s global variable to call a block function into our templates. The displayText function we created in Homee class is called here and assigned to $text variable. This variable is  used like <h1> $text </h1>.

The script is used to show pop up.

Step 5: Deploying code into Magento

I hope you’ve heard about deploying. Just we are going to run two simple commands in a terminal in Magento’s root directory.

For Windows users:

Press shift key and right-click on Magento root directory. There you see options like open command prompt here

For Linux users:

Go to Magento root directory and right click to open terminal.

Paste Following codes in a terminal.

Code 1:

php bin/magento setup:upgrade

Code 2:

php bin/magento setup:static-content:deploy

Explanation: 

These codes deploy your module into Magento. In other words, it creates a record with your module name Home_Wall in database table setup>module.

Now refresh your Magento home page you’ll see following output.

 

magento 2 xploiting

The source code is here you can download it for free.

Download Source Code

Note: Download the above zip, extract and rename Home-master to Home.

 

0 Comments

Leave a Reply

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

*

*
*