Вопросы-ответы

Как найти нужный файл

Seller 2.0 — мультиприложенческая тема. Шаблоны распределены по приложениям Webasyst: Site, Shop, Blog, Photos, Hub, Helpdesk, Mailer.

Где находятся файлы темы

Файлы установленной темы расположены в стандартных директориях Webasyst:

ПриложениеПуть
Site (шапка, подвал, главная, общие элементы и блоки)wa-data/public/site/themes/seller2/
Shop (каталог, товар, корзина, заказ, личный кабинет)wa-data/public/shop/themes/seller2/
Blog (список записей, запись блога, комментарии)wa-data/public/blog/themes/seller2/
Photos (фотогалереи)wa-data/public/photos/themes/seller2/
Hub (сообщество: темы, авторы, комментарии)wa-data/public/hub/themes/seller2/
Helpdesk (центр поддержки: FAQ, заявки)wa-data/public/helpdesk/themes/seller2/
Mailer (страницы подписок на рассылки)wa-data/public/mailer/themes/seller2/

При клонировании темы имя директории будет соответствовать имени клона.

Поиск через консоль браузера

Тема сама подсказывает, какой файл отвечает за вывод конкретного элемента. Все шаблоны подключаются через функцию include_template (файл u-utils.html), которая оборачивает каждый подключённый шаблон HTML-комментариями с указанием приложения и пути:

<!-- app: {приложение}; template: {путь к шаблону} -->
    ...содержимое шаблона...
<!--/ app: {приложение}; template: {путь к шаблону} -->

Например, комментарий <!-- app: shop; template: html/sidebar/categories/categories_01 --> означает, что элемент выводится из файла html/sidebar/categories/categories_01.html темы в приложении Shop. Аналогичный блок категорий на страницах сайта выводится из html/blocks/categories/categories_01.html приложения Site.

Важно: комментарии с путями выводятся только администратору. Чтобы их увидеть, нужно быть авторизованным в Webasyst под пользователем с правами администратора — для остальных посетителей комментарии в код страницы не попадают.

Так выглядит начало реальной страницы магазина в коде — по комментариям сразу видно, из каких файлов собрана шапка:

<!-- app: site; template: html/index/index.fonts -->
<!-- app: site; template: html/index/index.styles -->
<!-- app: site; template: html/media-banners/media.header-above -->
<!-- app: site; template: html/header/desktop/header.layout -->
  <!-- app: site; template: html/header/desktop/header.section -->
    <!-- app: site; template: html/header/desktop/blocks/logo -->
    <!-- app: site; template: html/header/desktop/blocks/catalog -->
      <!-- app: site; template: html/header/desktop/blocks/catalog/catalog_01 -->
      <!--/ app: site; template: html/header/desktop/blocks/catalog/catalog_01 -->
    <!--/ app: site; template: html/header/desktop/blocks/catalog -->
    <!-- app: site; template: html/header/desktop/blocks/search -->
    <!-- app: site; template: html/header/desktop/blocks/user -->
    <!-- app: site; template: html/header/desktop/blocks/compare -->
    <!-- app: site; template: html/header/desktop/blocks/wishlist -->

Принцип поиска

  1. Авторизуйтесь в бэкенде Webasyst под администратором.

  2. Откройте страницу сайта в том же браузере.

  3. Откройте инструменты разработчика (F12 или Ctrl+Shift+I).

  4. Найдите нужный элемент через инспектор элементов.

  5. В HTML-коде посмотрите ближайший комментарий <!-- app: ...; template: ... -->.

  6. Найдите соответствующий файл {template}.html в директории темы указанного приложения.