Новые тарифы на контекстную рекламу Яндекс.Директ и Google AdsПодробнее
Инструкции

Инструкция по редактированию шаблонов темы дизайна Megashop 2.0 (функция MEGASHOP_DEBUG)

Поддержка Bodysite
Поддержка Bodysite
27 февраля 2019 15:39
+3

Содержание

1. Функция MEGASHOP_DEBUG

2. Пример. Добавить третий телефон вместо почты с использованием функции MEGASHOP_DEBUG

3. Аннотация к шаблонам темы дизайна (для версии темы дизайна 1.1.3)
   3.1. Приложение «Магазин»
   3.2. Приложение «Сайт»
   3.3. Приложение «Блог»
   3.4. Приложение «Фото»

1. Функция MEGASHOP_DEBUG

Для просмотра информации, в каких файлах содержится нужный элемент, добавьте к URL /?MEGASHOP_DEBUG=1 и откройте DevTools (Инструмент разработчика браузера).

2. Пример. Добавить третий телефон вместо почты

Задача: Необходимо добавить телефон вместо почты.

Решение

1. Добавьте к URL /?MEGASHOP_DEBUG=1, обновите страницу. 

Откройте DevTools (F12).

Кликните в открывшемся окне на инструмент в виде стрелки (указатель элемента).

Наведите на email, кликните по нему левой кнопкой мыши. В окне DevTools увидите код этого элемента в html-разметке.

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

Email расположен внутри блока: 

Запись <!-- app: site; template: block/index/header/middle_bar/contacts --> указывает на то, что:

  • шаблон расположен в приложении «Сайт» (app:site);
  • шаблон находится по адресу block/index/header/middle_bar/contacts.html.

В этом же блоке расположены ссылки на файлы: 

  • <!-- app: site; template: block/icon-box -->
  • <!-- app: site; template: block/link-icon-box -->

Они нас не интересуют, т.к. в них находятся шаблоны иконок (при желании можно убедиться, что нужной ссылки в этих шаблонах точно нет). 

Далее необходимо перейти в нужный шаблон block/index/header/middle_bar/contacts.html приложения «Сайт». Делать это лучше всего по FTP, а не через админку, т.к. в админке путь к шаблонам выведен не полностью.

Как найти нужный элемент через админку

В админке перейдите в раздел шаблонов. 

Найдите нужный шаблон в списке.

Убедитесь, что это нужный шаблон.

Вернитесь к окну DevTools и скопируйте класс ссылки.

Вернитесь в шаблоне и с помощью поиска в браузере (F3 или Ctrl+F) найдите нужный фрагмент кода. 

Замените содержимое блока на свое и сохраните изменения.

Третий телефон появился в шапке сайта. 

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

3. Аннотация к шаблонам темы дизайна

3.1. Приложение «Магазин»

Корзина

cart.html — общий шаблон корзины.
order.html — оформление заказа в корзине (SS8).
block/cart/cart-item-modal.html — добавление товара в корзине в модальном окне.
block/cart/cart-item.html — список товаров в корзине со всеми полями (количество, стоимость, дополнительные услуги и т.д.).
block/cart/cart-page.html — общий шаблон.
block/cart/cart-summary.html — подсчет стоимости заказа.
block/cart/coupon.html — форма для купона.
block/cart/order-page.html — оформление заказа в корзине (SS8).
block/cart/popup-item.html — корзина, вывод списка товаров во всплывающей корзине.
block/cart/popup.html — вывод всплывающей корзины на страницах сайта.

Оформление заказа

checkout.confirmation.html — подтверждение заказа, комментарий к заказу, условия предоставления услуг.
checkout.contactinfo.html — контактная информация.
checkout.error.html — страница ошибки, неудачное оформление заказа.
checkout.html — оформление заказа в 4 шага.
checkout.payment.html — блок оплаты.
checkout.shipping.html — блок доставки.
checkout.success.html — страница успешного оформления заказа.
block/checkout/auth.html — блок авторизации на сайте.
block/checkout/payment-method.html — блок оплаты.
block/checkout/shipping-method.html — блок доставки.
block/checkout/summary.html — итоговая сумма с доставкой и т.д.
block/checkout/user.html — вывод информации об авторизованном пользователе.

Каталог в бургер-меню

block/catalog.html — пункт меню «Каталог товаров» в бургер-меню.
block/catalog/catalog-columns.html — подкатегории для пункта меню «Каталог товаров» в бургер-меню.
block/catalog/catalog-extend.html — многоуровневый каталог товаров в бургер-меню.
block/catalog/catalog-list.html — иерархический каталог в бургер-меню, вывод категорий и подкатегорий.
block/catalog/catalog-tree.html — иерархический каталог товаров в бургер-меню, общий шаблон.

