Основы тематики Magento 2

1. Основы Magento 2 Тематика Тема в Magento 2 определяет внешний вид магазина, то есть то, что клиенты...
2. Домашняя страница CMS Blocks
3. Загадочный случай с кешем
4. У меня есть тема, что я могу с ней сделать?
5. Во-первых, мы стиль
6. Во-вторых, мы расширяем
7. Переопределение шаблонов
8. Заключительные мысли

Основы Magento 2 Тематика

Тема в Magento 2 определяет внешний вид магазина, то есть то, что клиенты сайта видят при посещении. Это область разработки внешнего интерфейса и отправная точка почти для каждого учебного пособия, в котором описывается разработка внешнего интерфейса в Magento 2. К счастью, задача создания темы очень проста. В этом руководстве будут рассмотрены основные концепции темы и изменения, которые произошли с последним обновлением (Magento 2.2).

Magento 2 поставляется с двумя встроенными темами: Blank и Luma. Нет необходимости использовать эти темы, вы можете начать свою тему с нуля без каких-либо унаследованных шаблонов, стилей или макетов. Но встроенные темы обеспечивают основу для построения, охватывающую весь объем сайта электронной коммерции. Использование любой из этих тем предоставит вам полный опыт электронной коммерции для ваших клиентов без необходимости изменения одной строки кода. Напротив, настройка темы с нуля дает вам возможность определить полный набор технологий, который вы хотите использовать, но не имеет полного охвата сайта. Это требует от вас понимания ширины сайта, который вы создаете, и проверки правильности всех функций.

У каждого подхода есть свои преимущества. Одно из разочарований в разработке frond-end в Magento 2 - сложность структуры тем, встроенной в систему. Обладая отличными функциями и продуманным дизайном, они не интуитивно понятны. Это может расстроить разработчиков, которые научились более традиционным способам разработки веб-сайтов или тем, кто посвятил себя передовым технологиям веб-разработки (Javascript - я смотрю на вас).

Технологический стек для встроенных тем не редкость: Less, jQuery, Knockout JS, шаблоны HTML, шаблоны PHTML и файлы макетов XML. Трудной частью является реализация этого стека. Хотя эта сложность может быть сложной, при выборе темы с нуля или нет преимущества тем Magento 2 намного перевешивают недостатки.

В этом уроке я расскажу об основной реализации темы в Magento 2, а в будущих уроках мы продолжим развивать и охватывать некоторые другие методы, используемые для создания отличных сайтов электронной коммерции в этой сложной системе.

Создание детской темы

Мы будем создавать дочернюю тему на основе встроенной пустой темы. Прежде чем мы начнем, я собираюсь предположить, что у вас установлена ​​Magento 2.2, работающая в среде разработки (если нет, см. Эту страницу для немного больше информации об этом процессе ) и эта установка выполняется в режиме разработчика ( смотрите здесь для получения дополнительной информации об этих различных режимах ). Нет необходимости устанавливать образцы данных, но я считаю это полезным, узнать больше об этом здесь ,

Одним из улучшений Magento 2 по сравнению с Magento 1 является организация кода. Если вы выходите из Magento 1, вы знаете, что файлы тем расположены в двух разных каталогах (иногда в трех, если вы используете корневой каталог JS). Это создало биполярную систему, которая сделала отслеживание файлов извилистыми даже в лучшие времена. С Magento 2 все файлы тем находятся в одном каталоге. Этот каталог находится в каталоге app / design.

Когда вы впервые устанавливаете Magento 2.2, в этом каталоге не будет ничего, кроме пустого каталога Magento. Чтобы создать тему, нам нужно создать каталог, который определит наше пространство имен.

Пространство имен в Magento 2 - это способ создания файлов, которые не будут конфликтовать друг с другом. Поскольку приложение Magento будет сканировать эти файлы и принимать решения о переопределении на основе их местоположения и именования, важно, чтобы не возникало никаких конфликтов.

Ваше пространство имен может быть чем угодно, но попробуйте использовать что-то особенное, для этого проекта мы будем использовать CustomerParadigm, который будет помещен в каталог внешнего интерфейса (здесь также есть каталог adminhtml, мы не будем рассматривать его использовать в этом уроке). После создания этого каталога нам нужен каталог тем. Это можно назвать как угодно, для этого урока мы будем использовать тему.

Нашим следующим шагом будет регистрация нашей темы, чтобы Magento знал, что она там есть. В нашей недавно созданной директории темы создайте файл registration.php и theme.xml со следующим кодом:

