Эта статья изначально была опубликована в моем личном блоге.
Понимание тем Magento 2 может быть трудным. Структура файлов, особенно файлов less, может сбивать с толку. Одна из сложных вещей для понимания — это стиль ваших электронных писем.
В этом уроке мы расскажем, как легко стилизовать электронные письма в Magento 2.
Предварительные требования: создать тему
Если у вас еще нет созданной темы, мы быстро рассмотрим шаги. Если у вас есть тема, вы можете пропустить это. Имейте в виду, что на самом деле мы не собираемся объяснять здесь все о создании темы, так как это может быть долго.
Сначала создайте каталоги app/design/VENDER/THEME_NAME, где VENDOR обычно заменяется названием компании или владельца, а THEME_NAME — названием темы.
Далее внутри THEME_NAME создайте theme.xml со следующим содержимым:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>THEME_NAME</title>
<parent>Magento/blank</parent>
</theme>Замените THEME_NAME названием вашей темы.
Создайте registration.php со следующим содержимым:
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/VENDOR/THEME_NAME', __DIR__);Замените VENDOR и THEME_NAME на свои.
Создайте composer.json со следующим содержимым:
{
"name": "VENDOR/THEME_NAME",
"description": "N/A",
"type": "magento2-theme",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"config": {
"sort-packages": true
},
"version": "100.4.2",
"require": {
"php": "~7.3.0||~7.4.0",
"magento/framework": "103.0.*"
},
"autoload": {
"files": [
"registration.php"
]
}
}Замените VENDOR и THEME_NAME на свои.
Создайте etc/view.xml со следующим содержимым:
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
<media>
<images module="Magento_Catalog">
<image id="bundled_product_customization_page" type="thumbnail">
<width>140</width>
<height>140</height>
</image>
<image id="cart_cross_sell_products" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="cart_page_product_thumbnail" type="small_image">
<width>110</width>
<height>160</height>
</image>
<image id="category_page_grid" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="category_page_list" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="customer_account_my_tags_tag_view" type="small_image">
<width>100</width>
<height>100</height>
</image>
<image id="customer_account_product_review_page" type="image">
<width>285</width>
<height>285</height>
</image>
<image id="customer_shared_wishlist" type="small_image">
<width>113</width>
<height>113</height>
</image>
<image id="gift_messages_checkout_small_image" type="small_image">
<width>75</width>
<height>75</height>
</image>
<image id="gift_messages_checkout_thumbnail" type="thumbnail">
<width>100</width>
<height>100</height>
</image>
<image id="mini_cart_product_thumbnail" type="thumbnail">
<width>156</width>
<height>156</height>
</image>
<image id="new_products_content_widget_grid" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="new_products_content_widget_list" type="small_image">
<width>270</width>
<height>270</height>
</image>
<image id="new_products_images_only_widget" type="small_image">
<width>78</width>
<height>78</height>
</image>
<image id="product_base_image" type="image">
<width>265</width>
<height>265</height>
</image>
<image id="product_comparison_list" type="small_image">
<width>140</width>
<height>140</height>
</image>
<image id="product_page_image_large" type="image"/>
<image id="product_page_image_medium" type="image">
<width>700</width>
<height>700</height>
</image>
<image id="product_page_image_small" type="thumbnail">
<width>90</width>
<height>90</height>
</image>
<image id="product_swatch_image_large" type="image"/>
<image id="product_swatch_image_medium" type="image">
<width>240</width>
<height>300</height>
</image>
<image id="product_swatch_image_small" type="thumbnail">
<width>88</width>
<height>110</height>
</image>
<image id="product_page_main_image" type="image">
<width>700</width>
<height>700</height>
</image>
<image id="product_page_main_image_default" type="image">
<width>700</width>
<height>700</height>
</image>
<image id="product_page_more_views" type="thumbnail">
<width>90</width>
<height>90</height>
</image>
<image id="product_stock_alert_email_product_image" type="small_image">
<width>76</width>
<height>76</height>
</image>
<image id="product_small_image" type="small_image">
<width>135</width>
<height>135</height>
</image>
<image id="product_thumbnail_image" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="recently_compared_products_grid_content_widget" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="recently_compared_products_images_names_widget" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="recently_compared_products_images_only_widget" type="thumbnail">
<width>76</width>
<height>76</height>
</image>
<image id="recently_compared_products_list_content_widget" type="small_image">
<width>270</width>
<height>207</height>
</image>
<image id="recently_viewed_products_grid_content_widget" type="small_image">
<width>240</width>
<height>300</height>
</image>
<image id="recently_viewed_products_images_names_widget" type="small_image">
<width>75</width>
<height>90</height>
</image>
<image id="recently_viewed_products_images_only_widget" type="small_image">
<width>76</width>
<height>76</height>
</image>
<image id="recently_viewed_products_list_content_widget" type="small_image">
<width>270</width>
<height>270</height>
</image>
<image id="related_products_list" type="small_image">
<width>140</width>
<height>140</height>
</image>
<image id="review_page_product_image" type="small_image">
<width>285</width>
<height>285</height>
</image>
<image id="rss_thumbnail" type="thumbnail">
<width>75</width>
<height>75</height>
</image>
<image id="sendfriend_small_image" type="small_image">
<width>75</width>
<height>75</height>
</image>
<image id="shared_wishlist_email" type="small_image">
<width>135</width>
<height>135</height>
</image>
<image id="side_column_widget_product_thumbnail" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="upsell_products_list" type="small_image">
<width>140</width>
<height>140</height>
</image>
<image id="wishlist_sidebar_block" type="thumbnail">
<width>75</width>
<height>90</height>
</image>
<image id="wishlist_small_image" type="small_image">
<width>113</width>
<height>113</height>
</image>
<image id="wishlist_thumbnail" type="small_image">
<width>240</width>
<height>300</height>
</image>
</images>
</media>
<vars module="Magento_Catalog">
<!-- Gallery and magnifier theme settings. Start -->
<var name="gallery">
<var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
<var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
<var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
<var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
<var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
<var name="allowfullscreen">true</var> <!-- Turn on/off fullscreen (true/false) -->
<var name="navdir">horizontal</var> <!-- Sliding direction of thumbnails (horizontal/vertical) -->
<var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides arrows(true/false) -->
<var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
<var name="transition">
<var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
<var name="duration">500</var> <!-- Sets transition duration in ms -->
</var>
<var name="fullscreen">
<var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
<var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
<var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview in fullscreen (true/false/null) -->
<var name="caption">false</var> <!-- Display alt text as image title in fullscreen(true/false) -->
<var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in fullscreen(horizontal/vertical) -->
<var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
<var name="transition">
<var name="effect">dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
<var name="duration">500</var> <!-- Sets transition duration in ms -->
</var>
</var>
</var>
<var name="magnifier">
<var name="fullscreenzoom">20</var> <!-- Zoom for fullscreen (integer)-->
<var name="top"></var> <!-- Top position of magnifier -->
<var name="left"></var> <!-- Left position of magnifier -->
<var name="width"></var> <!-- Width of magnifier block -->
<var name="height"></var> <!-- Height of magnifier block -->
<var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
<var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
</var>
<var name="breakpoints">
<var name="mobile">
<var name="conditions">
<var name="max-width">767px</var>
</var>
<var name="options">
<var name="options">
<var name="nav">dots</var>
</var>
</var>
</var>
</var>
<!-- end. Gallery and magnifier theme settings -->
<var name="product_small_image_sidebar_size">100</var> <!-- Override for small product image -->
<var name="product_base_image_size">275</var> <!-- Override for base product image -->
<var name="product_base_image_icon_size">48</var> <!-- Base product image icon size -->
<var name="product_list_image_size">166</var> <!-- New Product image size used in product list -->
<var name="product_zoom_image_size">370</var> <!-- New Product image size used for zooming -->
<var name="product_image_white_borders">1</var>
</vars>
<vars module="Magento_Bundle">
<var name="product_summary_image_size">58</var> <!-- New Product image size used for summary block-->
</vars>
<vars module="Js_Bundle">
<var name="bundle_size">1MB</var>
</vars>
<exclude>
<item type="file">Lib::chartjs/Chart.min.js</item>
<item type="file">Lib::jquery/jquery.min.js</item>
<item type="file">Lib::jquery/jquery-ui-1.9.2.js</item>
<item type="file">Lib::jquery/jquery.details.js</item>
<item type="file">Lib::jquery/jquery.hoverIntent.js</item>
<item type="file">Lib::jquery/colorpicker/js/colorpicker.js</item>
<item type="file">Lib::requirejs/require.js</item>
<item type="file">Lib::requirejs/text.js</item>
<item type="file">Lib::legacy-build.min.js</item>
<item type="file">Lib::mage/captcha.js</item>
<item type="file">Lib::mage/dropdown_old.js</item>
<item type="file">Lib::mage/list.js</item>
<item type="file">Lib::mage/loader_old.js</item>
<item type="file">Lib::mage/webapi.js</item>
<item type="file">Lib::mage/zoom.js</item>
<item type="file">Lib::mage/translate-inline-vde.js</item>
<item type="file">Lib::mage/requirejs/mixins.js</item>
<item type="file">Lib::mage/requirejs/static.js</item>
<item type="file">Magento_Customer::js/zxcvbn.js</item>
<item type="file">Magento_Catalog::js/zoom.js</item>
<item type="file">Magento_Ui::js/lib/step-wizard.js</item>
<item type="file">Magento_Ui::js/form/element/ui-select.js</item>
<item type="file">Magento_Ui::js/form/element/file-uploader.js</item>
<item type="file">Magento_Ui::js/form/components/insert.js</item>
<item type="file">Magento_Ui::js/form/components/insert-listing.js</item>
<item type="directory">Magento_Ui::js/timeline</item>
<item type="directory">Magento_Ui::js/grid</item>
<item type="directory">Magento_Ui::js/dynamic-rows</item>
<item type="directory">Magento_Ui::templates/timeline</item>
<item type="directory">Magento_Ui::templates/grid</item>
<item type="directory">Magento_Ui::templates/dynamic-rows</item>
<item type="directory">Magento_Swagger::swagger-ui</item>
<item type="directory">Magento_Tinymce3::tiny_mce</item>
<item type="directory">Lib::modernizr</item>
<item type="directory">Lib::tiny_mce</item>
<item type="directory">Lib::varien</item>
<item type="directory">Lib::jquery/editableMultiselect</item>
<item type="directory">Lib::jquery/jstree</item>
<item type="directory">Lib::jquery/fileUploader</item>
<item type="directory">Lib::css</item>
<item type="directory">Lib::lib</item>
<item type="directory">Lib::extjs</item>
<item type="directory">Lib::prototype</item>
<item type="directory">Lib::scriptaculous</item>
<item type="directory">Lib::less</item>
<item type="directory">Lib::mage/adminhtml</item>
<item type="directory">Lib::mage/backend</item>
</exclude>
</view>Это все, что вам нужно для создания темы. Теперь перейдите к своему администратору Magento и войдите в систему. Затем перейдите в «Содержимое» -> «Конфигурация». Нажмите «Изменить», чтобы открыть представление магазина по умолчанию. Теперь выберите свою тему из раскрывающегося списка «Примененная тема» и нажмите «Сохранить конфигурацию».
Понимание базовых файлов стилей электронной почты
Обычно все пользовательские темы (например, та, которую мы только что создали) расширяют базовую тему Magento blank. Таким образом, стиль в этой теме будет применен.
Код для blank находится внутри vendor/magento/theme-frontend-blank. Все стили темы находятся в web/css.
Внутри стилей темы blank мы сосредоточимся на 3 файлах:
web/css/source/_email-base.less: файл, содержащий стили электронной почты.web/css/source/_email-extend.less: Этот файл позволяет дочерним темам расширять стили по умолчанию в_email-base.lessи вносить необходимые изменения.web/css/source/_email-variables.less: Этот файл позволяет дочерним темам изменять переменные, используемые в_email-base.less.
Самый важный здесь — email-variables.less. Мы можем легко изменить стили писем, просто изменив значения некоторых переменных. Вы можете найти эти переменные, используемые в _email-base.less, например:
@font-family__base: Используемое семейство шрифтов.@email__background-color: весь фоновый цвет письма.@email-content__background-color: цвет фона для основного содержимого электронного письма. Это полезно, если вы хотите, чтобы содержимое электронного письма не занимало всю ширину документа.@email-body__width: укажите ширину содержимого письма.
Есть много других переменных, которые вы можете использовать для изменения электронных писем. Я предлагаю вам взглянуть на web/css/source/_email-base.less, чтобы увидеть все переменные, которые можно использовать.
По умолчанию электронные письма будут иметь чистый фоновый цвет, а ширина содержимого будет равна 600px. Это должно выглядеть примерно так:
Допустим, мы хотим сделать цвет фона тела #8ba9b7, а ширину контента сделать 70%.
Для этого создайте файл app/design/frontend/VENDOR_NAME/THEME_NAME/web/css/source/_email-variables.less со следующим содержимым:
@email__background-color: #8ba9b7;
@email-body__width: 70%;Это все, что нам нужно сделать, чтобы настроить стиль электронной почты! Выполните следующую команду:
bin/magento setup:static-content:deploy -fили, если вы используете Grunt, выполните следующее:
grunt refreshРекомендуется прочитать: Как ускорить разработку внешнего интерфейса в Magento 2 с помощью Grunt.
Электронные письма теперь будут выглядеть так:
Следующим шагом мы отцентрируем текст нижнего колонтитула и изменим цвет текста на белый.
Все изменения в дизайне, кроме изменения значений переменных, должны быть помещены внутрь web/css/source/_email-extend.less. Итак, создайте файл app/design/frontend/VENDOR/THEME_NAME/web/css/source/_email-extend.less.
Нижний колонтитул имеет класс footer, поэтому мы будем ссылаться на него через селектор .footer:
.footer {
color: #fff;
text-align: center;
}Чтобы увидеть изменения, скомпилируйте код, как упоминалось ранее.
Теперь электронное письмо будет выглядеть так:
Использование шрифтов в электронных письмах
Использовать шрифты в электронных письмах сложно. Мы рассмотрим, как использовать один из веб-безопасных шрифтов, так как они должны работать на большинстве клиентов. Мы будем использовать Verdana.
Чтобы изменить шрифт, установите переменную @font-family__base в _email-variables.less:
Если мы скомпилируем как обычно и протестируем письмо, мы увидим, что шрифт изменился:
@font-family__base: 'Verdana', sans-serif;
Вы также можете использовать свои собственные шрифты, однако это редко работает в большинстве почтовых клиентов.
Использовать собственные шрифты
Чтобы использовать собственный шрифт, сначала скопируйте шрифт в app/design/frontend/VENDOR/THEME_NAME/web/font/FONT, где FONT — файл шрифта. Например, Opensans.ttf.
Далее, в _email-extend.less, мы используем миксин .lib-font-face, который получает следующие параметры:
@family-name: название семейства шрифтов.@font-path: путь к семейству шрифтов.@font-weight: вес шрифта@font-style: стиль шрифта@font-display: отображать свойство шрифта@font-format: тип расширения шрифта. Это необязательно. Если расширение вашегоFONT—woff, вам не нужно передавать это.@font-type: то же, что и@font-format. При использовании формата шрифта, отличного отwoff, вам необходимо передать оба параметра.
Итак, это пример того, как вы будете использовать миксин:
.lib-font-face(
@family-name: 'MyFont',
@font-path: '@{baseDir}fonts/FONT',
@font-weight: 300,
@font-style: normal,
@font-display: swap,
@font-format: 'ttf',
@font-type: 'ttf'
);Обратите внимание, что для @font-path мы используем переменную baseDir, которая ссылается на app/design/frontend/VENDOR/THEME_NAME/web.
Затем в email-variables.less установите @font-family__base на свой шрифт:
@font-family__base: 'MyFont', sans-serif;Затем скомпилируйте изменения и протестируйте письмо, однако нет никакой гарантии, что оно действительно сработает.
Примечание об использовании шрифтов Google
Если вы хотите использовать Google Fonts, работа которых опять же не гарантируется, вот небольшой совет, как это сделать лучше всего.
Во-первых, выберите шрифт. Например, Одиби Санс. Выберите нужный стиль, затем скопируйте ссылку для импорта.
Откройте эту ссылку в своем браузере, он предоставит вам правила CSS для создания шрифта.
Скопируйте его и вставьте в email-extend.less. Затем измените значение переменной @font-family_base в _email-variables.less на шрифт:
@font-family__base: 'Odibee Sans', sans-serif;После компиляции изменений, как и раньше, вы можете протестировать письмо и посмотреть, работает ли шрифт. Однако, как было сказано ранее, это не поддерживается большинством клиентов и, скорее всего, не будет работать. Лучше всего придерживаться безопасных веб-шрифтов.
Первоначально опубликовано на https://blog.shahednasser.com 27 мая 2021 г.