Сравнение товаров

compare.html — сравнение товаров.
block/compare/control.html — группы характеристик для сравнения.
block/compare/info-panel.html — информационная панель, которая появляется при добавлении товара в сравнение.
block/compare/page.html — страница сравнения.
block/compare/product.html — колонка товара на странице сравнения.

Избранное

block/favorite.html — общий шаблон.
block/favorite/info-panel.html — информационная панель, которая появляется при добавлении товара в избранное.
block/favorite/page.html — страница с избранными товарами.

Главная страница

home.html — вывод списков товаров, вывод варианта главной в зависимости от настроек темы.
block/advantages.html — шаблон блока с преимуществами.
block/home/advantages.html — блок с преимуществами.
block/home/brands.html — блок с брендами.
block/home/description.html — блок с описанием.
block/home/home-categories.html — вывод категорий в левой колонке после шапки.
block/home/news.html — блок новостей.
block/home/products.html — блок со списками товаров.
block/home/reviews.html — блок с отзывами.
block/home/slider.html — блок со слайдером.
block/home/social.html — блок с виджетами социальных сетей.

Карточка товара

product.cart.html — общий шаблон для вывода остатков, складов, кнопок добавления в корзину.
product.html — общий шаблон, подключение всех остальных файлов, плагинов для карточки товара, вывод изображений, описаний, характеристик, рекомендуемых товаров.
product.page.html — общий шаблон вывода подстраницы.
review.html — общий шаблон для вывода 1 отзыва.
reviews.html — общий шаблон отзывов о товаре.
block/product/add-to-cart.html — блок добавления товара в корзину (кнопки, цена, услуги и пр.).
block/product/available.html — вывод наличия товара, сколько осталось.
block/product/badge.html — надпись на наклейке.
block/product/discount-badge.html — ярлык наклейки на товаре.
block/product/feature-select.html — выбранное значение.
block/product/feature-value-color.html — характеристика «Цвет» со значком цвета.
block/product/feature-value.html — значения характеристик.
block/product/features-overview.html — вывод характеристик.
block/product/gallery.html — галерея с миниатюрами изображений.
block/product/images.html — изображение товара.
block/product/rating-overview.html — рейтинг по всем отзывам.
block/product/review-form.html — форма для написания отзыва.
block/product/review-reply-form.html — форма ответа на отзыв.
block/product/reviews.html — отзывы.
product/services.html — услуги.
block/product/skus-select.html — селект с артикулами.

Каталог

category.html — общий шаблон для категорий, вывод количества товаров, название категорий, подкатегорий, описания.
block/r-categories.html — категории в адаптивной версии.
block/horizontal-catalog.html — горизонтальный каталог в меню (при соответствующих настройках шапки).

Фильтр товаров

block/filter.html — фильтр товаров в левом сайдбаре, фильтрация по цене и другим характеристикам.
block/filters.html — фильтр товаров, обертка, кнопки «Показать» и «Сбросить».
block/filters/r-filters.html — фильтры в адаптивной версии.

Списки

block/list/advantages.html — список преимуществ.
block/list/categories/compact.html — вариант отображения подкатегории в категории - средние плитки.
block/list/categories/extend/categories-extend.html — второй вариант отображения категорий на главной с подкатегориями. 
block/list/categories/extend/category-extend.html — второй вариант отображения категорий на главной с подкатегориями (с маленькими лого).
block/list/categories/mini.html — вариант отображения подкатегории в категории - маленькие плитки.
block/list/categories/thumbs/categories-thumbs.html — вариант отображения подкатегории в категории - большие плитки.
block/list/categories/thumbs/category-thumb.html — подкатегории в категории: вывод названия, миниатюры, количества товаров.
block/list/products/compact/product-compact.html — вывод товаров при выборе варианта каталога «Таблица».
block/list/products/compact/products-compact.html — вид каталога товаров «Таблица».
block/list/products/extend/product-extend.html — вывод товара при выборе варианта каталога «Список».
block/list/products/extend/products-extend.html — вид каталога товаров «Список».
block/list/products/extend/r-product-extend.html — вид каталога «Список» для адаптивной версии сайта.
block/list/products/mini.html — вывод блока с товарами в сайдбаре.
block/list/products/thumbs-mini.html — блок рекомендуемых товаров в модальном окне (перейти в корзину/продолжить покупки).
block/list/products/thumbs/product-thumb.html — вывод товара при выборе варианта каталога «Плитка».
block/list/products/thumbs/products-thumbs-slider.html — карточка товара, вывод релевантных товаров в конце страницы.
block/list/products/thumbs/products-thumbs.html — вид каталога товаров «Плитка».