// file: app / design / frontend / CustomerParadigm / theme / registration.php <? php \ Magento \ Framework \ Component \ ComponentRegistrar :: register (\ Magento \ Framework \ Component \ ComponentRegistrar :: THEME, 'внешний интерфейс / CustomerParadigm / theme ', __DIR__);

Файл registration.php устанавливает путь и пространство имен для нашей темы, буквально «регистрируя» ее в приложении. Этот файл останется прежним, только пространство имен и название темы будут меняться между темами.

// file: app / design / frontend / CustomerParadigm / theme / theme.xml <theme xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi: noNamespaceSchemaLocation = "urn: magento: framework : Config / etc / theme.xsd "> <title> Тема клиентской парадигмы </ title> <parent> Magento / blank </ parent> </ theme>

Theme.xml устанавливает название темы в админке и определяет родительскую тему. Если бы вы строили это с нуля, вы бы пропустили узел <parent>. В этом файле можно настроить другие настройки, связанные с темой, но для краткости мы не будем рассматривать их в этом руководстве. В этом уроке мы будем основывать нашу тему на пустой теме Magento. Если вы хотите наследовать от темы Luma, вы должны установить это значение в <parent> Magento / luma </ parent>.

Есть много различий между Luma и Blank, но для этого урока это не будет иметь большого значения для нас. Я использую здесь «Пробел», чтобы проиллюстрировать некоторые другие темы в оставшейся части урока. Для меня, я заметил, что тема Luma приносит с собой полировку и лучший взгляд на сайт. Но когда вы пытаетесь подобрать дизайн или радикально изменить внешний вид сайта Magento, вам помешает полировка темы Luma. Если изменения, которые вы хотите внести, менее навязчивы, тема Luma может сделать для вас очень тяжелую работу.

Имея эти файлы, мы можем войти в систему нашего администратора и настроить наш сайт для использования нашей темы. Перейдите к Содержанию -> Дизайн -> Конфигурация.

Вы можете испытать желание щелкнуть по пунктам меню Темы. Этот раздел предоставит вам информацию об установленных темах на сайте, но для настройки и редактирования темы вся эта работа выполняется в разделе Конфигурация. Внутри вы увидите 3 прицела. Если у вас установлена ​​новая версия Magento 2, вы должны увидеть, что под заголовком названия темы нет темы.

По умолчанию, когда вы устанавливаете Magento 2 с примерами данных, он покажет нам представление магазина по умолчанию с использованием темы Luma. Но ни одна тема не будет определена в админке, пока мы не определим значение явно. Каждый из 3 разделов здесь определяет объем магазина. Нажав на кнопку редактирования в верхнем разделе, мы можем установить нашу новую тему для всех просмотров магазина.

Вы заметите, что выпадающее меню имеет все темы, зарегистрированные на сайте. Изменив этот выпадающий список на нашу тему и нажав «Сохранить», мы настроим Magento на использование нашей темы. Если вы не установили образец даты, процесс точно такой же, но все поля будут для вас пустыми.

Если вы сейчас посетите внешний интерфейс своего сайта и обновите страницу, вы увидите, что новая тема применяется. Логотип будет изменен, некоторые цвета будут отличаться, и самое главное, весь контент главной страницы темы Luma исчезнет. Поздравляем, вы установили собственную дочернюю тему в Magento 2.2.

Домашняя страница CMS Blocks

У нас есть настроенная тема, и мы можем видеть это на главной странице сайта, но куда делся контент Luma? Если вы посмотрите, как там размещаются блоки CMS на домашней странице, вы обнаружите, что они устанавливаются системой виджетов (Контент> Виджеты). Все виджеты ограничены темой, и при смене темы у нас больше нет доступа к этим блокам.

Если бы мы хотели вернуть эти блоки на нашу домашнюю страницу (или страницы категорий в этом отношении), нам пришлось бы создавать новые виджеты, относящиеся к нашей теме, но мы можем многократно использовать одни и те же блоки снова и снова. Это дает нам свободу повторного использования контента, но позволяет переключать темы и получать только тот контент, который мы решили показать. Эта система установлена ​​таким образом, что владелец магазина может иметь несколько тем на одном сайте, которые можно переключать в течение года без необходимости редактировать или изменять скомпилированные файлы или код. Содержимое блока CMS необходимо определять только один раз, а затем для каждой темы вы создаете новые виджеты, которые вызывают блоки CMS и устанавливают их размещение на сайте.

Загадочный случай с кешем

