Chapters Close

Undoubtedly, Magento provides the store customization beyond we can think and implement. And as such comparatively, if you want to add a static block in the page content section then it’s not a big deal to achieve. However, to customize the sidebar column it requires a bit of tricky work from you.

Following such practice to manipulate the sidebar section of any page in Magento 2, we instruct a simple process to add a static block of your choice.

To begin with, we need to create a CMS static block on the admin side, and then we will be displaying the same on the storefront.

For example,

Looking onto the code-work, first, we need to create a module let’s say AureateLabs_Demo and add a default.xml file in your module at the below path:
app/code/AureateLabs/Demo/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
     <referenceContainer name="sidebar.additional">
          <block class="AureateLabs\Demo\Block\Sidebar" name="sidebar_static_block" as="sidebar_static_block" template="AureateLabs_Demo::sidebar.phtml" after="wishlist_sidebar"/>
     </referenceContainer>
</body>
</page>

Now, in order to render the block which we have created in the admin panel, we need to create block class and template file

First, create a Block class Sidebar.php and add the following code in it.

File path: app/code/AureateLabs/Demo/Block/Sidebar.php

<?php
namespace AureateLabs\Demo\Block;
class Sidebar extends \Magento\Framework\View\Element\Template
{
  /**
   * @var \Magento\Store\Model\StoreManagerInterface
   */
  protected $_storeManager;
  /**
   * @var \Magento\Cms\Model\BlockFactory
   */
  protected $_blockFactory;
  /**
   * @var \Magento\Cms\Model\Template\FilterProvider
   */
  protected $filterProvider;
  /**
   * Sidebar constructor.
   * @param \Magento\Framework\View\Element\Template\Context $context
   * @param \Magento\Store\Model\StoreManagerInterface $storeManager
   * @param \Magento\Cms\Model\BlockFactory $blockFactory
   * @param \Magento\Cms\Model\Template\FilterProvider $filterProvider
   * @param array $data
   */
  public function __construct(
      \Magento\Framework\View\Element\Template\Context $context,
      \Magento\Store\Model\StoreManagerInterface $storeManager,
      \Magento\Cms\Model\BlockFactory $blockFactory,
      \Magento\Cms\Model\Template\FilterProvider $filterProvider,
      array $data = []
  ) {
      parent::__construct(
          $context,
          $data
      );
      $this->_storeManager = $storeManager;
      $this->_blockFactory = $blockFactory;
      $this->filterProvider = $filterProvider;
  }
  public function getstaticBlockContent($blockId)
  {
      $html = '';
      if ($blockId) {
          $storeId = $this->_storeManager->getStore()->getId();
          /** @var \Magento\Cms\Model\Block $block */
          $block = $this->_blockFactory->create();
          $block->setStoreId($storeId)->load($blockId);
          $html = $this->filterProvider->getBlockFilter()
                       ->setStoreId($storeId)
                       ->filter($block->getContent());
      }
      return $html;
  }
}

Now, create a template file sidebar.phtml and call getstaticBlockContent method with parameter(static block identifier) to get the block content.

File path: app/code/AureateLabs/Demo/view/frontend/templates/sidebar.phtml

<?php
/**
* @var \AureateLabs\Demo\Block\Sidebar $block
*/
echo $block->getstaticBlockContent('sidebar-static-block');

Final Output

This is all. If you’ve followed the above steps carefully then you must see your static block displayed in sidebar column as shown in below image.

Though it’s not that much complicated to create and display static block in Magento 2 still you’ve stuck somewhere in between, getting errors or having any questions, feel free to reach us by leaving a comment below. We will be happy if given a chance to resolve your queries.

Table of Contents

To Display description in wishlist you have to follow the steps given below:

Step 1

Create a new file wishlist_index_index.xml at location: <root>\app\design\frontend\Companyname\Packagename\Magento_Wishlist\layout\wishlist_index_index.xml

<body>
<referenceBlock name="customer.wishlist.items">
<block class="Companyname\Packagename\Block\Description" name="customer.wishlist.item.description" template="Magento_Wishlist::item/column/description.phtml" cacheable="false" after="customer.wishlist.item.name"/>
</referenceBlock>
</body>

Step 2

Create a new file description.phtml at location: <root>\app\design\frontend\Companyname\Packagename\Magento_Wishlist\templates\item\column\description.phtml

<?php 
$item = $block->getItem(); 
$product = $item->getProduct(); 
?> 
<strong class="product-item-description"> 
<?php echo $block->escapeHtml($product->getDescription()) ?> 
</strong>

