5 Basic Samples Of Markup Tags In Magento 2

Posted by

A markup tag is a snippet container of code with a relative reference to an object in Magento 2 online store such as variables, URLs, images or blocks. Store administrators can use markup tags in any available place in the editor and attach to the HTML of content pages, blocks, email templates, newsletters, and so on.

Store administrators can create markup tags using widget or type directly into HTML content. There are several types of markup tags we will describe below:

Custom Variable

Store administrators use this markup tag to insert a custom variable into email templates, blocks, newsletters and content pages.

{{CustomVar code= “my_custom_variable”}}

Store URL

The URL of Magento 2 website is represented by the Store URL markup tag. The first part of a full URL, including the domain name use the Store URL markup tag as a substitute. A version of Store URL markup tag will directly go to your store, and the other ones ending with a forward slash is used after the path is added.

{{store url=’apparel/shoes/womens’}}

Media URL

The location and file name of an image that are stored on a content delivery network (CDN) are represented by the dynamic media URL. The image on a page, block, banner, or email template can use the tag to set the position.

{{media url=’shoe-sale.jpg’}}

Block ID

One of the easiest markup tags to use is the Block ID. Store administrators use this markup tag to place a block on a CMS page or nest the block inside another block. This technique can be used to edit a block for different promotions or languages. The Block ID markup tag references a block by its identifier.

{{block id=’block-id’}}

Template Tag

Store owners can use Template Tag to display the block on a CMS page and static block. You can add the code to a page or block to display a Contact Us form. For example:

“Contact Us” Template Tag:

{{block type=”core/template” name=”contactForm”

template=”contacts/form.phtml”}}

This code can be added to page or block to display products list in a specific category

“Category Product List” Template Tag:

{{block type=”catalog/product_list” category_id=”22″

template=”catalog/product/list.phtml”}}

Widget Code

Store owners use Widget Tool to display the products list or to insert complex links. Store owners can generate the code including the block reference, corresponding PHTML template, and location of the code module and copy paste it from one place to another.

Store owners can use this code in a page or block to display the new products list:

“New Products Grid” Code

{{widget type=”catalog/product_widget_new”

display_type=”new_products” products_count=”10″

template=”catalog/product/widget/new/content/new_grid.phtml”}}

Or use this code in page or block to display a specific product link by product ID:

“Link to Product” Code

{{widget type=”catalog/product_widget_link” anchor_text=”My Product Link”

title=”My Product Link” template=”catalog/product/widget/link/link_block.phtml”

id_path=”product/31″}}

Leave a Reply

Your email address will not be published. Required fields are marked *