:::: MENU ::::
Posts tagged with: template

Magento 2 enable template path hints

Today we discuss how in Magento 2 enable template path hints. This topic will cover how to enable template path hints on frontend and also backend too. There are two ways to enable the template path hints. One way is to enable hints from admin configurations and the other way is by using MySql query.

Using Admin Panel

Login to admin panel.

Front end

Store > Configuration > Advanced > Developer > Debug > Enabled

Template Path Hints for Storefront > Yes

Admin Panel

Store > Configuration > Advanced > Developer > Debug > Enabled  

Template Path Hints for Admin > Yes

Using Mysql Query

Enable Temaote Path Hints

UPDATE core_config_data SET value = '1' WHERE path LIKE '%template_hints%';

Disable Temaote Path Hints

UPDATE core_config_data SET value = '0' WHERE path LIKE '%template_hints%';

Note: this command only work if it have already entry in core_config_data table.

Author: Qaisar Satti
Category: Magento 2
Last Modified: April 23, 2018


Magento 2 Render WYSIWYG content

Today we discuss how in Magento 2 Render WYSIWYG content. This topic will cover how to render wysiwyg editor content.There are two ways to render the WYSIWYG content. First Zend_Filter_Interface and second Using the \Magento\Cms\Model\Template\FilterProvider.

Using Zend Interface

namespace QaisarSatti\HelloWorld\Block;

class HelloWorld extends \Magento\Framework\View\Element\Template
{
protected $contentProcessor;
public function __construct(
    \Zend_Filter_Interface $templateProcessor,
) {
 
    $this->contentProcessor = $contentProcessor;
}
public function processContent($content)
{
    return $this->contentProcessor->filter($content);
}
}

Now Add block reference in di.xml

<type name="QaisarSatti\HelloWorld\Block\HelloWorld">
    <arguments>
        <argument name="contentProcessor" xsi:type="object">Magento\Widget\Model\Template\Filter</argument>
    </arguments>
</type>

Now call method from phtml

<?php echo $block->processContent($content);?>

Using CMS Model

namespace QaisarSatti\HelloWorld\Block;

class HelloWorld extends \Magento\Framework\View\Element\Template
{
protected $contentProcessor;
public function __construct(
    \Magento\Cms\Model\Template\FilterProvider $contentProcessor,
) {
 
    $this->contentProcessor = $contentProcessor;
}
public function processContent($content)
{
    return $this->contentProcessor->getPageFilter()->filter($content);
}
}

Now call method from phtml

<?php echo $block->processContent($content);?>
Author: Qaisar Satti
Category: Magento 2
Last Modified: April 4, 2018


Magento 2 create basic module frontend part 4

As we finished with the basic module structure and admin part we move to Magento 2 create basic module frontend .Now this tutorial will be cover the create frontend router, create layout file, create frontend controller, create frontend block, add custom pagination. Now we start with frontend.

Create frontend router

Create routes.xml in following directory

QaisarSatti\HelloWorld\etc\frontend\

<?xml version="1.0"?>
<!--
/**
* Hello World
   *
   * @category    QaisarSatti
   * @package     QaisarSatti_HelloWorld
   * @author      Muhammad Qaisar Satti
   * @Email       [email protected]
   *
*/
-->
     <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>

Create frontend controller

Create Index.php in following directory

QaisarSatti\HelloWorld\Controller\Index\