Сайдбар

block/list/reviews/mini.html — вывод отзывов в сайдбаре.
block/list/reviews/thumbs/review-thumb.html — 1 отзыв в сайдбаре.
block/list/reviews/thumbs/reviews-thumbs-slider.html — слайдер с отзывами о товарах в сайдбаре.
block/list/reviews/thumbs/reviews-thumbs.html —  отзывы о товарах в сайдбаре.
block/list/social-widgets.html — виджеты соцсетей в сайдбаре.
block/list/tags.html — теги в сайдбаре.
block/sidebar.pages.html — информационные страницы в сайдбаре.
block/sidebar/sidebar-catalog.html — каталог в сайдбаре.
block/sidebar/sidebar-filters.html — фильтры в сайдбаре.
block/sidebar/sidebar-products.html — списки товаров в сайдбаре.
block/sidebar/sidebar-reviews.html — отзывы в сайдбаре.
block/sidebar/sidebar-social.html — виджеты социальных сетей.
block/sidebar/sidebar-tags.html — вывод тегов в сайдбаре.

Слайдер

block/slider/slide.html — 1 слайд.
block/slider/slider.html — слайдер на главной.

Подвал

block/index/footer/footer-currency-select.html — выбор валюты.

Поиск

block/products.html — вывод товаров на странице результатов поиска.
block/search/search-page.html — страница вывода результатов поиска (без товаров).
search.html — общий шаблон для поиска товаров, вывод товаров из избранного, вывод тегов.

Личный кабинет

my.affiliate.html — баланс пользователя.
my.nav.html — навигация по личному кабинету пользователя.
my.order.html — просмотр заказов пользователя.
my.orders.html — список заказов пользователя.

Шаблоны для плагинов

block/brand/brand-review-form.html — бренды, форма для отзыва.
block/brand/brand-review.html — бренды, вывод отзыва.
block/brand/brand-reviews-container.html — бренды, контейнер с отзывами.
block/brand/brand-reviews.html —бренды, отзывы о бренде.
block/brands-catalog.html — бренды, вывод брендов в каталоге.
block/list/brands/brand-thumb.html — логотип бренда (+ наименование и ссылка).
block/list/brands/brands-thumbs-slider.html — слайдер брендов.
block/list/brands/brands-thumbs.html — вывод списка брендов.
block/buy1step.html — оформление заказа, плагин «Заказ в 1 шаг».
block/htmlmap.html — блок для карты сайта для пользователей (плагин «HTML-карта сайта»).
block/tag/tag-page.html — страница тега, описание для тега (при наличии SEO-оптимизации или Редактора тегов).
brand_plugin_brand_page_catalog.html — плагин «Бренды PRO», страница бренда с каталогом, навигацией, описанием, иллюстрацией.
brand_plugin_brand_page_info.html — плагин «Бренды PRO», информационная страница бренда.
brand_plugin_brand_page_reviews.html — плагин «Бренды PRO», вывод отзывов о бренде.
brand_plugin_frontend_brands.html — плагин «Бренды PRO», вывод списка брендов.
brand_plugin_pages_tabs.html — плагин «Бренды PRO», вывод страниц брендов.
breadcrumbs_plugin.html — вывод хлебных крошек плагина «Навигация в хлебных крошках».

Прочее

override/index.breadcrumbs.html — свой шаблон для хлебных крошек.
override/index.footer.html — свой шаблон для подвала.
override/index.head.html — свой шаблон для <head>.
override/index.header.html — свой шаблон для шапки.
override/index.main.html — свой шаблон для главной страницы.
override/index.sidebar.html — свой шаблон для сайдбара.

CSS

css/megashop.shop.css — стили темы дизайна для приложения «Магазин».

JS

js/megashop.shop.js — js-скрипты темы дизайна для приложения «Магазин».


3.2. Приложение «Сайт»

HTML