Step 3

Create a new file Description.php at location: <root>\app\code\Companyname\Packagename\Block\Description.php

<?php
namespace Companyname\Packagename\Block;
class Description extends \Magento\Wishlist\Block\Customer\Wishlist\Item\Column\Info
{
 /**
    * @var \Magento\Catalog\Api\ProductRepositoryInterface 
  */
protected $productRepository;

public function __construct(
\Magento\Catalog\Block\Product\Context $context,
\Magento\Framework\App\Http\Context $httpContext,
array $data = [],
\Magento\Catalog\Api\ProductRepositoryInterface $productRepository
) {
$this->productRepository = $productRepository;
parent::__construct($context, $httpContext, $data);
}

public function getDescription()
{
$id = $this->getItem()->getProduct()->getId();
$product = $this->productRepository->getById($id);
return $product->getDescription();
}
}

Note:- Do not make changes in the core files, add it in your theme directory

Step 4

In layout file replace block class from Magento\Wishlist\Block\Customer\Wishlist\Item\Column\Info to Companyname\Packagename\Block\Description

After that in your template file, you can get product description using the code given below:

Finally, run the commands given below to make changes effective:

php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy en_US -f
php bin/magento cache:clean
php bin/magento cache:flush

Feel free to leave the comments below and contact us if you need any help to customize your Magento store.

Happy coding!

Variables are pieces of information that can be created once and can be used in multiple places, such as email templates, blocks, and content pages. There are two kinds of variables: Predefined Variables & Custom Variables.

So, when we develop an e-commerce store on Magento, it includes a large number of predefined variables that can be used to personalize communications. Below are the default variables that can be added:

The list of default variables is limited. In addition, we can create our own custom variables.

Now, We will learn how to add predefined variables.

Step 1 : 

Choose the template where you want to add variables. It can be email template or page template.

Example: To add variables to email templates.
Firstly, navigate to Marketing > Communications > Email Templates. Then choose the template where you want to add the variables to (or create new templates).

Step 2 :

Firstly, navigate to Marketing > Communications > Email Templates. Then choose the template where you want to add the variables to.

Step 3 :

To create a custom variable, we need to do the following: 
Go to System > Other Settings > Custom Variables.

After the page loads, you need to click on the add variable button.

Then Enter the custom variable information.

  • In the Variable Code field, Enter an identifier and use all lowercase characters, without spaces.
  • Enter a Variable Name, which is used for internal reference.
  • In the Variable HTML Value text field, enter any content you want to include, using basic HTML tags. This option allows you to format the value.
  • In the Variable Plain Value field, enter the variable value as plain text.

This way you can add custom as well as default variable in the page, block and email templates.

Widgets are elements for adding static or dynamic content in any cms block and cms page in magento 2. Widgets have configurable parameters that can be set when you are adding the widget in the admin panel. Widgets are reusable component and with configurable parameter you can use the same widget in different number of pages with different parameter value.

Some of the custom widget implementation is as follows:

  • Dynamic listing of recently viewed products
  • Dynamic product listing
  • Dynamic flash elements that are inserted in content pages
  • Interactive navigation elements and action blocks
  • Promotional banners

For creating custom widget you have to create one module. Here I will be using the Aureatelabs_CustomWidget as my module.

Create the registration.php file in the app/code/Aureatelabs/CustomWidget folder.

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::MODULE,
   'Aureatelabs_CustomWidget',
   __DIR__
);

Create the module.xml file in the app/code/Aureatelabs/CustomWidget/etc folder.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
   <module name="Aureatelabs_CustomWidget" setup_version="1.0.0" />
</config>

Now for initialisation of the widget we need a widget.xml file. So next you need to do is create the widget.xml file in the app/code/Aureatelabs/CustomWidget/etc folder.

<?xml version="1.0" encoding="UTF-8"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
   <widget class="Aureatelabs\CustomWidget\Block\Widget\CustomWidget" id="aureatelabs_customwidget">
       <label>Aureatelabs Custom Widget</label>
       <description>Aureatelabs Custom Widget Example</description>
       <parameters>
           <parameter name="title" sort_order="10" visible="true" xsi:type="text">
               <label>Title</label>
           </parameter>
       </parameters>
   </widget>
</widgets>

Here in the widget node there are two attributes

  • class : Defines the widget class
  • id : Gives custom widget an unique id