<?php
/**
 * Hello World
    *
    * @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();
    }

}

Create layout file

Create helloworld_index_index.xml in following directory

QaisarSatti\HelloWorld\etc\frontend\

<?xml version="1.0"?>
<!--
/**
* Hello World
   *
   * @category    QaisarSatti
   * @package     QaisarSatti_HelloWorld
   * @author      Muhammad Qaisar Satti
   * @Email       [email protected]
   *
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <referenceContainer name="content">
                <block class="QaisarSatti\HelloWorld\Block\HelloWorld" name="HellosWorld" template="QaisarSatti_HelloWorld::HelloWorld.phtml"></block>
            </referenceContainer>
        </body>
    </page>

Create frontend block

Create HelloWorld.php in following directory

QaisarSatti\HelloWorld\Block\

<?php
/**
 * Hello World
    *
    * @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 $_coreRegistry = null;
    protected $_collectionFactory;
    protected $_productsFactory;
    protected $_helloworldFactory;
   public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Registry $registry,
        \QaisarSatti\HelloWorld\Model\ResourceModel\HelloWorld\CollectionFactory $helloworldFactory,
       array $data = []
   ) {
 
       $this->_coreRegistry = $registry;
       $this->_helloworldFactory = $helloworldFactory;
       parent::__construct($context, $data);
   }
   public function getHelloCollection()
        {
          $page=($this->getRequest()->getParam('p'))? $this->getRequest()->getParam('p') : 1;
           //get values of current limit
          $pageSize=($this->getRequest()->getParam('limit'))? $this->getRequest()->getParam('limit') : 5;

          $helloCollection = $this->_helloworldFactory->create();
          $helloCollection->setPageSize($pageSize);
          $helloCollection->setCurPage($page);
          return $helloCollection;
        }
   public function _prepareLayout()
   {
   
       parent::_prepareLayout();
       $this->pageConfig->getTitle()->set(__('Sample Post'));

       if ($this->getHelloCollection()) {
            $pager = $this->getLayout()->createBlock('Magento\Theme\Block\Html\Pager','qaisarsatti.blog.pager')->setAvailableLimit(array(5=>5,10=>10,15=>15,20=>20));
            $pager->setShowPerPage(true);
            $pager->setCollection($this->getHelloCollection());
            $this->setChild('pager', $pager);
            $this->getHelloCollection()->load();
        }
        return $this;
   }
   public function getPagerHtml(){
        return $this->getChildHtml('pager');
    }


}

Create frontend phtml

Create HelloWorld.phtml in following directory

QaisarSatti\HelloWorld\view\frontend\templates\

<?php
/**
 * Hello World
    *
    * @category    QaisarSatti
    * @package     QaisarSatti_HelloWorld
    * @author      Muhammad Qaisar Satti
    * @Email       [email protected]
    *
 */

$blogCollection = $block->getHelloCollection();
foreach ($blogCollection as $blog) {

    echo $blog->getTitle().'<br />';
    echo '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'.$blog->getContent().'<br />';
}

 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: February 9, 2018


Magento 2 store information

Today we talk about how to get Magento 2 store information. In Store information we get the current store id , store code , store website id ,store name and also the available currencies in current store.So let start with example.

<?php
namespace QaisarSatti\HelloWorld\Block;
class HelloWorld extends \Magento\Framework\View\Element\Template
{    
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,        
        array $data = []
    )
    {            
        parent::__construct($context, $data);
    }
   public function getStoreInfromation()
   {
        return $this->_storeManager->getStore();
   }
}

In phtml file get the information

$storeInformation = $block->getStoreInfromation();

$storeInformation->getStoreId();  //get store id
$storeInformation->getCode();  // get store code
$storeInformation->getWebsiteId(); // get store website id
$storeInformation->getName();  //get store name

//To get available currencies in store you check

foreach($storeInformation->getAvailableCurrencyCodes() as $codes):
  echo $codes;
endforeach;
Author: Qaisar Satti
Category: Magento 2
Last Modified: January 8, 2018


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 Call phtml file in other phtml file or on cms page

Today we talk about how to in Magento 2 Call phtml file another phtml file cms page. Calling a phtml file is no different as compare to magento 1 calling. But if you are calling it in cms block you have to use class instead of type.

Phtml:

First we call in phtml file. It is simple just use below code put it in phtml file and add your block class name and phtml file according your module directory.

<?php
echo $this->getLayout()->createBlock("QaisarSatti\HelloWorld\Block\HelloWorld")->setTemplate("QaisarSatti_HelloWorld::helloworld.phtml")->toHtml();
?>

CMS Page:

Calling a phtml file on cms page. Just add class and phtml file path like below example.

{{block class="QaisarSatti\HelloWorld\Block\HelloWorld" template="QaisarSatti_HelloWorld::helloworld.phtml"}}
Author: Qaisar Satti
Category: Magento 2
Last Modified: December 20, 2017


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


Pages:123