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

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: May 2, 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: March 29, 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: March 26, 2018


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 on 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($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: December 20, 2017


Magento 2 set meta tag

Every Magento project requires a certain level of customization. This may involve adding a new element or overriding an existing one. Today, we’ll talk about how to set Meta tag like Meta title Meta Keyword and Meta description programmatically in Magento 2.For any suggestions & question, please feel free to drop a comment.

 

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;
}
Author: Qaisar Satti
Category: Magento 2
Last Modified: December 20, 2017



magento 2 Remove layered navigation

If you want to remove for for all the categories then add this code in your default.xml

Add this to your theme or module

 

default.xml

<referenceBlock name="catalog.leftnav" remove="true" />

 

If you want to do this for single category you can do that from admin panel. Login to admin panel and then go to

Admin Panel > Products > Categories > YOUR PAGE > Design

 

Add the following xml.

<referenceContainer name="catalog.leftnav" remove="true" />
Author: Qaisar Satti
Category: Magento 2
Last Modified: December 20, 2017


Pages:12