In widget node there are child nodes such as:

  • label : Sets the widget label that will appear in the widget list
  • description : Sets widget description
  • parameters :  The parameters node allows you to add different parameters like the text, select, multiselect, block and templates. We will discuss further about this later in this tutorial.

Now we have to create a block file for the widget as defined in widget.xml. So create the CustomWidget.php file in the app/code/Aureatelabs/CustomWidget/Block/Widget folder.

<?php
namespace Aureatelabs\CustomWidget\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class CustomWidget extends Template implements BlockInterface
{
   protected $_template = "widget/custom_widget.phtml";

}

In the above snippet, $_template is used to set the template for the widget. 

We have set the $_template value to “widget/custom_widget.phtml”. So it will search for the custom_widget.phtml file in the  app/code/Aureatelabs/CustomWidget/view/frontend/templates/widget folder.

Thus create the custom_widget.phtml file in the app/code/Aureatelabs/CustomWidget/view/frontend/templates/widget folder.

<h1><?php echo $this->getData('title'); ?></h1>

In order to get the parameter value from the phtml file we have to use $this->getData(‘parameter_name’)

It is important to note that we can also use this in block file for getting the parameter value.

We have performed all the steps that are needed to create a custom widget in magento 2 . Now we have to just Flush the cache and add our custom widget in any cms page or any cms block.

You will see the “Aureatelabs Custom Widget” in the widget list.

We have created a simple custom widget in magento 2. For advanced information about custom widgets refer the section given below.

How to add the select and multiselect parameters in the custom widget

In order to add the select and multiselect options in the  widget, you have to add the parameters given below in the widget.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
   <widget class="Aureatelabs\CustomWidget\Block\Widget\CustomWidget" id="aureatelabs_customwidget">
       <label>Aureatelabs Custom Widget</label>
       <description>Aureatelabs Custom Widget Example</description>
       <parameters>
           <parameter name="options" xsi:type="select" visible="true" source_model="Aureatelabs\CustomWidget\Model\Config\Source\DataOptions" sort_order="20" >
               <label>Select options</label>
               <description>Select options</description>
           </parameter>
           <parameter name="data_options" xsi:type="multiselect" visible="true" source_model="Aureatelabs\CustomWidget\Model\Config\Source\DataOptions" sort_order="40" >
               <label>Data Options</label>
               <description>Select data options </description>
           </parameter>
       </parameters>
   </widget>
</widgets>

Here, in parameter node in xsi:type attribute, set the value to select or multiselect.

There is one more attribute named the source_model. It is used in the  select and multiselect widget parameter.

Now you have to create a source file for the select and multiselect parameter.So create a DataOptions.php file in the app/code/Aureatelabs/CustomWidget/Model/Config/Source folder

<?php
namespace Aureatelabs\CustomWidget\Model\Config\Source;

use Magento\Framework\Option\ArrayInterface;

class DataOptions implements ArrayInterface
{
   public function toOptionArray()
   {
       $options = [
           [
               'value' => 'option1',
               'label' => __('Option-1')
           ],
           [
               'value' => 'option2',
               'label' => __('Option-2')
           ],
           [
               'value' => 'option3',
               'label' => __('Option-3')
           ],
       ];

       return $options;
   }
}

Dependency in Widget Parameter

Depends attribute is used when one parameter is dependent on the other parameter.

<?xml version="1.0" encoding="UTF-8"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
   <widget class="Aureatelabs\CustomWidget\Block\Widget\CustomWidget" id="aureatelabs_customwidget">
       <label>Aureatelabs Custom Widget</label>
       <description>Aureatelabs Custom Widget Example</description>
       <parameters>
           <parameter name="enable_url" xsi:type="select" visible="true" source_model="Magento\Config\Model\Config\Source\Yesno" sort_order="20" >
               <label>Add URL</label>
               <description>Enable or disable URL link </description>
           </parameter>
           <parameter name="url" xsi:type="text" visible="true" sort_order="30" >
               <label>URL</label>
               <depends>
                   <parameter name="enable_url" value="1" />
               </depends>
           </parameter>
       </parameters>
   </widget>
</widgets>

In above example url parameter is dependent on the enable_url parameter. When enable_url value is set to 1, then the url parameter will be displayed or else the url parameter will not be shown.

In this post we will guide you how to add a new custom tab in the product detail page in magento2.

