:::: MENU ::::
Posts tagged with: custom

Magento 2 custom image resize

Today we talk about how to resize image in custom module. So let start talk about it with some background classes that are use to resize the image. In framework we use classes of Filesystem and Image\AdapterFactory. So here we go First we create the method resize in your block or you can create method in helper. In my example i am creating in my block.

   protected $_filesystem ;
   protected $_imageFactory;
   public function __construct(            
        \Magento\Framework\Filesystem $filesystem,        
        \Magento\Framework\Image\AdapterFactory $imageFactory        
        ) {        
        $this->_filesystem = $filesystem;              
        $this->_imageFactory = $imageFactory;        
        }

    // pass image Name, width and height
    public function resize($image, $width = null, $height = null)
    {
        $absolutePath = $this->_filesystem->getDirectoryRead(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA)->getAbsolutePath('helloworld/images/').$image; //complete path of image

        $imageResized = $this->_filesystem->getDirectoryRead(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA)->getAbsolutePath('resized/'.$width.'/').$image;        
        //create image factory...
        $imageResize = $this->_imageFactory->create();        
        $imageResize->open($absolutePath);
        $imageResize->constrainOnly(TRUE);        
        $imageResize->keepTransparency(TRUE);        
        $imageResize->keepFrame(FALSE);        
        $imageResize->keepAspectRatio(TRUE);        
        $imageResize->resize($width,$height);  
        //destination folder                
        $destination = $imageResized ;    
        //save image      
        $imageResize->save($destination);        

        $resizedURL = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA).'resized/'.$width.'/'.$image;
        return $resizedURL;
     }

Now we call our block method in our phtml.

$block->resize('test.jpg',500,400);
Author: Qaisar Satti
Category: Magento 2
Last Modified: December 15, 2017


Magento 2 call a static block

Today we learn about how to call a static block from phtm fiile,cms page and layout (xml) file. First you have to create a static block from admin panel, go to menu Content , choose Blocks and Click Add New Block button from top right. Every static block have identifier that are unique. You can call static block by identifier. For example our identifier is QaisarSattiTest.Now we use this identifier in phtml file, layout file and cam page.

Phtml:

echo $this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId(QaisarSattiTest)->toHtml();

Layout (xml):

<block class="Magento\Cms\Block\Block" name="footersocial" before="-">                     
      <arguments>
            <argument name="block_id" xsi:type="string">QaisarSattiTest</arguments>
      </arguments>
 </block>

CMS Page:

{{block  id="QaisarSattiTest"}}
Author: Qaisar Satti
Category: Magento 2
Last Modified: December 15, 2017


Magento 2 Move or remove block from layout

Today we talk about how to remove or move block. You can move block from one container to another but using the move handle. Same as you can remove any block with remove handle. First we will show the example how we remove the breadcrumbs block. Use the handle of referenceBlock and add the name reference you want to remove. You can check the layout files where the breadcrumbs block is define.

Remove:

Now we add example code in our default.xml or you want to remove for any specific page then add his layout file. Now you can remove breadcrumbs by simply adding this code.

<referenceBlock name="breadcrumbs" remove="true"/>

You can use this example to remove any block

Move:

For moving the block from one container to another. Just add element Name in my example i am moving the page.top block to store.menu.container. Now below is example code.

<move element="page.top" destination="store.menu.container" before="-" />

You can use this example to move any block

Author: Qaisar Satti
Category: Magento 2
Last Modified: December 15, 2017


Magento 2 override phtml file in custom module

Today we talk about how to override the magento 2 phtml file in custom module. First thing is simple just create xml file default.xml in your module layout folder. Then call the referenceBlock name you want to override in your module. There are two possible way to do that.

First:

Using the layout file to override the phtml file. You must be aware of block name of phtml file. Now use below simple code to override.

<referenceBlock name="block-name">
    <action method="setTemplate">
        <argument name="template" xsi:type="string">'QaisarSatti_HelloWorld::path/to/my/file.phtml </argument>
    </action>
</referenceBlock>

Note
This solution requires finding all instances where the block is used and create as many xml files as handles in which it is used.

Second:

The block is used very often or you want to make sure each new usage will not require adding this kind of configuration you can do it using plugin.

Declare your plugin either in etc/di.xml or etc/frontend/di.xml

<type name="Other\Module\Block">
    <plugin name="very-unique-name" type="QaisarSatti\HelloWorld\Plugin\Block" />
</type>

And then create a class QaisarSatti\HelloWorld\Plugin\Block with content like

<?php
namespace QaisarSatti\HelloWorld\Plugin;

class Block
{
    public function beforeToHtml(\Other\Module\Block $block)
    {
        $block->setTemplate('QaisarSatti_HelloWorld::path/to/my/file.phtml');
    }
}

Note:
This way you enforce use of this template in each instance so you will be no longer available to set it different just for 1 usage in layout xml file (unless you will add some flag to the block and a logic to check it in the plugin).

Author: Qaisar Satti
Category: Magento 2
Last Modified: December 20, 2017


Magento 2 overriding or Rewriting helper

In our daily coding routine we need to customization with core files. For that we need to overriding or rewrite the core classes because modify the core classes is not good practice. If you modify the code classes when you update the new version your code will be loss. So today we learn how to Magento 2 overriding or Rewriting helper. In start we are overriding core Product helper. We are jut checking our rewrite is working or not. You can modify the helper as you want following this tutorial. But first you need to know How to create module in Magneto 2.For any suggestions & question, please feel free to drop a comment.

Overriding or Rewrite Magento 2 Helper

sometimes, you may want to add new classes or override different functions in your Magento 2 module. Therefore, Magento 2 came up with the Helpers that are the right entity to fulfill your needs. A Helper in Magento 2 is an object that contains practical methods.Now we start to overriding or rewriting core Product helper. The helper we are overriding is Product helper.
Step 1.

Create a di.xml file in a following directory QaisarSatti/HelloWorld/etc/

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="Magento\Catalog\Helper\Product" type="QaisarSatti\HelloWorld\Helper\Rewrite\Product" />
</config>

Step 2
The step2 to overriding or rewriting Magento2 Helper is to create a Product.php helper file in the following directory QaisarSatti/HelloWorld/Helper/Rewrite/

<?php
/**
* Catalog Product overridingHelper
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Qaisar Satti
*
*/

namespace QaisarSatti\HelloWorld\Helper\Rewrite;
class Product extends \Magento\Catalog\Helper\Product
{
   public function __construct()
   {
     echo "Our Rewrite Working"; die();
   }
}

As following code you can rewrite or override any Magento 2 helper using the same method.

Author: Qaisar Satti
Category: Magento 2
Last Modified: December 20, 2017


Magento 2 add custom link in top links

Today, we’ll talk about how to add custom link in top links in Magento 2.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

Now add the following code, you can label and url ask 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: December 20, 2017


Magento 2 add custom link in topmenu

Today, we’ll talk about 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 xml 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: December 20, 2017


Pages:123