block/auth-adapters.html — блок авторизации, адаптив. 
block/breadcrumbs.html — хлебные крошки.
block/button-icon.html — иконки кнопок для слайдера. 
block/checkbox.html — контейнер чекбоксов. 
block/comment.html — комментарий.
block/comments.html — получение дерева комментариев. 
block/contact.html — профиль пользователя. 
block/datetime.html — форматирование даты и времени. 
block/form-field.html — поля форм. 
block/icon-box.html — шаблон иконки svg. 
block/index.html — основной шаблон сайта index. 
block/index/footer.html — подвал темы дизайна, выбор вариантов подвала. 
block/index/footer/footer-columns.html — подвал, колонки со ссылками из настроек темы дизайна (ссылки на разделы, информационные страницы). 
block/index/footer/footer-contacts.html — подвал, вывод контактной информации о магазине. 
block/index/footer/footer-copyright-row.html — подвал, вывод информации в копирайте для 2 и 3 варианта подвала. 
block/index/footer/footer-copyright.html — подвал, копирайт (лого, подключение других файлов). 
block/index/footer/footer-developers.html — подвал, информация о разработчике темы и движке. 
block/index/footer/footer-links.html — подвал, ссылки на карту сайта и политику персональных данных. 
block/index/footer/footer-payments.html — подвал, иконки способов оплаты. 
block/index/footer/footer-socials.html — подвал, иконки соцсетей. 
block/index/footer/r-footer.html — подвал, шаблон для мобильных страниц. 
block/index/header.html — выбор варианта шапки сайта. 
block/index/header/bottom-bar.html — нижняя панель шапки сайта. 
block/index/header/bottom_bar/alt-search.html — форма поиска. 
block/index/header/bottom_bar/links.html — ссылки в нижней панели шапки сайта. 
block/index/header/bottom_bar/shop-links.html — просмотр содержимого корзины из шапки сайта. 
block/index/header/dropdown-bar.html — вывод каталога в нижней части шапки сайта. 
block/index/header/middle-bar.html — средняя часть шапки сайта. 
block/index/header/middle_bar/contacts.html — вывод контактов в зависимости от варианта шапки, соцсетей, подписей к телефону. 
block/index/header/middle_bar/shop.html — формирование шапки сайта магазина в зависимости от выбранного варианта шапки. 
block/index/header/middle_bar/shop/cart.html — корзина. 
block/index/header/middle_bar/shop/links.html — ссылки на страницы магазина (сравнение, избранное).
block/index/header/top-bar.html — верхняя часть шапки сайта (выбор региона, авторизация, страницы меню). 
block/index/header/top_bar/links.html — ссылки верхнего меню (которое в строке с городом). 
block/index/r-header.html — адаптив шапки. 
block/index/subscribe.html — подписка на рассылку интернет-магазина. Форма выводится из приложения «Рассылки». 
block/input-search.html — форма поиска. 
block/link-icon-box.html — ссылки с svg-иконок. 
block/list-rows-expand.html — показать/скрыть подкатегории на главной странице сайта. 
block/list-rows-item.html — вывод адаптивного меню.
block/organzation.html — контактные данные интернет-магазина из настроек темы дизайна (телефон, email). 
block/pages-tree.html — дерево страниц, вывод подстраниц. 
block/pagination.html — пагинация. 
block/progress-bar.html — подгонка элементов по ширине. 
block/pseudo-link-icon-box.html — формирование псевдоссылок с иконками.
block/radio.html — контейнер радио-кнопки. 
block/rating.html — звезды рейтинга. 
block/responsive.html — адаптив. 
block/responsive/r-header-subdropdown.html — каталог товаров в бургер-меню. 
block/row-value.html — контейнер label/value. 
block/scheme.html — цветовая схема темы дизайна. 
block/sidebar/sidebar-banner.html — баннеры из настроек темы дизайна. 
block/sidebar/sidebar-pages.html — дерево страниц приложения «Сайт». 
block/slider-arrows.html — стрелки переключения слайдера. 
block/spinner.html — шаблон загрузки.
block/svg-icon.html — шаблон иконки svg, обнуленные параметры по умолчанию. 
block/user.html — блок с именем авторизованного пользователя и ссылкой выхода из личного кабинета. 
block/ya-share2.html — блок «Поделиться» (Facebook, Vkontakte, Twitter, Odnoklassniki, Telegram, Whatsapp, Viber).

error.html — страница 404 ошибки. 
forgotpassword.html — страница восстановления пароля. 
index.html — главный шаблон. 
login.html — вход в личный кабинет пользователя. 
my.nav.html — навигация в личном кабинете пользователя для приложения «Сайт». 
my.profile.html — профиль пользователя. 

override/index.breadcrumbs.html — свой шаблон для хлебных крошек. 
override/index.footer.html — свой шаблон для подвала сайта. 
override/index.head.html — свой шаблон для блока <head>.
override/index.header.html — свой шаблон для шапки сайта. 
override/index.main.html — свой шаблон для главной страницы. 
override/index.sidebar.html — порядок подключения блоков для сайдбара. 

page.html — информационная страница. 
signup.html — регистрация нового пользователя. 

