Редактирование шаблона opencart 3

Одной из наиболее важных и больших нововведений в OpenCart 3.0 является новый редактор тем. Настроить тему по умолчанию, наконец, можно прямо из раздела «Дизайн» панели администратора.

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

Обзор редактора тем Opencart 3.0

Чтобы найти редактор тем, откройте раздел администратора OpenCart и перейдите к Design > Theme Editor.

Прежде всего, важно отметить, что редактор тем OpenCart 3.0 использует Twig в качестве движка шаблонов для PHP.

Это означает, что редактор тем дает вам контроль над элементами HTML в ваших шаблонах. Это не включает в себя модификацию стилей и CSS.

Вы можете узнать о Twig в документации здесь.

Теперь в этом разделе вы заметите три основных поля:

Choose your store

Вы можете выбрать магазин, который хотите настроить, если вы запускаете несколько магазинов из одной установки OpenCart.

Choose a template

Выберите файл шаблона, который вы хотите настроить. Например, если вы хотите отредактировать домашнюю страницу, выберите common, а затем home.twig.

Theme History

Как следует из названия, именно здесь все внесенные вами изменения регистрируются, чтобы вы могли легко получить к ним доступ и вернуться или продолжить вносить изменения в шаблон OpenCart.

Как отредактировать шаблон

Допустим, мы хотим изменить один из шаблонов на нашем сайте OpenCart. Мы оставим магазин по умолчанию и выберем шаблон товара.

Product Template

Шаблон товара содержит файлы .twig, которые вы можете увидеть на скриншоте ниже

Мы выберем файл product.twig файл, чтобы мы могли редактировать страницу товара в нашем магазине OpenCart.

Theme Editor Twig

Модификация, которую мы будем реализовывать, проста. Мы изменим цвет ссылки хлебных крошек в навигации.

Вот пример кода, который мы будем использовать:

<li><a href="{{ breadcrumb.href }}" {{ loop.last ? 'style="color: red;"' }}>{{ breadcrumb.text }}</a></li>

Вставьте пример вместо 5 строки:

html

Теперь нажмите кнопку «Сохранить» и перейдите в магазин, чтобы просмотреть изменения.

Войдите на любую страницу продукта, и вы заметите, что ссылка на хлебную крошку теперь окрашена в красный цвет:

OpenCart 3.0 Default Theme

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

Итог

Это был краткий обзор нового редактора тем в OpenCart 3.0, но вы можете получить представление о том, как легко теперь поиграть с дизайном вашего магазина.

Вам больше не нужно обращаться к файлам и шаблонам вашего магазина через FTP и использовать различные языковые редакторы для реализации изменений. Все выполняется прямо с вашей приборной панели.

Нам очень интересно узнать, что вы думаете о новой функции в OpenCart, поэтому, пожалуйста, поделитесь своим мнением и опытом в комментариях ниже!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *