Markup Tags: saiba usá-las no Magento
Desenvolvimento, Gerenciar minha loja, Magento 2
Atualizado em 22 de junho de 2022
Markup tags ou tags de marcação, são pequenos trechos de código inseridos em e-mails transacionais, blocos e páginas. Ao serem processados, eles são substituídos por textos dinâmicos, ou conteúdo fornecido por uma classe de bloco (Block).
Markup tags são definidas dentro de {{e podem ser geradas pela ferramenta de Widget ou via texto como conteúdo HTML.
Um exemplo comum de uso é ao inserir URL’s da loja. Este URL geralmente muda de acordo com o ambiente (desenvolvimento, produção, visão de loja, etc). Sendo assim, pra evitar ter que alterá-lo para cada situação, usamos as tags de marcação. Por exemplo, {{store url='sobre-nos'}}.
Desta forma, se quisermos criar um link para página https://minhaloja.com/sobre-nos ou https://dev.minhaloja.com/sobre-nos, bastaria adicionar <a href="{{store url='sobre-nos'}}">Sobre Nós</a>.
Ele pode ser usado em blocos estáticos, páginas, descrição de categorias, template de e-mails transacionais, etc.
Outros tipos de markup tags
Variável personalizada
Variáveis personalizadas são definidas em Sistema > Outros ajustes > Variáveis personalizadas. Eles podem trazer informações que mudam com alguma frequência mas que sua mudança não exija uma alteração de código. Por exemplo, o telefone e horário de funcionamento (que muda em feriados).
Para inserir o valor de uma variável personalizada usando markup tags, faça:
{{CustomVar code= "identificador-da-variavel"}}
URL da loja
Ela representa a URL base do seu website. Ela recebe uma propriedade url que pode ser / ou com outro valor a ser adicionado ao final da sua url. No primeiro caso, ela retornará o url inicial da sua loja.
{{store url='cursos'}}
Retornaria https://www.magenteiro.com/cursos em nossa loja.
URL de Media
Representa a url de uma imagem que pode ser armazenada em um CDN. Ela pode ser usada em páginas, banners, blocos ou template de e-mails, assim como as demais.
{{media url='sapato.jpg'}}
Bloco CMS
Blocos CMS são parecidos com as variáveis personalizadas. No entanto, eles podem ser usados para guardar mais conteúdos, inclusive conteúdos mais sofisticados como vídeos, imagens, código html e muito mais. Eles são cadastrados em Conteúdo > Elementos > Blocos.
{{block id='id-do-bloco'}}
Adicionaria um bloco específico a uma página, ou outro lugar específico.
Tag de template de bloco
O markup de template se refere a um arquivo de extensão PHTML. Arquivos de template PHTML são uma mistura de PHP com HTML, portanto podem trazer informações mais dinâmicas e sofisticadas.
{{block class="Magento\Contact\Block\ContactForm" name="contactForm" template="Magento_Contact::form.phtml"}}
Ao inserir o markup acima em uma página CMS ou Bloco estático, terei um formulário de contato. Ele será um bloco representado pela classe Magento\Contact\Block\ContactForm e pelo PHTML form.phtml originalmente localizado dentro da pasta do módulo Magento_Contact/view/frontend/templates/form.phtml.
{{block type="catalog/product_list" category_id="22" template="catalog/product/list.phtml"}}
Já este outro bloco, nos permite inserir uma lista de produtos da categoria 22. Note que ao invés de especificar a propriedade classe (class), fiz uso do type para definir a classe do bloco.
Widget code
Um widget pode ser usado pra exibir uma lista de produtos, ou inserir links complexos, como aqueles que vão pra página de um produto específico com base no id dele. O markup de um widget inclui a referências pra classe do bloco, localização dele, e o arquivo de template PHTML. Assim como os demais, uma vez inserido você pode reaproveitá-lo apenas copiando e colando.
{{widget type="catalog/product_widget_new" display_type="new_products" products_count="10" template="catalog/product/widget/new/content/new_grid.phtml"}}
Mostraria uma lista de produtos marcados como novidade na data de hoje. A marcação de “novidade” ocorre no cadastro do produto, ao definir datas aos atributos “Set Product as New From/To” (Marcar como Novidade De/Até).
{{widget type="catalog/product_widget_link" anchor_text="Link para Meu Produto" title="Titulo do Link pra quando passar o mouse em cima" template="catalog/product/widgetlink/link_block.phtml" id_path="product/31"}}
Já no exemplo acima, teríamos o link para o produto com ID 31.
Outros exemplos úteis para e-mails
Note que a maioria dos e-mails transacionais possuem uma seção de variáveis pré-definidas. A lista abaixo mostra as mais comuns:
Variáveis de e-mails transacionais genéricas
| Variável | Markup Tag |
|---|---|
| Email Template de Rodapé | {{template config_path=”design/email/footer_template”}} |
| Email Template de cabeçalho | {{template config_path=”design/email/header_template”}} |
| Email Logo Image Alt | {{var logo_alt}} |
| Email Logo Image URL | {{var logo_url}} |
| Email Logo Image Altura | {{var logo_height}} |
| Email Logo Image Largura | {{var logo_width}} |
| Template CSS | {{var template_styles|raw}} |
Informações de contato da loja
| Variável | Markup Tag |
|---|---|
| URL Base não seguro (http) | {{config path=”web/unsecure/base_url”}} |
| URL Base seguro (https) | {{config path=”web/secure/base_url”}} |
| Nome do Contato Geral | {{config path=”trans_email/ident_general/name”}} |
| Email do Contato Geral | {{config path=”trans_email/ident_general/email”}} |
| Nome do Representante de Vendas | {{config path=”trans_email/ident_sales/name”}} |
| E-mail do Representante de Vendas | {{config path=”trans_email/ident_sales/email”}} |
| Nome do Suporte | {{config path=”trans_email/ident_support/name”}} |
| E-mail do Suporte | {{config path=”trans_email/ident_support/email”}} |
| Nome do Contato Personalizado 1 | {{config path=”trans_email/ident_custom1/name”}} |
| E-mail do Contato Personalizado 1 | {{config path=”trans_email/ident_custom1/email”}} |
| Nome do Contato Personalizado 2 | {{config path=”trans_email/ident_custom2/name”}} |
| E-mail do Contato Personalizado 2 | {{config path=”trans_email/ident_custom2/email”}} |
| Nome da Loja | {{config path=”general/store_information/name”}} |
| Telefone | {{config path=”general/store_information/phone”}} |
| Hora de funcionamento | {{config path=”general/store_information/hours”}} |
| País da loja | {{config path=”general/store_information/country_id”}} |
| Região/Estado | {{config path=”general/store_information/region_id”}} |
| CEP da Loja | {{config path=”general/store_information/postcode”}} |
| Cidade | {{config path=”general/store_information/city”}} |
| Endereço Linha 1 | {{config path=”general/store_information/street_line1”}} |
| Endereço Linha 2 | {{config path=”general/store_information/street_line2”}} |
| Endereço de Contato | {{config path=”general/store_information/address”}} |
| VAT Number / CNPJ | {{config path=”general/store_information/merchant_vat_number”}} |
Variáveis de e-mail de nova conta
| Variável | Markup Tag |
|---|---|
| Dashboard do Usuário | {{var this.getUrl($store, ‘customer/account/’)}} |
| E-mail do cliente | {{var customer.email}} |
| Nome do Cliente | {{var customer.name}} |
Variáveis de e-mail de novo pedido
| Variável | Markup Tag |
|---|---|
| Endereço de Cobrança | {{var formattedBillingAddress|raw}} |
| Anotações do Pedido | {{var order.getEmailCustomerNote()}} |
| ID do Pedido | {{var order.increment_id}} |
| Tabela com os itens comprados | {{layout handle=”sales_email_order_items” order=$order area=”frontend”}} |
| Detalhes de pagamento | {{var payment_html|raw}} |
| Endereço de Entrega | {{var formattedShippingAddress|raw}} |
| Descrição da forma de entrega | {{var order.getShippingDescription()}} |
Veja também Como adicionar foto dos produtos nos e-mails da sua loja.
Bacana e simples, não é mesmo?
Deixe seu comentário e compartilhe. Assim sabemos que foi útil e o que devemos fazer mais por aqui. 😉
Esses e outros recursos do Magento são explorados no nosso Curso de Administração de Lojas e no Curso de desenvolvimento de módulos para Magento. Não deixe de conferir.
- PagSeguro (PagBank) para Magento 1 recebe a Nova Geração - 9 de abril de 2024
- Recorrência no WooCommerce Sem Plugins Pagos - 28 de janeiro de 2024
- Chargeback. O que é, e como se livrar deles. - 19 de dezembro de 2023
Deixe seu comentário
[fbcomments url="https://www.magenteiro.com/blog/magento-2/markup-tags/"]