Одна вещь, которую мы еще не сделали после настройки нашей темы, это очистить кеш. Кэширование может быть сложным в Magento 2. По умолчанию при установке Magento 2 встроенный кэш включен. Это может нанести ущерб разработке, если вы не понимаете, как кеш используется Magento 2 или когда его отключать или очищать.

При установке по умолчанию, когда вы устанавливаете тему, вам не нужно очищать кеш. Просто обновление страницы делает свое дело. Но во многих случаях вам придется очищать кеш, и предстоящие изменения потребуют этого. Есть три способа сделать это.

Первый находится в админке под System -> Cache Management. Нажав кнопку «очистить кеш Magento», вы удалите кеш. Второй способ удалить кеш - использовать встроенный интерфейс командной строки, перейдя в корневой каталог установки Magento 2 в командной строке и выполнив эту команду php bin / magento cache: clean. Третий способ - удалить сам каталог кеша в каталоге var. Каждый метод в основном выполняет одно и то же, так что это личное предпочтение того, как вы его выполняете. Я предпочитаю очищать кэш из встроенного интерфейса командной строки, так как я весь день в командной строке, и это всего лишь одна простая команда, не дожидающаяся загрузки страницы или возможности удаления неправильного каталога в файловой системе.

Вы можете быть удивлены, почему мы не отключаем кэш напрямую. Я сделал это, когда впервые начал работать с Magento 2, но после лучшего понимания того, когда и зачем очищать кеш, можно сэкономить время, если оставить кеш включенным. Время загрузки страницы без кэша может быть мучительно медленным. Но, как хорошая проверка работоспособности, если вы вносите изменения, и они не отображаются должным образом, отключение кэша может помочь исключить переменную в системе.

У меня есть тема, что я могу с ней сделать?

Настройка темы - это только начало. Давайте кратко рассмотрим несколько вещей, которые вы можете сделать с ним.

Во-первых, мы стиль

Встроенная система стилей является сложным предметом (см. Шаблон, встречающийся со всей сложностью?), В этом уроке я расскажу об основах, которые помогут вам начать работу (мы расскажем об этой системе полностью в следующей статье) , Использование встроенных тем МЕНЬШЕ в качестве своего CSS-препроцессора. Файлы LESS, которые мы будем писать, будут скомпилированы Magento и доставлены в браузер из каталога pub / static / frontend.

Для начала давайте создадим структуру каталогов и файл.

// file: app / design / frontend / CustomerParadigm / theme / web / css / source / _extend.less body {background-color: tomato; }

После этого мы создали файл, который будет «автоматически» поднят Magento и скомпилирован в CSS со всеми остальными CSS, которые есть в нашей теме и от которой мы унаследовали. Код компилируется в файл pub / static / frontend / CustomerParadigm / theme / en_US / css / styles-m.css. Причина, по которой система получает файл _extend.less, на самом деле немного сложна. Есть определенные файлы, по которым Magento будет сканировать тему, и, если они найдены, Magento будет что-то делать с ними. В случае _extend.less он возьмет код из этого файла и скомпилирует его внизу собранного файла CSS, который отображается. Глядя на файл Less, который делает этот вызов vendor / magento / theme-frontend-blank / web / css / styles-m.less, вы увидите этот код внизу для файла:

// файл: vendor / magento / theme-frontend-blank / web / css / styles-m.less // // Расширение для незначительной настройки // ----------------- ---------------------------- // @ magento_import 'source / _extend.less';

Вы заметите, что @magento_import - это не директива Less, а собственное объявление Magento, которое будет искать тему, унаследованную от Blank, и сгенерирует стандартный Less @import с правильным путем. Это позволяет Magento сохранять гибкость в отношении имен каталогов тем и находить необходимые файлы LESS, не зная заранее, каким может быть любое название темы. В этом файле происходят другие вещи, но в следующей статье мы рассмотрим его использование более всесторонне.

Возвращаясь к действию, мы создали файл LESS и сохранили его, но если бы вы очистили кэш и обновили страницу, вы были бы крайне разочарованы отсутствием ярко-красного на вашем сайте. Magento 2 при загрузке страницы проверит, что он ожидает увидеть в каталоге pub, и, если файла там нет, Magento 2 создаст его снова на основе всех своих исходных файлов. Видя, что файл styles-m.css есть, он ничего не сделает. Мы должны удалить это. В CLI нет быстрой команды для этого, поэтому мы можем удалить ее из файловой системы с помощью этой команды в корне нашей установки Magento 2:

rm -rf pub / static / внешний интерфейс / CustomerParadigm / theme / en_US / css / styles-m.css

