Magento, Magento2

Magento2 Cheat Sheet – Frontend

Magento2 Cheat Sheet – Frontend

In our everyday activity, while working on Magento2, we need a few things, but remembering all this is a bit of a hectic task. So I’ll try to list one possible Magento2 Cheat Sheet for you.

You may also like:

  1. Magento2 Useful Command-List

Let’s start with Magento2 Cheat Sheet:

Magento2: Get URL(s)

1. Magento2: Get Url in phtml file

<?php echo $this->getUrl(); ?>

For example:

  1. Add contact page URL in phtml file
<a href="<?php echo $this->getUrl('contact'); ?>" title="<?= __('Contact Us');?>"><?= __('Contact Us');?></a>

2. Magento2: Get Web / Base URL in Static block:

{{config path="web/unsecure/base_url"}}

For example:

  1. Add contact page URL
<a href="{{config path="web/unsecure/base_url"}}contact" title="Contact Us">Contact Us</a>

3. Magento2: Get Web / Secure Base URL in Static block:

{{config path="web/secure/base_url"}}

For example:

  1. Add contact page URL
<a href="{{config path="web/secure/base_url"}}contact" title="Contact Us">Contact Us</a>

4. Magento2: Get General / Store Information / Store Name in Static block:

{{config path="general/store_information/name"}}

For example:

  1. Show store name:
<span>{{config path="general/store_information/name"}}</span>

5. Magento2: Get image URL in phtml file

<?php echo $this->getViewFileUrl('images/demo.jpg'); ?>

For example:

If the image stored under app/design/frontend/<vendor>/<theme>/web/images/ folder

<img src="<?php echo $this->getViewFileUrl('images/demo.jpg'); ?>" alt="demo">

Magento2: Add a custom class on the body tag

Sometimes we need to add a custom class to the body tag. If you think it is a tough task, let me show you it is very easy.

<attribute name="class" value="custom-simple-product"/>

For example:

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<attribute name="class" value="custom-class"/>
</body>
</page>

Note:

  1. If you want to add a custom body class for all pages, then write above code in default.xml
  2. If you want to add a custom body class for a specific page, you need to write above to specific layout handle.
    1. Homepage – cms_index_index.xml
    2. Product page – catalog_product_view.xml
    3. Category page – catalog_category_view.xml and so on.

Magento2: Add a custom css file(s)

Sometimes we need to add a custom css file.

<css src="css/custom.css" />

For example:

If the css file stored under app/design/frontend/<vendor>/<theme>/web/css/ folder

<?xml version="1.0"?>
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/custom.css" />
</head>
</page>

If the css file stored under app/code/<vendor>/<module>/view/frontend/web/css folder

<?xml version="1.0"?>
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Vendor_Module::css/custom.css" />
</head>
</page>

Magento2: Add a custom JS file(s)

Sometimes we need to add a custom Js file.

<link src="js/custom.js" />

For example:

If the JS file stored under app/design/frontend/<vendor>/<theme>/web/js/ folder

<?xml version="1.0"?>
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link src="js/custom.js" />
</head>
</page>

If the js file stored under app/code/<vendor>/<module>/view/frontend/web/js folder

<?xml version="1.0"?>
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link src="Vendor_Module::js/custom.js" />
</head>
</page>

Magento2: List of layout handles

List of common layout handles:

PagesLayout Handle
Homepagecms_index_index.xml
Shopping Cart pagecheckout_cart_index.xml
Product pagecatalog_product_view.xml
Product page (simple product)catalog_product_view_type_simple.xml
Product page (configurable product)catalog_product_view_type_configurable.xml
Product page (virtual product)catalog_product_view_type_virtual.xml
Category pagecatalog_category_view.xml
Checkout pagecheckout_index_index.xml
Order Success pagecheckout_onepage_success.xml
Order Failure pagecheckout_onepage_failure.xml
Signin/Login pagecustomer_account_login.xml
Signup pagecustomer_account_create.xml
Forget password pagecustomer_account_forgotpassword.xml
Customer account dashboardcustomer_account.xml
Contact us pagecontact_index_index.xml
404 Error pagecms_noroute_index.xml
Wishlistwishlist_index_index.xml
Search resultcatalogsearch-result-index
Common used layout handles in Magento2

Magento2: Call Static Block in CMS Page

{{block class="Magento\Cms\Block\Block" block_id="your_block_identifier"}}

Magento2: Call Static Block in Template (.phtml) file

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

Magento2: Call Static Block in Layout (XML) File

<referenceContainer name="content">
<block class="Magento\Cms\Block\Block" name="block_identifier">
<arguments>
<argument name="block_id" xsi:type="string">block_identifier</argument>
</arguments>
</block>
</referenceContainer>

Magento2: Call template(.phtml) file in static block / cms page

{{block class="Magento\Framework\View\Element\Template" template="Vendor_Module::custom.phtml"}}

Hope this article helped you. If you have any queries, you can ask me directly over email at aryansrivastavadesssigner@gmail.com or contact me here.

If you want a live session, do direct ping me on LinkedIn I will arrange an online session on weekends.

Tagged , ,

About Aryan Srivastava

I'm Aryan Srivastava, a technical blogger. Learn the basics of Magento, front-end technology, comprehension for better programming with experts.
View all posts by Aryan Srivastava →

Leave a Reply

Your email address will not be published.