{"id":3032,"date":"2021-04-14T19:04:47","date_gmt":"2021-04-14T22:04:47","guid":{"rendered":"https:\/\/www.magenteiro.com\/blog\/?p=3032"},"modified":"2022-03-01T02:47:22","modified_gmt":"2022-03-01T05:47:22","slug":"foto-produtos-nos-emails-magento","status":"publish","type":"post","link":"https:\/\/www.magenteiro.com\/blog\/magento-2\/foto-produtos-nos-emails-magento\/","title":{"rendered":"Como adicionar foto dos produtos nos e-mails da sua loja"},"content":{"rendered":"\n

O Magento envia uma s\u00e9rie de e-mails durante o ciclo de vida de um pedido. N\u00f3s j\u00e1 vimos aqui no blog como personalizar boa parte destes e-mails transacionais<\/a>.<\/p>\n\n\n\n

No entanto, inserir elementos que n\u00e3o s\u00e3o passados nativamente para os templates pode ser um pouco mais desafiador, e vamos precisar mexer em um arquivo de template da nossa loja para atingir esse objetivo.<\/p>\n\n\n\n

Um destes exemplos \u00e9 adicionar a foto dos produtos na listagem de itens que s\u00e3o exibidos nos e-mails de transa\u00e7\u00e3o, como por exemplo o e-mail de novo pedido. Neste e-mail, os itens comprados s\u00e3o exibidos em um formato de lista para o cliente, mas nem sempre s\u00e3o de f\u00e1cil identifica\u00e7\u00e3o. Especialmente em pedidos com v\u00e1rios itens.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Veja abaixo um simples passo a passo de como adicionar a foto do produto nos seus e-mails.<\/p>\n\n\n\n

1. Identifique o tema que est\u00e1 em uso da sua loja<\/h2>\n\n\n\n

Identificar o tema que estamos usando nos guiar\u00e1 pelo pr\u00f3ximos passos. Sabendo qual tema est\u00e1 em uso, poderemos localiz\u00e1-lo na nossa loja e modificar o que precisamos.<\/p>\n\n\n\n

Por padr\u00e3o, o tema ativo \u00e9 definido e exibido em Content > Design > Configuration (Conte\u00fado > Visual > Configura\u00e7\u00e3o), na \u00e1rea administrativa da nossa loja.<\/p>\n\n\n\n

\"Design<\/figure>\n\n\n\n

2. Copie este arquivo<\/h2>\n\n\n\n

Copie o arquivo vendor\/magento\/module-sales\/view\/frontend\/templates\/email\/items\/order\/default.phtml<\/code> para dentro de app\/design\/frontend\/[VENDOR]\/[TEMPLATE]\/Magento_Sales\/templates\/email\/items\/order\/default.phtml<\/code>.<\/p>\n\n\n\n

Note que VENDOR e TEMPLATE correspondem a pasta do seu tema.<\/p>\n\n\n\n

Exemplo:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

3. Adicione algumas vari\u00e1veis<\/h2>\n\n\n\n

Adicione algumas vari\u00e1veis PHP no come\u00e7o do arquivo que acabamos de copiar. Note que algumas j\u00e1 existem l\u00e1:<\/p>\n\n\n\n

<?php\n# ...\n$_item = $block->getItem();\n$_order = $_item->getOrder();\n\n#adicione as seguintes:\n$_store = $_order->getStore();\n$_imageHelper = \\Magento\\Framework\\App\\ObjectManager::getInstance()->get('Magento\\Catalog\\Helper\\Image');\n$_baseImageUrl = $_store->getBaseUrl(\\Magento\\Framework\\UrlInterface::URL_TYPE_MEDIA).'catalog\/product';\n<\/pre>\n\n\n\n
4. Personalize \u00e0 gosto<\/h2>\n\n\n\n
Neste ponto voc\u00ea j\u00e1 tem acesso \u00e0s imagens dos produtos e pode us\u00e1-las ao inv\u00e9s de exibir apenas o nome dos produtos no grid.<\/p>\n\n\n\n
Um exemplo de uso seria:<\/p>\n\n\n\n
<img src=\"<?= $_imageHelper->init($_item->getProduct(), 'small_image', ['type'=>'small_image'])->keepAspectRatio(true)->resize('65','65')->getUrl();?>\" alt=\"<?= __('Product Image');?>\"><\/pre>\n\n\n\n
Neste exemplo, estamos adicionando a imagem do tipo ‘small_image’ e redimensionando ela para ter 65×65 pixels.<\/p>\n\n\n\n
Resultado<\/h2>\n\n\n\n
Sem me esfor\u00e7ar muito na formata\u00e7\u00e3o, o resultado final foi este:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Quer mais que isso? Vem fazer meus cursos Magento<\/a> e junte-se \u00e0 uma comunidade de Magenteiros loucos por fazer coisas bacanas nesta plataforma.<\/p>\n\n\n\n
Aproveite pra assinar nosso boletim e fique por dentro dos bastidores disso tudo.<\/p>\n\n\n\n