Но подождите, мы пока не можем перезагрузить страницу. Вы могли заметить, что я сказал «исходные» файлы. Это означает, что наши файлы темы, но есть кэшированные версии наших интерфейсных файлов в каталоге var в каталоге view_preprocessed.

Когда Magento видит, что в каталоге pub нет styles-m.css, сначала он смотрит в каталог var / view_preprocessed, чтобы узнать, есть ли кэшированная версия наших стилей. Если он найдет один, он будет использовать эти файлы для компиляции, а не тот, что в нашей теме. Поэтому мы должны удалить этот каталог тоже:

rm -rf var / view_preprocessed /

Для хорошей меры мы также должны удалить кеш. Теперь обновите страницу, и вы увидите славу помидора. Этот файл теперь может содержать любые стили, которые вы хотите разместить здесь для настройки сайта.

Во-вторых, мы расширяем

XML живет в сердцах всех в основной команде Magento. Если бы мне пришлось угадывать, я думаю, что все они мечтают о XML, который широко используется в Magento 2. Для нас система XML является полезным инструментом для создания создаваемой страницы. Большая часть страницы Magento 2 состоит из небольших файлов, которые размещаются на странице с использованием директив XML. Если мы понимаем эту систему, мы можем перемещать, удалять, переопределять и редактировать практически любой элемент на странице, используя только XML. Позвольте мне показать вам пример.

Допустим, вы получили дизайн для сборки сайта, и клиент хотел бы, чтобы панель поиска была выведена из заголовка и перемещена в основную часть сайта. Есть много способов сделать это, но самым простым будет использование системы XML для ее «перемещения». Создайте файл XML в каталоге Magento_Theme.

// file: app / design / frontend / CustomerParadigm / theme / Magento_Theme / layout / default.xml? xml version = "1.0"?> <layout = "1column" xmlns: xsi = "http: //www.w3. org / 2001 / XMLSchema-instance "xsi: noNamespaceSchemaLocation =" urn: magento: framework: View / Layout / etc / page_configuration.xsd "> <body> <move element =" top.search "destination =" content "before =" - "/> </ body> </ page>

С этим кодом очистите кеш и обновите страницу. Вы заметите, что строка поиска теперь находится в теле страницы (для этого примера мы на главной странице нашего сайта Magento, но концепция будет работать на любой странице). Хотя это может показаться немного обескураживающим, обратите внимание, что с помощью всего одной строки кода мы переместили всю функцию нашего сайта в новое место, не изменяя что-либо еще об этом сайте. Этот вид упрощенной настройки значительно упрощает создание индивидуального дизайна, чем в предыдущих версиях Magento и других решениях для электронной коммерции. Давайте возьмем другой пример. В этом же файле добавьте в этот обновленный код:

// file: app / design / frontend / CustomerParadigm / theme / Magento_Theme / layout / default.xml <? xml version = "1.0"?> <layout = "1column" xmlns: xsi = "http: //www.w3 .org / 2001 / XMLSchema-instance "xsi: noNamespaceSchemaLocation =" urn: magento: framework: View / Layout / etc / page_configuration.xsd "> <body> <move element =" top.search "destination =" content "before = "-" /> <referenceBlock name = "logo" remove = "true" /> </ body> </ page>

Здесь мы сослались на «блок» и удалили его со страницы. Очистка кеша и его обновление покажет, что логотип исчез. Опять же, не обязательно практично, но вы можете увидеть, насколько эффективно это удалить элементы со страницы без использования какой-либо другой системы, кроме встроенного XML.

Следующий вопрос, который вы можете задать, - как найти имя элемента, который вы хотите отредактировать. В этой системе имена - это все, и, к сожалению, нет единственного хорошего решения для поиска имени элемента. Элементы определяются и редактируются в разных файлах по всей системе Magento.

Есть несколько инструментов, которые могут помочь. Коммерческая ошибка это инструмент, который разбивает страницу любого сайта Magento на его элементы. Это не бесплатно, но оно того стоит, если вы разрабатываете на этой платформе.

Другое решение Панель отладки Mage Specialist , Он интегрирован с инструментами Chrome Dev и настроен с помощью композитора. Оба помогут отследить имена всех блоков на странице, а также множество других полезных сведений о сайте.

Переопределение шаблонов

После упорядочивания страницы с помощью XML, мы можем взглянуть на следующий уровень глубже в системе шаблонов в Magento 2. Это файлы PHTML, которые содержат смесь PHP и HTML, которые отображаются на странице для просмотра пользователями сайта. , В Magento 1 эти файлы могли стать растянутыми файлами, заполненными сотнями строк кода. Поскольку большая часть страницы в Magento 2 построена по модульному принципу XML, основная команда также работала над тем, чтобы упростить свои шаблоны до всего содержимого. Лучший способ отследить, какой шаблон использует встроенные подсказки шаблона. В админке перейдите в Магазины -> Конфигурации -> Дополнительно -> Разработчик -> Отладка