util/default.html — подключение дефолтных переменных Webasyst. 
util/init.html — подключение файлов из папки util для приложений «Сайт», «Блог», «Фото», «Рассылки», «Магазин». 
util/plugins.html — объявление глобальных переменных для подключаемых плагинов. 
util/settings.html — получение данных из настроек темы дизайна и задание переменных из этих настроек. 
util/util.html — функции темы (рейтинги товаров, куки/счетчики для избранного, счетчик категорий, размер превьюшек для категорий, получение URL страниц, подключение файлов темы, получение навигации для личного кабинета пользователя, цветовое оформление для темной темы). 

CSS

css/megashop.site.css — файл для стилей приложения «Сайт», общие стили темы дизайна. 
user.css — файл для пользовательских стилей. 

JS

js/megashop.site.js — js-скрипты темы дизайна. 


3.3. Приложение «Блог»

HTML

block/list/comments/comment.html — один комментарий к записи. 
block/list/comments/comments.html — все комментарии к записи. 
block/list/posts/mini/post-mini.html — сайдбар, вывод 1 записи блога. 
block/list/posts/mini/posts-mini.html — сайдбар, вывод списка записей блога на всём сайте в сайдбаре. 
block/list/posts/primary/post.html — шаблон для одиночной записи в списке записей. 
block/list/posts/primary/posts.html — вывод списка записей, например, на странице http://megashop2.bodysite.ru/blog/. 
block/list/posts/thumbs/post-thumb.html — миниатюра для записи. 
block/list/posts/thumbs/posts-thumbs-slider.html — получение массива миниатюр для записей блога. 
block/list/posts/thumbs/posts-thumbs.html — миниатюры для записи (в слайдере на главной).
block/post/comment-form.html — запись, форма для добавления комментариев. 
block/post/comment-reply-form.html — запись, форма ответа на комментарий. 
block/post/comments-container.html — запись, блок с комментариями. 
block/sidebar/sidebar-categories.html — сайдбар, вывод категорий. 
block/sidebar/sidebar-news.html — сайдбар, вывод списка записей. 
block/sidebar/sidebar-timeline.html — сайдбар, вывод блока с сортировкой записей по годам и месяцам. 
block/stream/stream.html — вывод списка записей блога. 
breadcrumbs_plugin.html — шаблон для плагина «Навигация в хлебных крошках». 
comment.html — общий шаблон для комментариев. 
my.nav.html — навигация для блога в личном кабинете пользователя. 
override/index.breadcrumbs.html — свой шаблон для хлебных крошек.
override/index.footer.html — свой шаблон для подвала сайта. 
override/index.head.html — подключения в шапке сайта (в т.ч. плагины).
override/index.header.html — свой шаблон для шапки сайта. 
override/index.main.html — свой шаблон для главной страницы. 
override/index.sidebar.html — свой шаблон для сайдбара. 
post.html — полная запись блога. 
stream.html — общий шаблон для блога. 

CSS

css/megashop.blog.css — css-стили темы дизайна. 

JS

js/megashop.blog.js — js-скрипты темы дизайна. 


3.4. Приложение «Фото»

HTML

album.html — шаблон для альбома. 
block/list/albums/album.html — шаблон одного альбома. 
block/list/albums/albums.html — вывод списка альбомов. 
block/list/photos/mini/photo-mini.html — 1 миниатюра приложения «Фото» (для сайдбара). 
block/list/photos/mini/photos-mini.html — блок с миниатюрами из приложения «Фото» (используется в сайдбаре на всём сайте).
block/list/photos/thumbs/photo-thumb.html — 1 превью изображения в фотопотоке (со ссылкой и названием фото).
block/list/photos/thumbs/photos-thumbs.html — все превьюшки в фотопотоке.
block/photos/photos.html — общий шаблон для фотопотока. 
block/sidebar/sidebar-photos.html — блок с фотографиями для сайдбара. 

home.html — главная страница приложения «Фото», вывод фотоальбомов и фотопотока. 
my.nav.html — навигация приложения «Фото» в личном кабинете пользователя. 

override/index.breadcrumbs.html — свой шаблон для хлебных крошек.
override/index.footer.html — свой шаблон для подвала сайта. 
override/index.head.html — свой шаблон для блока <head>.
override/index.header.html — свой шаблон для шапки сайта. 
override/index.main.html — свой шаблон для главной страницы. 
override/index.sidebar.html — свой шаблон для сайдбара. 

photo.html — страница 1 фотографии. 
search.html — страница избранных фотографий (поиск и вывод). 

CSS

css/megashop.photos.css — css-стили для темы дизайна. 

JS

js/megashop.photos.js — js-скрипты для темы дизайна. 


Вернуться к содержанию инструкции »

База знаний