:::: MENU ::::
Posts tagged with: frontend

Magento 2 add custom link top links

Today, we’ll talk about how in Magento 2 add custom link top links.It is very create For any suggestions & question, please feel free to drop a comment.

If you are adding it from theme create default.xml in following path.

app/design/frontend/QaisarSatti/theme/Magento_Theme/layout/default.xml

Or you want it to add from module xml then create default.xml in following path.

app/code/QaisarSatti/view/HelloWorld/frontend/layout/default.xml

Blank Theme top links

Now add the following code, you can add label and url as you required.

<referenceBlock name="top.links">          
          <block class="Magento\Framework\View\Element\Html\Link\Current" name="cart" before="account">
                    <arguments>
                       <argument name="label" xsi:type="string">Cart</argument>
                       <argument name="path" xsi:type="string">checkout/cart</argument>          
                    </arguments>            
          </block>
</referenceBlock>

Luma Theme header links

Now add the following code, you can add label and url as you required.

<referenceBlock name="header.links">          
          <block class="Magento\Framework\View\Element\Html\Link\Current" name="cart" before="account">
                    <arguments>
                       <argument name="label" xsi:type="string">Cart</argument>
                       <argument name="path" xsi:type="string">checkout/cart</argument>          
                    </arguments>            
          </block>
</referenceBlock>
Author: Qaisar Satti
Category: Magento 2
Last Modified: July 12, 2018


Magento 2 add custom link topmenu

Today, we’ll talk about Magento 2 add custom link topmenu. This tutorial include how to add custom link in top navigation or topmenu in Magento 2.It is very create For any suggestions & question, please feel free to drop a comment.

If you are adding in your theme create default.xml in following path.

app/design/frontend/QaisarSatti/theme/Magento_Theme/layout/default.xml

Or you want it to add from module layout then create default.xml in following path.

app/code/QaisarSatti/view/HelloWorld/frontend/layout/default.xml

Now add the following code, you can label and url ask you required.

<referenceBlock name="catalog.topnav">        
    <block class="Magento\Framework\View\Element\Html\Link\Current" name="cart" before="account">
               <arguments>
                       <argument name="label" xsi:type="string">Cart</argument>
                      <argument name="path" xsi:type="string">checkout/cart</argument>          
               </arguments>            
    </block>
</referenceBlock>
Author: Qaisar Satti
Category: Magento 2
Last Modified: August 6, 2018


Magento 2 get latest order collection

Today we will talk about Magento 2 get latest order collection. We will learn how to get latest order collection. You can simply add the setOrder entity_id to DESC or use created_at to DESC to your order collection. If you want to add limit simply add setpagesize

setPageSize(yournumberhere);

protected $_orderFactory;
public function __construct(

\Magento\Sales\Model\ResourceModel\Order\CollectionFactory $orderFactory,

)
{

$this->_orderFactory = $orderFactory;

}
public function getLatestOrders() {
$orderCollection =$this->_orderFactory->create()->addFieldToSelect(array('*')); $orderCollection->setOrder('entity_id','DESC');
return $orderCollection;
}
Author: Qaisar Satti
Category: Magento 2
Last Modified: July 12, 2018


Magento 2 get controller module action and router

Today we talk about Magento 2 get controller module action and router.We’ll talk about how to get controller name, module name, action name and router name programmatically in Magento 2.For any suggestions & question, please feel free to drop a comment.

Controller name:
Controller is a class located in module Controller folder. Here is Controller file of module.

$this->getRequest()->getControllerName();

Module name:

$this->getRequest()->getModuleName();

Action name:
Action name is located in module Controller file. Here is Action Method controller.

$this->getRequest()->getActionName();

Router name:
Router are defined in module router.xml file. Here is Action Method controller.

$this->getRequest()->getRouteName();

Example:

If you test this code for home page it will give you following output.

Controller:index
Action:index
Route:cms
module:cms

You can use this code in both phtml and controller file.

Author: Qaisar Satti
Category: Magento 2
Last Modified: July 12, 2018


Magento 2 create simple theme

Today we discuss how in Magento 2 create simple theme? Creating a simple theme or custom theme is consisting on four easy step in magento2. First you have to create your SpaceName in my case it is QaisarSatti. Create folder in app/design/frontend/QaisarSatti. Now add the theme name after app/design/frontend/QaisarSatti/theme.

First Step:

Create the composer.json file for theme.

app/design/frontend/QaisarSatti/theme/composer.json

{
"name": "magento/theme-frontend-blank",
"description": "My First Theme",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"magento/theme-frontend-blank": "100.0.*",
"magento/framework": "100.0.*"
},
"type": "magento2-theme",
"version": "100.0.1",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
]
}
}

Second Step:

In this step we will register our theme.

app/design/frontend/QaisarSatti/theme/registration.php

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

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/QaisarSatti/theme',
    __DIR__
);

Third Step:
Create the theme.xml file. Here you will define the parent theme for your theme so in my case the magento blank theme.

app/design/frontend/QaisarSatti/theme/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>My First Theme</title> <!-- your theme's name -->
     <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
     <media>
         <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
     </media>
 </theme>

Fourth Step:

Now add you theme preview image in media folder. This will be show in admin panel where theme are listed.

app/design/frontend/QaisarSatti/theme/media/preview.jpg

Here we create the new theme in magento 2. Now just simply run these command you register you theme in magento.

