:::: MENU ::::
Posts tagged with: theme

Magento 2 Set Block template

Today we talk about how in Magento 2 Set Block template. This tutorial included set block template in layout file, block file . Following this example you can get store date and time in block, helper, controller or model too. So let start with our example.

In layout File

    <block class="QaisarSatti\HelloWorld\Block\HelloWorld" name="HelloWorld" template="QaisarSatti_HelloWorld::HelloWorld.phtml"></block>

In Block File

Used the _construct() method to set template.

protected function _construct()
    {
        parent::_construct();
        $this->setTemplate('QaisarSatti_HelloWorld::HelloWorld.phtml');
    }

Another way to set template in block in set the $_template variable to your template.

protected $_template = 'QaisarSatti_HelloWorld::HelloWorld.phtml';
Author: Qaisar Satti
Category: Magento 2
Last Modified: July 12, 2018


Magento 2 set layout controller

Today we talk about how in Magento 2 set layout controller. You can set any layout in your controller file. In this example we are setting 3columns layout in our controller. You can set any layout your own controller. There is list of available layout in magento 2.

Available Layout

List of layout you can set in your controller.

1column
2columns-left
2columns-right
3columns
empty

Set Template in controller

Magento 2 using setPageLayout to setting the layout of current page.

public function execute()
{

     $page = $this->resultPageFactory->create(false, ['isIsolated' => true]);          

     $customLayout = '3columns';

     $page->getConfig()->setPageLayout($customLayout);
     return $page;
}
Author: Qaisar Satti
Category: Magento 2
Last Modified: July 12, 2018


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


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:12