To start with create a file ‘catalog_product_view.xml’ in the app/code/<VendorName>/<ModuleName>/view/frontend/layout folder.

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
       <referenceBlock name="product.info.details">
           <block class="Magento\Catalog\Block\Product\View" name="custom.tab" template="Aureatelabs_Training::custom_tab.phtml" group="detailed_info" >
               <arguments>
                   <argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
               </arguments>
           </block>
       </referenceBlock>
   </body>
</page>

Change “Aureatelabs_Training” with <VendorName>_<ModuleName> in the catalog_product_view.xml

Now create the custom_tab.phtml file in app/code/<VendorName>/<ModuleName>/view/frontend/layout folder and add the below snippet in the phtml file.

<?php

echo "This is Custom tab in product detail page";

?>

Now you can check your product detail page on frontend.

Custom Tab

Show product details in custom tab

You can show product data on custom tab in product detail page. In order to do this you have to make the below changes in the custom_tab.phtml file.

<?php
// get current product data
$product = $block->getProduct();

// get Product name
echo $product->getName();

// get product description
echo $product->getDescription();

// Get custom product attribute value, change ‘custom_product_attribute’ with your ‘product attribute code’
echo $product->getData('custom_product_attribute');

?>

$block->getProduct() will get current product data.

In custom_product_attribute you can add custom attribute code to get custom attribute data for current product.

Show static block in custom tab

You can show static block data on custom tab in product detail page. To do this you have to make the below change in the custom_tab.phtml file.

<?php

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

?>

Hope this article helped you to create a custom tab on product detail page in Magento 2.

For any Magento project, the most exciting time is when you launch the Magento project live. But what I have noticed most of the times is that there are some unnecessary links present in my account section.

This is because Magento brings in some default links under my account on the right-hand section as you can see in the screenshot below.

Usually, some of the projects that I build doesn’t make use of any downloadable products, recurring profiles or any applications yet links like this are present in my account under this section.

Sometimes add a product to the wishlist option is not present at the front end but like you can see in the above screenshot “My Wishlist” link is still present in my account section.

Therefore I believe this may confuse the customer to a certain extent about the feature that is not present on the site.

The best practice is to verify and remove all these unnecessary links that are not required in my account section.

Here are the code snippets which will help you to remove Billing Agreements, Recurring Profiles and My Downloadable Products links from the account.

Billing Agreements: Copy this file app/design/frontend/base/default/layout/sales/billing_agreement.xml in your current theme and remove or comment out the following lines

<reference name="customer_account_navigation">
     <action method="addLink" translate="label">
          <name>billing_agreements</name>
          <path>sales/billing_agreement/</path>
          <label>Billing Agreements</label>
     </action>
</reference>

Recurring Profiles: Copy this file app/design/frontend/base/default/layout/sales/recurring_profile.xml in your current theme and remove or comment out the following lines

<reference name="customer_account_navigation">
     <action method="addLink" translate="label">
          <name>recurring_profiles</name>
          <path>sales/recurring_profile/</path>
          <label>Recurring Profiles</label>
     </action>
</reference>

My Downloadable Products: Copy this file app/design/frontend/base/default/layout/downloadable.xml in your current theme and remove or comment out the following lines

<reference name="customer_account_navigation">
     <action method="addLink" translate="label" module="downloadable"
          <name>downloadable_products</name
          <path>downloadable/customer/products</path>
          <label>My Downloadable Products</label>
     </action>
</reference>

In the end, it’s a good practice to remove all the unnecessary links from your account section and keep it nice and clean.

Cheers!

This article will help you to understand the basic difference between attributes remove and display true|false in Magento 2 layout.

Remove attribute

  • Allows to remove or cancel the removal of the element. When a container is removed, its child elements are removed as well.
  • The remove attribute is optional and its default value is false.
  • This implementation allows you to cancel the removal of a block or container in your layout by setting remove attribute value to true.
  • Possible values are true and false.

Example:

<referenceBlock name="block.name" remove="true" />

Display attribute

  • Allows you to disable rendering of a specific block or container with all its children (both set directly and by reference). The block’s/container’s and its children’ respective PHP objects are still generated and available for manipulation.
  • The display attribute is optional and its default value is true.
  • You are always able to overwrite this value in your layout. In the situation when remove value is true, the display attribute is ignored.
  • Possible values are true and false.

Example:

<referenceContainer name="container.name" display="false" />

Hope this detailed article served your purpose. Feel free to leave the comments below and contact us if you need any help to customize your Magento store.

Grow your online business like 4,028 subscribers

    * This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
    envelope

    Thank You!

    We are reviewing your submission, and will be in touch shortly.