Отсюда установите для «Включенные подсказки пути шаблона для Витрины» значение «Да». Обновление страницы в интерфейсе сайта покажет вам каждый шаблон, загруженный на страницу, ярко-красным цветом с указанием пути и имени файла шаблона. Просматривая страницу, вы заметите, что во всем фреймворке вызываются все виды элементов.

Глядя на файл, который генерирует приветственное сообщение (vendor / magento / module-theme / view / frontend / templates / html / header.phtml), вы заметите, что в этом файле очень мало кода.

// файл: vendor / magento / module-theme / view / frontend / templates / html / header.phtml <? php / ** * Авторские права © Magento, Inc. Все права защищены. * См. COPYING.txt для деталей лицензии. * / // @codingStandardsIgnoreFile / ** * @var \ Magento \ Theme \ Block \ Html \ Header $ block * / $ welcomeMessage = $ block-> getWelcome (); ?&gt; <? php switch ($ block-> getShowPart ()): case 'welcome':?> <li class = "greet welcome" data-bind = "scope: 'customer'"> <! - ko if: customer (). fullname -> <span data-bind = "text: new String ('<? = $ block-> escapeHtml (__ (' Welcome,% 1! ','% 1 '))?>') .replace ('% 1', customer (). firstname) "> </ span> <! - / ko -> <! - ko ifnot: customer (). полное имя -> <span data-bind = 'html: "<? = $ block-> escapeHtmlAttr ($ welcomeMessage)?>"'> </ span&gt; <? = $ block-> getBlockHtml ('header.additional')?> <! - / ko - > </ li> <script type = "text / x-magento-init"> {"*": {"Magento_Ui / js / core / app": {"components": {"customer": {"component": "Magento_Customer / js / view / customer"}}}}} </ script&gt; <? Php break; ?&gt; <? php case 'other':?&gt; <? = $ block-> getChildHtml ()?&gt; <? php break; ?&gt; <? php endwitch; ?>

В этом уроке невозможно охватить все, что происходит в файле. В нем есть смесь PHP, HTML, Knockout JS и пользовательской системы Magento JS, чтобы завершить ее. Но я хотел бы, чтобы вы ушли от этого: насколько упорядочен этот файл по сравнению с тем, что существовал в Magento 1. В Magento 1 файл header.php содержал более ста строк плотного кода. В этом файле были связаны многие функциональные возможности, некоторые из которых могли легко конфликтовать друг с другом, если были сделаны неосторожные изменения. Модульная конструкция системы шаблонов в Magento 2 является другой стороной медали к системе XML, на которую мы уже смотрели. Имея меньшие, более точные шаблоны, перемещение этих элементов по странице становится возможностью, которая не создает конфликтов или избыточного кода.

Но иногда простого перемещения элемента недостаточно. Нам часто нужно изменить содержимое шаблона, и это очень просто в Magento 2. Если вы хотите переопределить этот файл, чтобы поместить в него настройки, это так же просто, как скопировать его в нашу тему в этом месте:

приложение / дизайн / интерфейс / CustomerParadigm / тема / Magento_Theme / шаблоны / html / header.phtml

Теперь вы можете редактировать этот файл в соответствии с вашим сердцем. Однако следует отметить, что система переопределения Magento работает так, что победитель использует все подходы ко всему, что вы делаете. Если на вашем сайте есть расширение, которое пытается настроить существующий шаблон, оно «проиграет» теме. Тема имеет наивысший приоритет в системе. Таким образом, это означает, что если есть обновление для Magento или расширение, которое изменяет файл шаблона, это изменение не будет отображаться и может нарушить какую-то функциональность. На данный момент Magento 2.2 в основном стабилен, и мы можем ожидать, что мало что изменится по мере обновления фреймворка. Но поймите, что ловкость рук при настройке окупится.

Заключительные мысли

Мы рассмотрели здесь много вопросов, но, по правде говоря, мы лишь коснулись того, что вы можете сделать с разработкой тем в Magento 2. В ближайшие недели я расскажу о других темах, чтобы дать вам более глубокое понимание всех технологии, которые находятся в рамках Magento 2. А пока поэкспериментируйте с системой и посмотрите, какие изменения внесут нужный вам дизайн.

Похожие

Комментарии