:::: MENU ::::
Posts tagged with: blank 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 display discount percent product page

Today we discuss how in Magento 2 display discount percent product page. This topic will cover how to show % percentage saving on current product. You can use this code on any product product listing or product widget page. You can also use this code product detail page. So let’s start with our example. You need to get $_product->getFinalPrice() and $_product->getPrice() to calculate the percentage of current product.

$_finalPrice = $_product->getFinalPrice();
$_price = $_product->getPrice();
if($_finalPrice < $_price):
   $_savingPercent = 100 - round(($_finalPrice / $_price)*100);
      echo $_savingPercent; ?> % Off
<?php endif; ?>
Author: Qaisar Satti
Category: Magento 2
Last Modified: July 12, 2018


Magento 2 get product images

Today we talk about how in Magento 2 get product images for example thumbnail images, base images and small images.You can get these image in custom collection or product page. First you have to inject the ImageBuilder class in you block. You can get product collection or load the single product or get product current information. So let start with example. There is default available image types.

$imageType = 'product_base_image';  //For getting the base image
$imageType = 'product_small_image';  //For getting the small image
$imageType = 'product_thumbnail_image';   //For getting the thumbnail image

Now we inject the ImageBuilder class in our block.

protected $_imageBuilder;

public function __construct(
       
        \Magento\Catalog\Block\Product\ImageBuilder $_imageBuilder
    ) {
   
       
        $this->_imageBuilder=$_imageBuilder;
            }


 public function getImage($product, $imageId, $attributes = [])
    {
        return $this->_imageBuilder->setProduct($product)
            ->setImageId($imageId)
            ->setAttributes($attributes)
            ->create();
    }

Get Image in phtml

 <?php  

$imageType = 'product_thumbnail_image';
$image = $block->getImage($_item, $imageType); ?>
 <img src="<?php echo $image->getImageUrl(); ?> " />
Author: Qaisar Satti
Category: Magento 2
Last Modified: July 12, 2018


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: July 12, 2018


Magento 2 bluefoot cms

On DECEMBER 21, 2016 magento announces of acquiring bluefoot cms. It will Works with Magento Enterprise Edition 2.1 and up version. Magento was using the WYSIWYG editor before now they are giving additional option for use the bluefoot cms. You can say it is replacement of WYSIWYG. The big feature that are provided by bluefoot cms. The current version of Bluefoot CMS (v1.0) is available for merchants.

Drag & Drop Functionality

You can use the drag & drop functionality like Headers, images, products, maps and much more can easily be added as content using drag and drop functionality.

Easy Product-Content Integration

Simple drag and drop of products or groups of products into standard content elements, like blog posts or promotion pages to facilitate merchandising.

Simple Third Party Content Integration (e.g. Videos)

You can add the third party videos like YouTube / Vimeo videos, Google Maps and more are all integrated making it easy to add rich content to pages, categories and posts.

Static Block Integration

Seamless integration of static blocks into your content ensuring that areas of the site such as categories can be turned into any design you like.

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 add pagination custom collection

Today we talk about Magento 2 add pagination custom collection. we’ll talk about how to get custom collection with magento 2 default pagination or use pager with custom collection.For any suggestions & question, please feel free to drop a comment.

First Step:

Get collection for pagination.

public function getNews() {
 //get values of current page
$page=($this->getRequest()->getParam('p'))? $this->getRequest()->getParam('p') : 1;
 //get values of current limit
$pageSize=($this->getRequest()->getParam('limit'))? $this->getRequest()->getParam('limit') : 1;
$newsCollection = $this->newscollectionFactory->create(); $newsCollection->addFieldToFilter('is_active',1); $newsCollection->setOrder('title','ASC'); $newsCollection->setPageSize($pageSize); $newsCollection->setCurPage($page);
return $newsCollection;
}

Second Step:
Now simply add the pagination to you collection

protected function _prepareLayout() {
parent::_prepareLayout();
$this->pageConfig->getTitle()->set(__('News'));
 if ($this->getNews()) {
$pager = $this->getLayout()->createBlock( 'Magento\Theme\Block\Html\Pager', 'qaisarsatti.news' )->setAvailableLimit(array(5=>5,10=>10,15=>15))->setShowPerPage(true)->setCollection( $this->getNews() );
$this->setChild('pager', $pager);
$this->getNews()->load();
}
return $this;
}

Third Step:
Now create a function to get the child block of pager.

public function getPagerHtml() {
return $this->getChildHtml('pager');
 }

Fourth Step:
in your phtml file add this code then pagination will be showing with limits.

<?php if ($block->getPagerHtml()): ?>
<div class="order-products-toolbar toolbar bottom">
<?php echo $block->getPagerHtml(); ?>
</div>
<?php endif ?>
Author: Qaisar Satti
Category: Magento 2
Last Modified: July 12, 2018


Pages:12