Web Technology Funda: 03/01/2015

Mar 20, 2015

Magento2: How to create or add a menu or link at customer myaccount left navigation in Magento2

In this post, I will show you how we can add a menu link of our custom module page in myaccount left navigation page.

You can create it by following below steps:

Step 1: Create a customer account handle xml in path app\code\Mynamespace\HelloWorld\view\frontend\layout\customer_account.xml, if already not created and add the below code insidei <body> tag in xml file.

Code to Add:

 <referenceBlock name="customer_account_navigation">  
  <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navigation-helloworld-list-link">  
  <arguments>  
   <argument name="path" xsi:type="string">helloworld</argument>  
   <argument name="label" xsi:type="string">HelloWorld List</argument>  
  </arguments>  
  </block>  
 </referenceBlock>

Step 2: Now open your custom module handle xml file for example here I am taking helloworld module with index controller and index action.
app\code\Mynamespace\HelloWorld\view\frontend\layout\helloworld_index_index.xml
and add the code

Code to Add:

 <update handle="customer_account"/>

above the <body> starting tag.

Step 3: Refresh Cache and you have done it.

Magento2: How to add custom link at top header links after LogIn Or Register link in Magento2

Here I will show you how we can add new custom link at top header links after LogIn Or Register links.

Please refer my previous post to create a custom link at header but displayed after logged in account,
if you want to show your custom link before logged in or just want to show link any time at header after Register link follow below steps.

Step 1: Refer my previous post to create a custom link at header but displayed after logged in account. Click Here...

Step 2: Now open app\code\Mynamespace\Mymodule\view\frontend\layout\default.xml file and add below code after <referenceBlock name="top.links"></referenceBlock>

Code To Add:

 <move element="test-link" destination="header.links"/>

Here "test-link" is the name of your test link block which created in step 1.

Step 3: Refresh Cache and you have done it.

Mar 16, 2015

How to add custom link with custom html li, class and achor tag in top links after my account link in Magento2

In Magento2, we have seen earlier in my previous post 'How to add custom link in top links after my account link in Magento2' with default html link.

But sometime we needs to add our cutom html tags in link. For example if we want to add a css class in our custom link then we can use the following trick to get it work.

Same as the previous post, consider, we wish to add a 'Test Link' link and assuming custom module name as 'Mynamespace/Mymodule'.

Step 1: Create a block for your custom link app\code\Mynamespace\Mymodule\Block\Link.php then add the code below in your block file.

Code:

 <?php  
 namespace Mynamespace\Mymodule\Block;  
 class Link extends \Magento\Framework\View\Element\Html\Link  
 {  
  protected $_template = 'Mynamespace_Mymodule::link.phtml';   
   public function getHref()  
   {  
     return $this->getUrl('test');  
   }  
   public function getLabel()  
   {  
     return __('Test Link');  
   }  
 }  
 ?>

Step 2: Now create app\code\Mynamespace\Mymodule\view\frontend\layout\default.xml, if not already created and add code below in body tag

Code:

 <body>      
  <referenceBlock name="top.links">  
  <block class="Mynamespace\Mymodule\Block\Link" name="test-link" after="my-account-link"/>  
  </referenceBlock>      
 </body>

Step 3: Create a phtml file in path app\code\Mynamespace\Mymodule\view\frontend\templates\link.phtml and add code below or modify the html as per your requirement

Code:

 <li class="Test-Class">  
   <a <?php echo $block->getLinkAttributes() ?>><?php echo $block->escapeHtml($block->getLabel())?>  
     <?php echo($block->getCounter()) ? '<span class="counter qty">' . $block->escapeHtml($block->getCounter()) . '</span>' : ''; ?>  
   </a>  
 </li>

Step 4: Clear All Cache and you are done.

How to add custom link in top links after my account link in Magento2

In Magento2, we can add a custom link in top links as follows, please check the steps one by one.

Consider, we wish to add a 'Test Link' after My Account link and assuming you have your custom module name as 'Mynamespace/Mymodule'.

Step 1: Create a block for your custom link app\code\Mynamespace\Mymodule\Block\Link.php then add the code below in your block file.

Code:

 <?php  
 namespace Mynamespace\Mymodule\Block;  
 class Link extends \Magento\Framework\View\Element\Html\Link  
 {  
   public function getHref()  
   {  
     return $this->getUrl('test');  
   }  
   public function getLabel()  
   {  
     return __('Test Link');  
   }  
 }  
 ?>

Step 2: Now create app\code\Mynamespace\Mymodule\view\frontend\layout\default.xml, if not already created and add code below in body tag

Code:

 <body>      
  <referenceBlock name="top.links">  
  <block class="Mynamespace\Mymodule\Block\Link" name="test-link" after="my-account-link"/>  
  </referenceBlock>      
 </body>

Step 3: Clear All Cache and you are done.

Mar 13, 2015

How to update or change page layout in Magento2

In Magento 2, we have page layout same as the page layouts in Magento1 but the implementation is slightly different.

To demonstrate, we choose the customer layout (customer.xml) file which show you how to update 1column.phtml page layout,

In Magento1 we used to update page layout like:

 <customer_account_login translate="label">   
  <reference name="root">  
  <action method="setTemplate"><template>page/1column.phtml</template></action>  
  </reference>   
 </customer_account_login>

In Magento 2: Open file \Magento\Customer\view\frontend\layout\customer_account_login.xml and add layout="1column" in page tag

For Example:

 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">

Note: You can use other layout options like 2columns-left, 2columns-right and 3columns instead of 1column.
Note: You can use your custom module layout xml file to update layout.