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:
Let’s start with Magento2 Cheat Sheet:
Magento2: Get URL(s)
1. Magento2: Get Url in phtml file
<?php echo $this->getUrl(); ?>For example:
- 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:
- 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:
- 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:
- 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:
- If you want to add a custom body class for all pages, then write above code in default.xml
- If you want to add a custom body class for a specific page, you need to write above to specific layout handle.
- Homepage – cms_index_index.xml
- Product page – catalog_product_view.xml
- 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:
| Pages | Layout Handle |
|---|---|
| Homepage | cms_index_index.xml |
| Shopping Cart page | checkout_cart_index.xml |
| Product page | catalog_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 page | catalog_category_view.xml |
| Checkout page | checkout_index_index.xml |
| Order Success page | checkout_onepage_success.xml |
| Order Failure page | checkout_onepage_failure.xml |
| Signin/Login page | customer_account_login.xml |
| Signup page | customer_account_create.xml |
| Forget password page | customer_account_forgotpassword.xml |
| Customer account dashboard | customer_account.xml |
| Contact us page | contact_index_index.xml |
| 404 Error page | cms_noroute_index.xml |
| Wishlist | wishlist_index_index.xml |
| Search result | catalogsearch-result-index |
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.