magento 2 Archives - Page 14 of 15 - Qaisar Satti's Blogs

Posts tagged with: magento 2

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.

Layout Method

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>

Observer Method

Create file events.xml if not exists. QaisarSatti/HelloWorld/etc/frontend/events.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
<event name="page_block_html_topmenu_gethtml_before">
<observer name="QaisarSatti_HelloWorld_Topmenu" instance="QaisarSatti\HelloWorld\Observer\Topmenu" />
</event>
</config>

Now Create file Topmenu.php in following directory QaisarSatti/HelloWorld/Observer/Topmenu.php

namespace QaisarSatti\HelloWorld\Observer;
use Magento\Framework\Event\Observer as EventObserver;
use Magento\Framework\Data\Tree\Node;
use Magento\Framework\Event\ObserverInterface;
class Topmenu implements ObserverInterface
{
public function __construct(
...//add dependencies here if needed
)
{
...
}
/**
* @param EventObserver $observer
* @return $this
*/
public function execute(EventObserver $observer)
{
/** @var \Magento\Framework\Data\Tree\Node $menu */
$menu = $observer->getMenu();
$tree = $menu->getTree();
$data = [
'name' => __('Menu label'),
'id' => 'some-unique-id-here',
'url' => 'url goes here',
'is_active' => (expression to determine if menu item is selected or not)
];
$node = new Node($data, 'id', $tree, $menu);
$menu->addChild($node);
return $this;
}
}

Plugin Method

Create file di.xml if not exists. QaisarSatti/HelloWorld/etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

<type name="Magento\Theme\Block\Html\Topmenu">
<plugin name="add_menu_item" type="QaisarSatti\HelloWorld\Plugin\Topmenu" sortOrder="10" disabled="false"/>
</type>
</config>

Now Create file Topmenu.php in following directory QaisarSatti/HelloWorld/Plugin/Topmenu.php

namespace QaisarSatti\HelloWorld\Plugin;
use Magento\Framework\Event\Observer as EventObserver;
use Magento\Framework\Data\Tree\Node;
use Magento\Framework\Event\ObserverInterface;
class Topmenu implements ObserverInterface
{
public function afterGetHtml(\Magento\Theme\Block\Html\Topmenu $topmenu, $html)
{
$itemUrl = $topmenu->getUrl('helloworld');//add link here
$currentUrl = $topmenu->getUrl('*/*/*', ['_current' => true, '_use_rewrite' => true]);
if (strpos($currentUrl,'helloworld') !== false) {
$html .= "<li class="level0 nav-5 active level-top parent ui-menu-item">";
} else {
$html .= "<li class="level0 nav-4 level-top parent ui-menu-item">";
}
$html .= "<a href="" . $itemUrl . "" class="level-top ui-corner-all"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><span>" . __("Hello World") . "</span></a>";
$html .= "</li>";
return $html;
}
}

Author: Qaisar Satti

Category: Magento 2

Last Modified: November 13, 2018

2 comments

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

collection custom frontend magento 2 module php template

4 comments

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

action block controller custom theme extension frontend magento magento 2 module php phtml route

1 comment

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> 
<parent>Magento/blank</parent> 
<media>
<preview_image>media/preview.jpg</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

blank theme custom theme frontend layout magento magento 2 phtml template theme

0 comments

Magento 2 load product by id

Today we talk about how in Magento 2 load product by id. There are three way to get product load in magento 2. First Object Manager second factory Method and third one is Api Repository.

Factory Method:

Best practice method always use this method.

namespace QaisarSatti\Module\Block;

class Product extends \Magento\Framework\View\Element\Template
{

protected $_product;

public function __construct(

\Magento\Catalog\Model\ProductFactory $_product

) {

$this->_productloader = $_productloader;

}
public function getLoadProduct()
{
$product_id=7;
return $this->_productloader->create()->load($product_id);
}

}

Api Repository:

This was introduce in Magento 2.1 by magento.

namespace QaisarSatti\Module\Block;
use Magento\Catalog\Api\ProductRepositoryInterface;
class Product extends \Magento\Framework\View\Element\Template
{
protected $_productRepository;

public function __construct(

ProductRepositoryInterface $productRepository
) {

$this->_productRepository = $productRepository;
}
public function getProduct()
{
$productId=7;
return $product = $this->productRepository->getById($productId);
}
}

Object Manager:

No recommended method to use in magento2 but so magento use it so here it is just for knowledge.

$product_id=7;
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$product = $objectManager->create('Magento\Catalog\Model\Product')->load($product_id);

Author: Qaisar Satti

Category: Magento 2

Last Modified: September 5, 2018

block controller custom theme extension helper magento magento 2 php phtml template theme

8 comments

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"?>

<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"?>

<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"?>

<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

admin panel block controller extension frontend layout luma theme magento magento 2 module php template

3 comments

Magento 2 create and use helper

Using helper you can put your methods in there that you have no idea where to put them. For example if you want create the thumbnail of image you use the helper method. The method you don’t know where to put put in helper class.

Now creating the helper and use of it.

Create Helper folder in module directory.

namespace QaisarSatti\HelloWorld\Helper

Now create the your helper class what name you want to put.In my case i will use Data file. Now the complete path will be.

namespace QaisarSatti\HelloWorld\Helper\Data.php

This file will be extend with.

\Magento\Framework\App\Helper\AbstractHelper

Now create helper Data class.

<?php

/**

* Simple Hello World Module

*

* @category QaisarSatti

* @package QaisarSatti_HelloWorld

* @author Muhammad Qaisar Satti

* @Email [email protected]

*

*/

namespace QaisarSatti\HelloWorld\Helper;

use Magento\Store\Model\Store;

class Data extends \Magento\Framework\App\Helper\AbstractHelper

{

public function getTitle()

{

return 'First Hello World Module';

}

}

Now we will use helper method in our block.

<?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

{

protected $_helper;

public function __construct(

\QaisarSatti\HelloWorld\Helper\Data $_helper,

) {

$this->_helper=$_helper;

}

public function _prepareLayout()

{

parent::_prepareLayout();

$this->pageConfig->getTitle()->set($this->_helper->getTitle());

return $this;

}

}

Author: Qaisar Satti

Category: Magento 2

Last Modified: July 12, 2018

block controller custom theme helper magento magento 2 php rewrite

Pages:‹1...8 9 10 11 12 131415 ›