php bin/magento setup:upgrade

Author: Qaisar Satti
Category: Magento 2
Last Modified: July 12, 2018


Magento 2 create a module or extension

In start of learning Magento 2 every developer must need to learn how to create a simple module or extension. But before start it you must have initial knowledge of Php too. Here it is easy way to create the extension or module in magento 2. In this custom module we have to learn how to create router,controller,block,xml layout and phtml files. Combination of these file will make a simple Hello World module. That will listed in admin module list and show the output on fronteend So lets start the fun learning of magento 2. Before we start playing with magento 2 we must do these tasks disabled cache from admin panel or you can do it via command (php bin/magento cache:disable) and set the developer mode on by following command (php bin/magento deploy:mode:set developer).
Note: Check code folder in your app directory. If not have code folder then create it.

First Step:

First step is register your module with registration.php . The file location will be

app/code/QaisarSatti/HelloWorld/registration.php

<?php
/**
* Simple Hello World Module
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email [email protected]
*
*/

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

Second Step:

Create module.xml file. In this file you will define your module name and version. The file location will be

app/code/QaisarSatti/HelloWorld/etc/module.xml

<?xml version="1.0"?>
<!--/**
* Simple Hello World Module
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email [email protected]
*
*/ -->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="QaisarSatti_HelloWorld" schema_version="0.0.1" setup_version="0.0.1"/>
</config>

Third Step:

Create the block file.The file location will be

app/code/QaisarSatti/HelloWorld/Block/HelloWorld.php

<?php
/**
* Simple Hello World Module
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email [email protected]
*
*/

namespace QaisarSatti\HelloWorld\Block;
class HelloWorld extends \Magento\Framework\View\Element\Template
{
public function _prepareLayout()
{
parent::_prepareLayout();
$this->pageConfig->getTitle()->set(__('First Hello World Module'));
return $this;
}
}

Fourth Step:

Create the controller file.The file location will be

app/code/QaisarSatti/HelloWorld/Controller/Index/Index.php

<?php
/**
* Simple Hello World Module
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email [email protected]
*
*/

namespace QaisarSatti\HelloWorld\Controller\Index;
class Index extends \Magento\Framework\App\Action\Action
{
public function execute()
{
$this->_view->loadLayout();
$this->_view->renderLayout();
}
}

Fifth Step:

Create frontend router. Here you will declare your frontName make sure it is unique name.

app/code/QaisarSatti/HelloWorld/etc/frontend/routes.xml

<?xml version="1.0"?>
<!--/**
* Simple Hello World Module
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email [email protected]
*
*/ -->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route id="helloworld" frontName="helloworld">
<module name="QaisarSatti_HelloWorld" />
</route>
</router>
</config>

Sixth Step:

Create frontend template file.

app/code/QaisarSatti/HelloWorld/view/frontend/templates/HelloWorld.phtml

<?php
/**
* Catalog Product Rewrite Helper
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email [email protected]
*
*/

echo 'Hello World';
?>

Seventh Step:

Add frontend layout handle for your router. First letter will be your frontName as you mention in your router.xml file (helloworld) then your folder name (index) then in the last your controller name (Index).

app/code/QaisarSatti/HelloWorld/view/frontend/layout/helloworld_index_index.xml

<?xml version="1.0"?>
<!--/**
* Simple Hello World Module
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email [email protected]
*
*/ -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="QaisarSatti\HelloWorld\Block\HelloWorld" name="HelloWorld" template="QaisarSatti_HelloWorld::HelloWorld.phtml"></block>
</referenceContainer>
</body>
</page>

Now your simple hello world module is complete. You can do following step to activate this module.

php bin/magento module:enable QaisarSatti_HelloWorld

You can see the output of module front page by http::yoururl/helloworld

Github Links

Author: Qaisar Satti
Category: Magento 2
Last Modified: July 12, 2018


Set meta tag Magento 2

This tutotrial is about how to set Meta tag in magento 2. Magento is a very useful ecommerce platform.Since every Magento project requires a certain level of modification. This may involve changing an existing functionality or adding a new one. In this tutorial we will learn about how to set Meta tag in magento 2.This includes Meta title,Meta Keyword and Meta description. And in this tutorial we will learn how to do it programmatically in Magento 2.

Lets come to our topic and see an example and code.Below are the two methods. Making changes in the block and controller will help to getthe desired results.
 

Block


$this->pageConfig->getTitle()->set(__('First Hello World Module'));
//setting the page title
$this->pageConfig->setDescription('test description'); // set meta description
$this->pageConfig->setKeywords('test keywords'); // set meta keyword

 

Controller

 

namespace QaisarSatti\HelloWorld\Controller\Index;

use Magento\Framework\View\Result\PageFactory;

class Index extends Action {

protected $_resultPage;

public function __construct(
PageFactory $resultPage) {
$this->_resultPage = $resultPage;
}
public function execute() {
$result= $this->_resultPage->create();
$result->getConfig()->getTitle()->set("Meta Title"); //setting the page
$result->getConfig()->setDescription("Description"); // set meta description
$result->getConfig()->setKeywords("Key Words"); // set meta keyword

return $result;
}

I hope this tutorial is easy to understand and serve its purpose.
For any suggestions & question, please feel free to drop a comment.

Author: Qaisar Satti
Category: Magento 2
Last Modified: September 30, 2018


Pages:1234