FENOM'енальный курс. Часть 2. Шаблоны и чанки.

Шаблон MAGAZINE вы можете скачать по ссылке.

Помните, что мы с вами в прошлой части договорились использовать файловые элементы: шаблоны, чанки, сниппеты, плагины? Давайте разберемся, где у нас должны они храниться. По умолчанию каталог для файловых элементов выглядит следующим образом: {core_path}elements/. Внимательные заметят, что данное значение хранится в системной настройке pdoTools — pdotools_elements_path. По желанию вы можете изменить каталог для элементов по умолчанию, я же оставлю все как есть.


Давайте договоримся, что каждый тип элемента будет иметь свой подкаталог, для того, чтобы нам с вами не запутаться. Например, путь к шаблонам у нас будет следующий: {core_path}elements/templates/, аналогично путь к чанкам — {core_path}elements/chunks/ и так далее. Выглядеть это должно примерно так (конечно, папки нужно создать вручную):


FENOM'енальный курс. Часть 2. Шаблоны и чанки.


Думаю, что логика вам понятна, и мы с вами можем приступить к созданию основных чанков. Конечно, перед тем как создавать чанки необходимо загрузить файлы нашего шаблона на сервер. В последнее время для файлов шаблона я создаю отдельную директориюв папке assets, давайте и этот раз не будет исключением, и мы с вами закинем все файлы в каталог assets/templates/magazine/.


Давайте все же немного пробежим по синтаксису Fenom. Думаю, стоит заострить внимание на том, что точкой входа в шаблонизатор является открывающаяся фигурная скобка “{”, а точкой выхода закрывающаяся фигурная скобка “}”.


Все плейсхолдеры в чанках остаются как есть, поэтому можно сопоставить теги MODx парсера и Fenom:






MODX

Fenom

[[+id]]

{$id}

[[+id:default=`test`]]

{$id ?: 'test'}

[[+id:is=``:then=`test`:else=`[[+pagetitle]]`]]

{$id == ''? 'test': $pagetitle}


Если же мы используем более сложные вещи (как в нашем случае), то как нашим плейсходерам добавляется служебная переменная {$_modx}, которая дает безопасный доступ к некоторым переменным и методам (я бы назвал доступ относительно безопасным).









MODX

Fenom

[[*id]]

{$_modx->resource.id}

[[*tv_param]]

{$_modx->resource.tv_param}

[[%lexicon]]

{$_modx->lexicon('lexicon')}

[[~15]]

{$_modx->makeUrl(15)}

[[~[[*id]]]]

{$_modx->makeUrl($_modx->resource.id)}

[[++system_setting]]

{$_modx->config.system_setting}


Хочу отметить, что можно совместно использовать теги MODx и Fenom. Только необходимо помнить, что сначала выполняются теги Fenom и только потом теги MODx.


Приступим к созданию основных чанков. По давно сложившейся традиции, у меня это следующие чанки (напомню для невнимательных, что разработку мы ведем на основе шаблона magazine.ru):


  • Meta
  • Header
  • Footer
  • Scripts
  • Modals

Чанк Fenom должен иметь расширение файла tpl, поэтому давайте создавать по очереди наши чанки (кодировка файлов UTF8). Чанк meta (часть кода между тегами head) у нас примет следующий вид, обратите внимание, что я изменил пути до наших файлов стилей и картинок:


	<code class="language-html">
<base href="{$_modx->config.site_url}">
<meta charset="{$_modx->config.modx_charset}">
{if $_modx->resource.seodescription}
<meta name="description" content="{$_modx->resource.seodescription}">
{/if}
{if $_modx->resource.seokeywords}
<meta name="keywords" content="{$_modx->resource.seokeywords}">
{/if}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="apple-touch-icon" sizes="180x180" href="assets/templates/magazine/img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/templates/magazine/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/templates/magazine/img/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/templates/magazine/img/favicon/site.webmanifest">
<link rel="mask-icon" href="assets/templates/magazine/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1">
{if $_modx->resource.searchable}
	<meta name="robots" content="index, follow">
{else}
	<meta name="robots" content="noindex, nofollow">
{/if}
<title>{$_modx->resource.seotitle ?: $_modx->resource.pagetitle}</title>
<link rel="stylesheet" href="assets/templates/magazine/libs/bootstrap4/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/templates/magazine/libs/owlcarousel2/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="assets/templates/magazine/libs/fontawesome5/css/all.min.css">
<link rel="stylesheet" href="assets/templates/magazine/libs/fontawesome5/css/v4-shims.min.css">
<link rel="stylesheet" href="assets/templates/magazine/libs/fancybox/dist/jquery.fancybox.min.css">
<link rel="stylesheet" href="assets/templates/magazine/libs/slick/slick/slick.css">
<link rel="stylesheet" href="assets/templates/magazine/libs/slick/slick/slick-theme.css">
<link rel="stylesheet" href="assets/templates/magazine/sprites/sprite.css">
<link rel="stylesheet" href="assets/templates/magazine/css/animate.css">
<link rel="stylesheet" href="assets/templates/magazine/css/main.css?time=5">
	</code>

“Но здесь же стразу столько много новых тегов появилось!” – наверно, скажете вы про себя. По поводу каждого из них я более подробно расскажу в видео, хотя более опытным пользователям все должно стать предельно ясно.


Следующий чанк – header – шапка нашего сайта. Пока весь код нашего чанка будет просто огромным.


	<code class="language-html">
<header>
    <div class="header-wrap">
        <div class="header-top">
            <div class="container">
                <div class="row ac">
                    <div class="col-xl-8 col-lg-8 col-md-6 col-sm-6 col-8 top-left">
                        <div class="inliner vam">
                            <div class="envelope hidden-sm hidden-xs">
                                <i class="fa fa-envelope-o"></i>
                                <a href="mailto:info@siter.ru">info@siter.ru</a>
                            </div>
                            <div class="socials hidden-sm hidden-xs">
                                <ul>
                                    <li><a href="#"><i class="fa fa-vk"></i></a></li>
                                    <li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
                                </ul>
                            </div>
                            <div class="phones">
                                <i class="fa fa-phone"></i>
                                <a href="tel:+8 (800) 123-45-67">8 (800) 123-45-67</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-4">
                        <div class="top-sider inliner vam">
                            <div class="login">
                                <a href="#">Войти</a>
                                <a href="#">Регистрация</a>
                            </div>
                            <div class="callback hidden-xs">
                                <a href="#" class="callbacker" data-toggle="modal" data-target="#callback">
                                    <span>Заказать звонок</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-bottom">
            <div class="container">
                <div class="row ac">
                    <div class="mobile-menu-button col-md-3 col-2">
                        <button class="navbar-toggler noactive">
                            <span></span>
                            <span></span>
                            <span></span>
                        </button>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-6 col-6">
                        <div class="logo">
                            <a href="#">
								<img src="assets/templates/magazine/img/logo.svg" alt=""/> 
							</a>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-4 posr hidden-sm">
                        <div class="header-search-form">
                            <form action="#">
                                <input type="text" placeholder="Введите фразу для поиска">
                                <button type="submit">
                                    <i class="fa fa-search"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-3 col-4">
                        <div class="right-tools inliner vam">
                            <div class="compariser">
                                <div data-id="1" data-list="default" class="comparison-default">
                                    <a href="#" data-toggle="tooltip" data-placement="bottom" title="Сравнение товаров">
                                        <i class="fa fa-sliders-h">
                                          <span class="comparison-total">0</span>
                                        </i>
                                    </a>
                                </div>
                            </div>
                            <div class="cart">
                                <a href="#" class="inliner vam">
                                    <span class="carticon">
                                        <i class="fa fa-shopping-cart"></i>
                                        <span class="count">3</span>
                                    </span>                               
                                    <div class="cart-info hidden-sm">
                                        <span class="title">Корзина</span>
                                        <span class="info">
                                            2 220 <i class="fa fa-ruble"></i>
                                        </span>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<section class="navigation hidden-sm">
    <div class="container">
        <ul class="navs">
            <li>
                <a href="#">Каталог <i class="fa fa-angle-down"></i></a>
                <ul>
                    <li class="first">
                        <a href="#" class="eqh"><img src="assets/templates/magazine/img/menu_icons/icon-1.png"><span>Настенные сплит-системы</span></a>
                    </li>
                    <li>
                        <a href="#" class="eqh"><img src="assets/templates/magazine/img/menu_icons/icon-2.png"><span>Инверторные сплит-системы</span></a>
                    </li>
                    <li>
                        <a href="#" class="eqh"><img src="assets/templates/magazine/img/menu_icons/icon-3.png"><span>Кондиционеры Wi-Fi</span></a>
                    </li>
                    <li>
                        <a href="#" class="eqh"><img src="assets/templates/magazine/img/menu_icons/icon-4.png"><span>Мульти сплит-системы</span></a>
                    </li>
                    <li>
                        <a href="#" class="eqh"><img src="assets/templates/magazine/img/menu_icons/icon-6.png"><span>Кассетные кондиционеры</span></a>
                    </li>
                    <li>
                        <a href="#" class="eqh"><img src="assets/templates/magazine/img/menu_icons/icon-7.png"><span>Канальные кондиционеры</span></a>
                    </li>
                    <li>
                        <a href="#"><img src="assets/templates/magazine/img/menu_icons/icon-5.png"><span>VRV / VRF системы</span></a>
                    </li>
                    <li>
                        <a href="#" class="eqh"><img src="assets/templates/magazine/img/menu_icons/icon-8.png"><span>Напольно-потолочные</span></a>
                    </li>
                    <li>
                        <a href="#" class="eqh"><img src="assets/templates/magazine/img/menu_icons/icon-9.png"><span>Расходные материаллы</span></a>
                    </li>
                    <li class="last">
                        <a href="#" class="eqh"><img src="assets/templates/magazine/img/menu_icons/icon-10.png"><span>Работы</span></a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Монтаж</a>
            </li>
            <li>
                <a href="#">Вентиляция</a>
            </li>
            <li>
                <a href="#">О компании</a>
            </li>
            <li>
                <a href="#">Контакты</a>
            </li>
        </ul>
    </div>
</section>
<div class="side-menu-overlay"></div>
<div class="mobile-catalog-menu-content">
    <ul class="mobile-vertical-menu-list">
        <li class="closer">
            <a href="#">
                <i class="fa fa-angle-left"></i>
                Назад
            </a>
        </li>
        <li class="parent">
            <a href="#">Мотобуксировщики
                                        <i class="fa fa-angle-right" aria-hidden="true"></i>
                                        </a>
            <ul class="inner_menu">
                <li class="closer">
                    <a href="#">
                        <i class="fa fa-angle-left"></i>
                        Назад
                    </a>
                </li>
                <li><a href="#">Мотобуксировщик БУРЛАК М</a></li>
                <li><a href="#">Мотобуксировщик БУРЛАК</a></li>
            </ul>
        </li>
        <li class="parent">
            <a href="#">Запчасти для снегоходов <i class="fa fa-angle-right" aria-hidden="true"></i></a>
            <ul class="inner_menu">
                <li class="closer">
                    <a href="#">
                        <i class="fa fa-angle-left"></i>
                        Назад
                    </a>
                </li>
                <li><a href="#">Запчасти для снегохода Тайга</a></li>
                <li><a href="#">Запчасти для снегохода Буран</a></li>
                <li><a href="#">Запчасти Тайга по каталогу РМ</a></li>
            </ul>
        </li>
        <li class="parent">
            <a href="#">Сани и прицепы <i class="fa fa-angle-right" aria-hidden="true"></i></a>
            <ul class="inner_menu">
                <li class="closer">
                    <a href="#">
                        <i class="fa fa-angle-left"></i>
                        Назад
                    </a>
                </li>
                <li><a href="#">Прицепы для квадроциклов</a></li>
                <li><a href="#">Сани для снегоходов</a></li>
            </ul>
        </li>
        <li class="parent">
            <a href="#">Снегоходы <i class="fa fa-angle-right" aria-hidden="true"></i></a>
            <ul class="inner_menu">
                <li class="closer">
                    <a href="#">
                        <i class="fa fa-angle-left"></i>
                        Назад
                    </a>
                </li>
                <li><a href="#">Снегоходы Буран</a></li>
                <li><a href="#">Снегоходы Тайга</a></li>
                <li><a href="#">Снегоход Тикси</a></li>
                <li><a href="#">Снегоходы Стелс</a></li>
            </ul>
        </li>
        <li class="parent">
            <a href="#">Квадроциклы, ATV <i class="fa fa-angle-right" aria-hidden="true"></i></a>
            <ul class="inner_menu">
                <li class="closer">
                    <a href="#">
                        <i class="fa fa-angle-left"></i>
                        Назад
                    </a>
                </li>
                <li><a href="#">Квадроциклы Русская Механика</a></li>
                <li><a href="#">Квадроциклы Стелс</a></li>
            </ul>
        </li>
        <li class="parent">
            <a href="#">Лодки и моторы <i class="fa fa-angle-right" aria-hidden="true"></i></a>
            <ul class="inner_menu">
                <li class="closer">
                    <a href="#">
                        <i class="fa fa-angle-left"></i>
                        Назад
                    </a>
                </li>
                <li><a href="#">Лодочные моторы Sea-Pro</a></li>
                <li><a href="#">Лодочные моторы Suzuki</a></li>
                <li><a href="#">Лодки Suzumar</a></li>
                <li><a href="#">Лодки Stingray</a></li>
                <li><a href="#">Лодки Altair</a></li>
                <li><a href="#">Лодки JOKER</a></li>
            </ul>
        </li>
        <li class="parent">
            <a href="#">Гусеницы к снегоходам <i class="fa fa-angle-right" aria-hidden="true"></i></a>
            <ul class="inner_menu">
                <li class="closer">
                    <a href="#">
                        <i class="fa fa-angle-left"></i>
                        Назад
                    </a>
                </li>
                <li><a href="#">Гусеницы для имп.снегоходов</a></li>
                <li><a href="#">Для отечественных снегоходов</a></li>
                <li><a href="#">Гусеницы к внедорожной технике</a></li>
            </ul>
        </li>
        <li class="parent">
            <a href="#">Аксессуары и опции <i class="fa fa-angle-right" aria-hidden="true"></i></a>
            <ul class="inner_menu">
                <li class="closer">
                    <a href="#">
                        <i class="fa fa-angle-left"></i>
                        Назад
                    </a>
                </li>
                <li><a href="#">Аксессуары для снегоходов</a></li>
                <li><a href="#">Аксессуары для мотобуксировщиков</a></li>
                <li><a href="#">Экипировка</a></li>
            </ul>
        </li>
        <li><a href="#">Стекла к снегоходу</a></li>
        <li><a href="#">Ремни Gates</a></li>
        <li><a href="#">Модульные понтоны</a></li>
    </ul>
</div>
<div class="mobile-menu-content">
    <a href="#" class="menu-close">×</a>
    <div class="mobile-search-form">
        <form action="#">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Введите фразу для поиска">
                <div class="input-group-append">
                    <button class="btn btn-orange" type="submit">
                    <i class="fa fa-search"></i>  
                </button>
                </div>
            </div>
        </form>
    </div>
    <ul class="navbars">
        <li><a href="#">О компании</a></li>
        <li class="mobile-catalog-buts">
            <a href="#">Каталог <i class="fa fa-angle-right"></i></a>
        </li>
        <li class="drop">
            <a href="#">Услуги <i class="fa fa-angle-down"></i></a>
            <div class="drop-menu">
                <div class="menu">
                    <ul>
                        <li>
                            <a href="#">Услуга 1</a>
                        </li>
                        <li>
                            <a href="#">Услуга 2</a>
                        </li>
                        <li>
                            <a href="#">Услуга 3</a>
                        </li>
                        <li>
                            <a href="#">Услуга 4</a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li><a href="#">Портфолио</a></li>
        <li><a href="#">Блог</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>
</div>
	</code>

Работу над чанком header мы продолжим в следующем уроке. А пока встречайте чанк footer:


	<code class="language-html">
<footer>
    <div class="container">
        <div class="row">
            <div class="footer-block col-lg-3 col-md-6 col-sm-6">
                <a href="#" class="footer-logo">
				    <img src="assets/templates/magazine/img/logo_bot.svg" alt="">
				</a>
                <ul class="socials">
                    <li>
                        <a href="#" target="_blank">
                        <i class="fa fa-vk"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank">
                            <i class="fa fa-youtube-play"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank">
                            <i class="fa fa-facebook"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank">
                            <i class="fa fa-instagram"></i>
                        </a>
                    </li>
                </ul>
                <ul class="contacts">
                    <li>
                        <i class="fa fa-map-marker"></i>
                        <div>
                            <b>Адрес</b>
                            <span>123456, г. Москва, ул.Касперовщиков, д. 10, офис 5</span>
                        </div>
                    </li>
                    <li>
                        <i class="fa fa-phone"></i>
                        <div>
                            <b>Магазин</b>
<span>+7 (123) 456-78-90</span>
                        </div>
                    </li>
                    <li>
                        <i class="fa fa-envelope"></i>
                        <div>
                            <i class="fa fa-envelope"></i>
                            <b>E-mail</b>
<span>info@siter.ru</span>
                        </div>
                    </li>
                </ul>
            </div>
            <!--  End Col -->
            <div class="footer-block col-lg-3 col-md-6 col-sm-6">
                <div class="footer-menu">
                    <span class="sf_title">Покупателям</span>
                    <ul>
                        <li>
                            <a href="#">Бонусная программа</a>
                        </li>
                        <li>
                            <a href="#">Как оформить заказ</a>
                        </li>
                        <li>
                            <a href="#">Доставка</a>
                        </li>
                        <li>
                            <a href="#">Способы оплаты</a>
                        </li>
                        <li>
                            <a href="#">Обмен и возврат товара</a>
                        </li>
                        <li>
                            <a href="#">Личный кабинет</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-block col-lg-3 col-md-6 col-sm-6">
                <div class="footer-menu">
                    <span class="sf_title">Информация</span>
                    <ul>
                        <li>
                            <a href="#">Контакты</a>
                        </li>
                        <li>
                            <a href="#">Информация для юр. лиц</a>
                        </li>
                        <li>
                            <a href="#">Политика конфиденциальности</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-block col-lg-3 col-md-6 col-sm-6">
                <div class="footer-menu">
                    <span class="sf_title">Способы оплаты</span>
                    <div class="payments">
                        <span class="visa" data-toggle="tooltip" data-placement="bottom" title="VISA"></span>
                        <span class="mastercard" data-toggle="tooltip" data-placement="bottom" title="Mastercard"></span>
                        <span class="maestro" data-toggle="tooltip" data-placement="bottom" title="Maestro"></span>
                        <span class="mir" data-toggle="tooltip" data-placement="bottom" title="MIR"></span>
                        <span class="yandex" data-toggle="tooltip" data-placement="bottom" title="Я.Деньги"></span>
                        <span class="qiwi" data-toggle="tooltip" data-placement="bottom" title="QIWI"></span>
                        <span class="cash" data-toggle="tooltip" data-placement="bottom" title="Наличные"></span>
                        <span class="credit" data-toggle="tooltip" data-placement="bottom" title="Кредит"></span>
                        <span class="webmoney" data-toggle="tooltip" data-placement="bottom" title="Webmoney"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <p>
                <noindex>
                    <div class="copyright">Данный сайт не является публичной офертой. Цены на товары уточняйте у менеджеров.
                        
© DART Agency, 2018</div>
                </noindex>
            </p>
        </div>
    </div>
</footer>
<a id="scrollUp" href="#top"><i class="fa fa-angle-up"></i></a>
	</code>

Чанк modals:


	<code class="language-html">
<div class="modal" tabindex="-1" role="dialog" id="callback">
    <form action="/" method="post" id="callbackform" class="ajax_form">
        <input type="hidden" name="page" value="Изучаем CSS за час!">
        <input type="hidden" name="pageid" value="145">
        <input type="hidden" name="formname" value="Заказать звонок">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Заказать звонок</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		  <span aria-hidden="true">?</span>
		</button>
                </div>
                <div class="modal-body">
                    <div class="form-group hidden">
                        <label for="user">Ваше имя</label>
                        <input type="text" class="form-control" name="user" placeholder="Пользователь">
                    </div>
                    <div class="form-group">
                        <label for="name">Ваше имя:</label>
                        <input type="text" class="form-control" name="name" aria-describedby="nameHelp" placeholder="Иванов Иван Иванович">
                    </div>
                    <div class="form-group">
                        <label for="phone">Ваш телефон:</label>
                        <input type="text" class="form-control phone" name="phone" aria-describedby="phoneHelp" placeholder="+7 (999) 123-45-67">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Сообщение:</label>
                        <textarea class="form-control" name="text" placeholder="Хочу обсудить детали по разработке CRM. Звонить после 15:00"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-blue">Отправить</button>
                </div>
            </div>
        </div>
    </form>
</div>
	</code>

И, наконец, чанк scripts, также обращаю ваше внимание на то, что я изменил пути до скриптов:


	<code class="language-html">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="assets/templates/magazine/libs/bootstrap4/js/bootstrap.min.js"></script>
<script src="assets/templates/magazine/libs/owlcarousel2/dist/owl.carousel.min.js"></script>
<script src="assets/templates/magazine/libs/match-height/dist/jquery.matchHeight-min.js"></script>
<script src="assets/templates/magazine/libs/fancybox/dist/jquery.fancybox.min.js"></script>
<script src="assets/templates/magazine/libs/parallax.js/parallax.min.js"></script>
<script src="assets/templates/magazine/libs/slick/slick/slick.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script src="assets/templates/magazine/js/masonry.pkgd.min.js"></script>
<script src="assets/templates/magazine/js/wow.min.js"></script>
<script src="assets/templates/magazine/libs/before-leaving-me.js/src/blm.js"></script>
<script src="assets/templates/magazine/libs/readmore.js/readmore.min.js"></script>
<script src="assets/templates/magazine/js/bootstrap4-tabcollapse.js"></script>
<script src="assets/templates/magazine/js/scripts.js?time=5"></script>
	</code>

Итак, мы с вами разбили наш шаблон на основные чанки. Теперь нам с вами предстоит создать сам шаблон главной страницы. Для этого переходим в каталог core/elements/templates и создаем файл index.tpl, который впоследствии станет нашим новым шаблоном. Код наш шаблон примет следующий:


	<code class="language-html">
<!DOCTYPE html>
<html lang="{$_modx->config.cultureKey}">
<head>
    {include 'file:chunks/meta.tpl'}
</head>
<body>
    <div class="wrapper">
        {include 'file:chunks/header.tpl'}
        <section class="catalog">
            <div class="mobile-catalog-but col-12">
                <a href="#">Каталог <i class="fa fa-angle-right"></i></a>
            </div>
            <div class="slider">
                <div class="main-slider owl-carousel">
                    <div>
                        <a href="#">
                                        <img src="assets/templates/magazine/img/slide.png" alt="">
                                    </a>
                    </div>
                    <div>
                        <a href="#">
                                        <img src="assets/templates/magazine/img/slide2.png" alt="">
                                    </a>
                    </div>
                    <div>
                        <a href="#">
                                        <img src="assets/templates/magazine/img/slide3.png" alt="">
                                    </a>
                    </div>
                    <div>
                        <a href="#">
                                        <img src="assets/templates/magazine/img/slide4.png" alt="">
                                    </a>
                    </div>
                </div>
            </div>
        </section>
        <!-- BANNERS -->
        <section class="banners">
            <div class="container">
                <div class="row">
                    <!-- item -->
                    <div class="col-lg-4 item-wrap">
                        <div class="item">
                            <div class="icons">
                                <i class="fa fa-percent"></i>
                            </div>
                            <span class="title">Сделаем скидку</span>
                            <p>если нашли дешевле</p>
                        </div>
                    </div>
                    <!-- / item -->
                    <!-- item -->
                    <div class="col-lg-4 item-wrap">
                        <div class="item">
                            <div class="icons">
                                <i class="fa fa-truck"></i>
                            </div>
                            <span class="title">Бесплатно доставим</span>
                            <p>и поднимем на этаж</p>
                        </div>
                    </div>
                    <!-- / item -->
                    <!-- item -->
                    <div class="col-lg-4 item-wrap">
                        <div class="item">
                            <div class="icons">
                                <i class="fa fa-redo"></i>
                            </div>
                            <span class="title">Обменяем в течение 30 дней</span>
                            <p>если передумали</p>
                        </div>
                    </div>
                    <!-- / item -->
                </div>
            </div>
        </section>
        <!-- / BANNERS -->
        <!-- TEXT -->
        <section class="text-content">
            <div class="container">
                <h1> УНИВЕРСАЛЬНЫЙ ШАБЛОН ИНТЕРНЕТ-МАГАЗИНА НА MODX REVO! </h1>
                <p> Шаблон универсального интернет-магазина "Magazine.ru" на MODx Revolution + miniShop2 от компании DART Agency призван сократить время запуска ваших проектов. При покупке данного шаблона вам остается только наполнить его актуальной информацией и товарами. Начните продавать в интернете легко!</p>
            </div>
        </section>
        <!-- / TEXT -->
        <!-- CATALOG -->
        <section class="def-section catalog hidden-xs">
            <div class="container">
                <h2>Каталог</h2>
                <!-- CATALOG -->
                <div class="container">
                    <div class="rubric-list">
                        <div class="row">
                            <!-- item -->
                            <div class="col-sm-3 item-wrap">
                                <div class="item">
                                    <a href="#">
                                    <img src="assets/templates/magazine/img/catalog/catalog1.jpg" alt="">
                                    <span>НАCТЕННЫЕ КОНДИЦИОНЕРЫ</span>
                                </a>
                                </div>
                            </div>
                            <!-- / item -->
                            <!-- item -->
                            <div class="col-sm-3 item-wrap">
                                <div class="item">
                                    <a href="#">
                                    <img src="assets/templates/magazine/img/catalog/catalog2.jpg" alt="">
                                    <span>ИНВЕРТОРНЫЕ СПЛИТ-СИСТЕМЫ</span>
                                </a>
                                </div>
                            </div>
                            <!-- / item -->
                            <!-- item -->
                            <div class="col-sm-3 item-wrap">
                                <div class="item">
                                    <a href="#">
                                    <img src="assets/templates/magazine/img/catalog/catalog4.jpg" alt="">
                                    <span>НАПОЛЬНО-ПОТОЛОЧНЫЕ</span>
                                </a>
                                </div>
                            </div>
                            <!-- / item -->
                            <!-- item -->
                            <div class="col-sm-3 item-wrap">
                                <div class="item">
                                    <a href="#">
                                    <img src="assets/templates/magazine/img/catalog/catalog3.jpg" alt="">
                                    <span>КОНДИЦИОНЕРЫ WI-FI</span>
                                </a>
                                </div>
                            </div>
                            <!-- / item -->
                            <!-- item -->
                            <div class="col-sm-6 item-wrap">
                                <div class="item">
                                    <a href="#">
                                    <img src="assets/templates/magazine/img/catalog/catalog9.jpg" alt="">
                                    <span>МУЛЬТИ СПЛИТ-СИСТЕМЫ</span>
                                </a>
                                </div>
                            </div>
                            <!-- / item -->
                            <!-- item -->
                            <div class="col-sm-3 item-wrap">
                                <div class="item">
                                    <a href="#">
                                    <img src="assets/templates/magazine/img/catalog/catalog5.jpg" alt="">
                                    <span>КАССЕТНЫЕ КОНДИЦИОНЕРЫ</span>
                                </a>
                                </div>
                            </div>
                            <!-- / item -->
                            <!-- item -->
                            <div class="col-sm-3 item-wrap">
                                <div class="item">
                                    <a href="#">
                                    <img src="assets/templates/magazine/img/catalog/catalog6.jpg" alt="">
                                    <span>VRV / VRF СИСТЕМЫ</span>
                                </a>
                                </div>
                            </div>
                            <!-- / item -->
                            <!-- item -->
                            <div class="col-sm-3 item-wrap">
                                <div class="item">
                                    <a href="#">
                                    <img src="assets/templates/magazine/img/catalog/catalog7.jpg" alt="">
                                    <span>КАНАЛЬНЫЕ КОНДИЦИОНЕРЫ</span>
                                </a>
                                </div>
                            </div>
                            <!-- / item -->
                            <!-- item -->
                            <div class="col-sm-3 item-wrap">
                                <div class="item">
                                    <a href="#">
                                    <img src="assets/templates/magazine/img/catalog/catalog8.jpg" alt="">
                                    <span>РАСХОДНЫЕ МАТЕРИАЛЫ</span>
                                </a>
                                </div>
                            </div>
                            <!-- / item -->
                            <!-- item -->
                            <div class="col-sm-6 item-wrap">
                                <div class="item">
                                    <a href="#">
                                    <img src="assets/templates/magazine/img/catalog/catalog10.jpg" alt="">
                                    <span>УСТАНОВКА И ПРОЧИЕ РАБОТЫ</span>
                                </a>
                                </div>
                            </div>
                            <!-- / item -->
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- / CATALOG -->
        <!-- PRODUCTS -->
        <section class="def-section products">
            <div class="container">
                <h2>Популярные предложения</h2>
                <div class="product-list">
                    <div class="row">
                        <!-- item -->
                        <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                            <div class="item">
                                <div class="image">
                                    <div class="labels">
                                        <div class="avaibles outstock">
                                            Нет наличии
                                        </div>
                                        <div>
                                            <span class="labels-hits">Хит продаж</span>
                                        </div>
                                        <div>
                                            <span class="labels-action">Акция</span>
                                        </div>
                                    </div>
                                    <div class="bigger">
                                        <a href="#">
                                                    <img src="assets/templates/magazine/img/product.jpg" alt="">
                                                </a>
                                        <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                                    </div>
                                </div>
                                <div class="text">
                                    <a href="#" class="category">Сплит система настенная</a>
                                    <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                                    <div class="features">
                                        <div class="feature-item">
                                            <i class="iconm iconm-inverter"></i>
                                            <span>Инвертор</span>
                                        </div>
                                        <div class="feature-item">
                                            <span class="iconms">А++</span>
                                        </div>
                                        <div class="feature-item">
                                            <i class="iconm iconm-volume"></i>
                                            <span>26 Дб</span>
                                        </div>
                                    </div>
                                    <div class="characters">
                                        <div class="char-item">
                                            <span class="label">На помещение</span>
                                            <span class="value">
                                                        <small>до</small> 25 м<sup>2</sup>
                                                    </span>
                                        </div>
                                        <div class="char-item">
                                            <span class="label">Режим</span>
                                            <span class="value">
                                                        охлаждение и обогрев
                                                    </span>
                                        </div>
                                    </div>
                                    <div class="prices-block">
                                        <div class="prices">
                                            <div class="old_price">
                                                <span>55 228</span> руб.
                                            </div>
                                            <div class="price">
                                                <span>45 228</span> руб.
                                            </div>
                                        </div>
                                        <form action="#">
                                            <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                            <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- / item -->
                        <!-- item -->
                        <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                            <div class="item">
                                <div class="image">
                                    <div class="labels">
                                        <div class="avaibles instock">
                                            В наличии
                                        </div>
                                        <div>
                                            <span class="labels-hits">Хит продаж</span>
                                        </div>
                                        <div>
                                            <span class="labels-action">Акция</span>
                                        </div>
                                    </div>
                                    <div class="bigger">
                                        <a href="#">
                                                    <img src="assets/templates/magazine/img/product.jpg" alt="">
                                                </a>
                                        <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                                    </div>
                                </div>
                                <div class="text">
                                    <a href="#" class="category">Сплит система настенная</a>
                                    <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                                    <div class="features">
                                        <div class="feature-item">
                                            <i class="iconm iconm-inverter"></i>
                                            <span>Инвертор</span>
                                        </div>
                                        <div class="feature-item">
                                            <span class="iconms">А++</span>
                                        </div>
                                        <div class="feature-item">
                                            <i class="iconm iconm-volume"></i>
                                            <span>26 Дб</span>
                                        </div>
                                    </div>
                                    <div class="characters">
                                        <div class="char-item">
                                            <span class="label">На помещение</span>
                                            <span class="value">
                                                        <small>до</small> 25 м<sup>2</sup>
                                                    </span>
                                        </div>
                                        <div class="char-item">
                                            <span class="label">Режим</span>
                                            <span class="value">
                                                        охлаждение и обогрев
                                                    </span>
                                        </div>
                                    </div>
                                    <div class="prices-block">
                                        <div class="prices">
                                            <div class="old_price">
                                                <span>55 228</span> руб.
                                            </div>
                                            <div class="price">
                                                <span>45 228</span> руб.
                                            </div>
                                        </div>
                                        <form action="#">
                                            <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                            <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- / item -->
                        <!-- item -->
                        <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                            <div class="item">
                                <div class="image">
                                    <div class="labels">
                                        <div class="avaibles instock">
                                            В наличии
                                        </div>
                                        <div>
                                            <span class="labels-hits">Хит продаж</span>
                                        </div>
                                        <div>
                                            <span class="labels-action">Акция</span>
                                        </div>
                                    </div>
                                    <div class="bigger">
                                        <a href="#">
                                                    <img src="assets/templates/magazine/img/product.jpg" alt="">
                                                </a>
                                        <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                                    </div>
                                </div>
                                <div class="text">
                                    <a href="#" class="category">Сплит система настенная</a>
                                    <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                                    <div class="features">
                                        <div class="feature-item">
                                            <i class="iconm iconm-inverter"></i>
                                            <span>Инвертор</span>
                                        </div>
                                        <div class="feature-item">
                                            <span class="iconms">А++</span>
                                        </div>
                                        <div class="feature-item">
                                            <i class="iconm iconm-volume"></i>
                                            <span>26 Дб</span>
                                        </div>
                                    </div>
                                    <div class="characters">
                                        <div class="char-item">
                                            <span class="label">На помещение</span>
                                            <span class="value">
                                                        <small>до</small> 25 м<sup>2</sup>
                                                    </span>
                                        </div>
                                        <div class="char-item">
                                            <span class="label">Режим</span>
                                            <span class="value">
                                                        охлаждение и обогрев
                                                    </span>
                                        </div>
                                    </div>
                                    <div class="prices-block">
                                        <div class="prices">
                                            <div class="old_price">
                                                <span>55 228</span> руб.
                                            </div>
                                            <div class="price">
                                                <span>45 228</span> руб.
                                            </div>
                                        </div>
                                        <form action="#">
                                            <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                            <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- / item -->
                        <!-- item -->
                        <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                            <div class="item">
                                <div class="image">
                                    <div class="labels">
                                        <div class="avaibles instock">
                                            В наличии
                                        </div>
                                        <div>
                                            <span class="labels-hits">Хит продаж</span>
                                        </div>
                                        <div>
                                            <span class="labels-action">Акция</span>
                                        </div>
                                    </div>
                                    <div class="bigger">
                                        <a href="#">
                                                    <img src="assets/templates/magazine/img/product.jpg" alt="">
                                                </a>
                                        <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                                    </div>
                                </div>
                                <div class="text">
                                    <a href="#" class="category">Сплит система настенная</a>
                                    <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                                    <div class="features">
                                        <div class="feature-item">
                                            <i class="iconm iconm-inverter"></i>
                                            <span>Инвертор</span>
                                        </div>
                                        <div class="feature-item">
                                            <span class="iconms">А++</span>
                                        </div>
                                        <div class="feature-item">
                                            <i class="iconm iconm-volume"></i>
                                            <span>26 Дб</span>
                                        </div>
                                    </div>
                                    <div class="characters">
                                        <div class="char-item">
                                            <span class="label">На помещение</span>
                                            <span class="value">
                                                        <small>до</small> 25 м<sup>2</sup>
                                                    </span>
                                        </div>
                                        <div class="char-item">
                                            <span class="label">Режим</span>
                                            <span class="value">
                                                        охлаждение и обогрев
                                                    </span>
                                        </div>
                                    </div>
                                    <div class="prices-block">
                                        <div class="prices">
                                            <div class="old_price">
                                                <span>55 228</span> руб.
                                            </div>
                                            <div class="price">
                                                <span>45 228</span> руб.
                                            </div>
                                        </div>
                                        <form action="#">
                                            <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                            <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- / item -->
                        <!-- item -->
                        <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                            <div class="item">
                                <div class="image">
                                    <div class="labels">
                                        <div class="avaibles instock">
                                            В наличии
                                        </div>
                                        <div>
                                            <span class="labels-hits">Хит продаж</span>
                                        </div>
                                        <div>
                                            <span class="labels-action">Акция</span>
                                        </div>
                                    </div>
                                    <div class="bigger">
                                        <a href="#">
                                                    <img src="assets/templates/magazine/img/product.jpg" alt="">
                                                </a>
                                        <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                                    </div>
                                </div>
                                <div class="text">
                                    <a href="#" class="category">Сплит система настенная</a>
                                    <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                                    <div class="features">
                                        <div class="feature-item">
                                            <i class="iconm iconm-inverter"></i>
                                            <span>Инвертор</span>
                                        </div>
                                        <div class="feature-item">
                                            <span class="iconms">А++</span>
                                        </div>
                                        <div class="feature-item">
                                            <i class="iconm iconm-volume"></i>
                                            <span>26 Дб</span>
                                        </div>
                                    </div>
                                    <div class="characters">
                                        <div class="char-item">
                                            <span class="label">На помещение</span>
                                            <span class="value">
                                                        <small>до</small> 25 м<sup>2</sup>
                                                    </span>
                                        </div>
                                        <div class="char-item">
                                            <span class="label">Режим</span>
                                            <span class="value">
                                                        охлаждение и обогрев
                                                    </span>
                                        </div>
                                    </div>
                                    <div class="prices-block">
                                        <div class="prices">
                                            <div class="old_price">
                                                <span>55 228</span> руб.
                                            </div>
                                            <div class="price">
                                                <span>45 228</span> руб.
                                            </div>
                                        </div>
                                        <form action="#">
                                            <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                            <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- / item -->
                        <!-- item -->
                        <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                            <div class="item">
                                <div class="image">
                                    <div class="labels">
                                        <div class="avaibles instock">
                                            В наличии
                                        </div>
                                        <div>
                                            <span class="labels-hits">Хит продаж</span>
                                        </div>
                                        <div>
                                            <span class="labels-action">Акция</span>
                                        </div>
                                    </div>
                                    <div class="bigger">
                                        <a href="#">
                                                    <img src="assets/templates/magazine/img/product.jpg" alt="">
                                                </a>
                                        <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                                    </div>
                                </div>
                                <div class="text">
                                    <a href="#" class="category">Сплит система настенная</a>
                                    <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                                    <div class="features">
                                        <div class="feature-item">
                                            <i class="iconm iconm-inverter"></i>
                                            <span>Инвертор</span>
                                        </div>
                                        <div class="feature-item">
                                            <span class="iconms">А++</span>
                                        </div>
                                        <div class="feature-item">
                                            <i class="iconm iconm-volume"></i>
                                            <span>26 Дб</span>
                                        </div>
                                    </div>
                                    <div class="characters">
                                        <div class="char-item">
                                            <span class="label">На помещение</span>
                                            <span class="value">
                                                        <small>до</small> 25 м<sup>2</sup>
                                                    </span>
                                        </div>
                                        <div class="char-item">
                                            <span class="label">Режим</span>
                                            <span class="value">
                                                        охлаждение и обогрев
                                                    </span>
                                        </div>
                                    </div>
                                    <div class="prices-block">
                                        <div class="prices">
                                            <div class="old_price">
                                                <span>55 228</span> руб.
                                            </div>
                                            <div class="price">
                                                <span>45 228</span> руб.
                                            </div>
                                        </div>
                                        <form action="#">
                                            <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                            <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- / item -->
                        <!-- item -->
                        <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                            <div class="item">
                                <div class="image">
                                    <div class="labels">
                                        <div class="avaibles instock">
                                            В наличии
                                        </div>
                                        <div>
                                            <span class="labels-hits">Хит продаж</span>
                                        </div>
                                        <div>
                                            <span class="labels-action">Акция</span>
                                        </div>
                                    </div>
                                    <div class="bigger">
                                        <a href="#">
                                                    <img src="assets/templates/magazine/img/product.jpg" alt="">
                                                </a>
                                        <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                                    </div>
                                </div>
                                <div class="text">
                                    <a href="#" class="category">Сплит система настенная</a>
                                    <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                                    <div class="features">
                                        <div class="feature-item">
                                            <i class="iconm iconm-inverter"></i>
                                            <span>Инвертор</span>
                                        </div>
                                        <div class="feature-item">
                                            <span class="iconms">А++</span>
                                        </div>
                                        <div class="feature-item">
                                            <i class="iconm iconm-volume"></i>
                                            <span>26 Дб</span>
                                        </div>
                                    </div>
                                    <div class="characters">
                                        <div class="char-item">
                                            <span class="label">На помещение</span>
                                            <span class="value">
                                                        <small>до</small> 25 м<sup>2</sup>
                                                    </span>
                                        </div>
                                        <div class="char-item">
                                            <span class="label">Режим</span>
                                            <span class="value">
                                                        охлаждение и обогрев
                                                    </span>
                                        </div>
                                    </div>
                                    <div class="prices-block">
                                        <div class="prices">
                                            <div class="old_price">
                                                <span>55 228</span> руб.
                                            </div>
                                            <div class="price">
                                                <span>45 228</span> руб.
                                            </div>
                                        </div>
                                        <form action="#">
                                            <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                            <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- / item -->
                        <!-- item -->
                        <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                            <div class="item">
                                <div class="image">
                                    <div class="labels">
                                        <div class="avaibles instock">
                                            В наличии
                                        </div>
                                        <div>
                                            <span class="labels-hits">Хит продаж</span>
                                        </div>
                                        <div>
                                            <span class="labels-action">Акция</span>
                                        </div>
                                    </div>
                                    <div class="bigger">
                                        <a href="#">
                                                    <img src="assets/templates/magazine/img/product.jpg" alt="">
                                                </a>
                                        <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                                    </div>
                                </div>
                                <div class="text">
                                    <a href="#" class="category">Сплит система настенная</a>
                                    <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                                    <div class="features">
                                        <div class="feature-item">
                                            <i class="iconm iconm-inverter"></i>
                                            <span>Инвертор</span>
                                        </div>
                                        <div class="feature-item">
                                            <span class="iconms">А++</span>
                                        </div>
                                        <div class="feature-item">
                                            <i class="iconm iconm-volume"></i>
                                            <span>26 Дб</span>
                                        </div>
                                    </div>
                                    <div class="characters">
                                        <div class="char-item">
                                            <span class="label">На помещение</span>
                                            <span class="value">
                                                        <small>до</small> 25 м<sup>2</sup>
                                                    </span>
                                        </div>
                                        <div class="char-item">
                                            <span class="label">Режим</span>
                                            <span class="value">
                                                        охлаждение и обогрев
                                                    </span>
                                        </div>
                                    </div>
                                    <div class="prices-block">
                                        <div class="prices">
                                            <div class="old_price">
                                                <span>55 228</span> руб.
                                            </div>
                                            <div class="price">
                                                <span>45 228</span> руб.
                                            </div>
                                        </div>
                                        <form action="#">
                                            <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                            <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- / item -->
                        <!-- item -->
                        <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                            <div class="item">
                                <div class="image">
                                    <div class="labels">
                                        <div class="avaibles instock">
                                            В наличии
                                        </div>
                                        <div>
                                            <span class="labels-hits">Хит продаж</span>
                                        </div>
                                        <div>
                                            <span class="labels-action">Акция</span>
                                        </div>
                                    </div>
                                    <div class="bigger">
                                        <a href="#">
                                                    <img src="assets/templates/magazine/img/product.jpg" alt="">
                                                </a>
                                        <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                                    </div>
                                </div>
                                <div class="text">
                                    <a href="#" class="category">Сплит система настенная</a>
                                    <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                                    <div class="features">
                                        <div class="feature-item">
                                            <i class="iconm iconm-inverter"></i>
                                            <span>Инвертор</span>
                                        </div>
                                        <div class="feature-item">
                                            <span class="iconms">А++</span>
                                        </div>
                                        <div class="feature-item">
                                            <i class="iconm iconm-volume"></i>
                                            <span>26 Дб</span>
                                        </div>
                                    </div>
                                    <div class="characters">
                                        <div class="char-item">
                                            <span class="label">На помещение</span>
                                            <span class="value">
                                                        <small>до</small> 25 м<sup>2</sup>
                                                    </span>
                                        </div>
                                        <div class="char-item">
                                            <span class="label">Режим</span>
                                            <span class="value">
                                                        охлаждение и обогрев
                                                    </span>
                                        </div>
                                    </div>
                                    <div class="prices-block">
                                        <div class="prices">
                                            <div class="old_price">
                                                <span>55 228</span> руб.
                                            </div>
                                            <div class="price">
                                                <span>45 228</span> руб.
                                            </div>
                                        </div>
                                        <form action="#">
                                            <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                            <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- / item -->
                    </div>
                </div>
            </div>
        </section>
        <!-- RELATED POSTS -->
        <section class="def-section wow fadeInUp">
            <div class="container">
                <h2>Последние новости</h2>
                <div class="posts">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="post eqh">
                                <a href="#">
                                    <img src="assets/templates/magazine/img/news/news1.jpg" alt="">
                                </a>
                                <span>01.06.2018</span>
                                <p><a href="#">Новая линейка мотобуксировщиков Бурлак-М</a></p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="post eqh">
                                <a href="#">
                                    <img src="assets/templates/magazine/img/news/news2.jpg" alt="">
                                </a>
                                <span>02.02.2018</span>
                                <p><a href="#">Бурлак-М штурмует Уральские горы</a></p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="post eqh">
                                <a href="#">
                                    <img src="assets/templates/magazine/img/news/news3.jpg" alt="">
                                </a>
                                <span>26.09.2016</span>
                                <p><a href="#">Бурлак новое поколение мотобуксировщиков - видео. Смотри!</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- / RELATED POSTS -->
        {include 'file:chunks/footer.tpl'}
		{include 'file:chunks/modals.tpl'}
    </div>
    {include 'file:chunks/scripts.tpl'}
</body>
</html>
	</code>

Мда… Кода пока получается очень много. Но с каждой частью наш с вами шаблон будет становиться все меньше и меньше. Так как в MODx обязательно условие существование шаблона как объекта modTemplate в базе данных, нам необходимо создать новый шаблон в панели администратора сайта и вставить туда следующий код (я изменил стандартный шаблон MODx, который создается после установки):


	<code class="language-html">
{include 'file:templates/index.tpl'}
	</code>

Расширение шаблонов Fenom.



Сейчас мы с вами продолжим создавать шаблоны MODx, используя при этом принцип расширения шаблонов Fenom. Раньше, при использовании стандартного парсера modx нам приходилось городить большое количество шаблонов. Сейчас, если мы используем Fenom, шаблонов станет физически меньше, чем мы облегчим себе работу по их модификации. Пока сложно воспринять то, о чем я пишу, но вскоре вы все поймете.


Итак, у нас есть основной шаблон – файл core/elements/templates/index.tpl. Если мы внимательно посмотрим на другие наши шаблоны в верстке, то увидим следующую закономерность: фактически у нас меняется внутренняя часть. Естественно, у нас есть двух колоночный макет категории товаров, но фактически вся центральная часть страницы – это вызов mFilter2, который мы будем использовать в следующих наших уроках. Поэтому, мы должны прийти к выводу, что физически у нас шаблон один, и меняется только центральная часть макетов.


Теперь предлагаю вам создать в нашем шаблоне блок, к примеру, content, который будет своеобразным расширением нашего шаблона. Тогда файл core/elements/templates/index.tpl примет следующий вид:


	<code class="language-html">
<!DOCTYPE html>
<html lang="{$_modx->config.cultureKey}">
<head>
    {include 'file:chunks/meta.tpl'}
</head>
<body>
    <div class="wrapper">
        {include 'file:chunks/header.tpl'}		
		{block 'content'}
			
		{/block}		
        {include 'file:chunks/footer.tpl'}
		{include 'file:chunks/modals.tpl'}
    </div>
    {include 'file:chunks/scripts.tpl'}
</body>
</html>
	</code>

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


	<code class="language-html">
{extends 'file:templates/index.tpl'}
{block 'content'}
<section class="catalog">
    <div class="mobile-catalog-but col-12">
        <a href="#">Каталог <i class="fa fa-angle-right"></i></a>
    </div>
    <div class="slider">
        <div class="main-slider owl-carousel">
            <div>
                <a href="#">
                                <img src="assets/templates/magazine/img/slide.png" alt="">
                            </a>
            </div>
            <div>
                <a href="#">
                                <img src="assets/templates/magazine/img/slide2.png" alt="">
                            </a>
            </div>
            <div>
                <a href="#">
                                <img src="assets/templates/magazine/img/slide3.png" alt="">
                            </a>
            </div>
            <div>
                <a href="#">
                                <img src="assets/templates/magazine/img/slide4.png" alt="">
                            </a>
            </div>
        </div>
    </div>
</section>
<!-- BANNERS -->
<section class="banners">
    <div class="container">
        <div class="row">
            <!-- item -->
            <div class="col-lg-4 item-wrap">
                <div class="item">
                    <div class="icons">
                        <i class="fa fa-percent"></i>
                    </div>
                    <span class="title">Сделаем скидку</span>
                    <p>если нашли дешевле</p>
                </div>
            </div>
            <!-- / item -->
            <!-- item -->
            <div class="col-lg-4 item-wrap">
                <div class="item">
                    <div class="icons">
                        <i class="fa fa-truck"></i>
                    </div>
                    <span class="title">Бесплатно доставим</span>
                    <p>и поднимем на этаж</p>
                </div>
            </div>
            <!-- / item -->
            <!-- item -->
            <div class="col-lg-4 item-wrap">
                <div class="item">
                    <div class="icons">
                        <i class="fa fa-redo"></i>
                    </div>
                    <span class="title">Обменяем в течение 30 дней</span>
                    <p>если передумали</p>
                </div>
            </div>
            <!-- / item -->
        </div>
    </div>
</section>
<!-- / BANNERS -->
<!-- TEXT -->
<section class="text-content">
    <div class="container">
        <h1>Снегоходы Буран и Тайга, запчасти к снегоходам</h1>
        <p>Добро пожаловать в интернет-представительство торгового дома «Снегоход-сервис». Наша компания является единственным официальным дилером "Русская Механика" в городе Рыбинск. Мы специализируемся на продаже снегоходов Тайга и Буран и представляем широкий ассортимент любых запчастей к снегоходам, прицепов и саней.</p>
    </div>
</section>
<!-- / TEXT -->
<!-- CATALOG -->
<section class="def-section catalog hidden-xs">
    <div class="container">
        <h2>Каталог</h2>
        <!-- CATALOG -->
        <div class="container">
            <div class="rubric-list">
                <div class="row">
                    <!-- item -->
                    <div class="col-sm-3 item-wrap">
                        <div class="item">
                            <a href="#">
                            <img src="assets/templates/magazine/img/catalog/catalog1.jpg" alt="">
                            <span>НАCТЕННЫЕ КОНДИЦИОНЕРЫ</span>
                        </a>
                        </div>
                    </div>
                    <!-- / item -->
                    <!-- item -->
                    <div class="col-sm-3 item-wrap">
                        <div class="item">
                            <a href="#">
                            <img src="assets/templates/magazine/img/catalog/catalog2.jpg" alt="">
                            <span>ИНВЕРТОРНЫЕ СПЛИТ-СИСТЕМЫ</span>
                        </a>
                        </div>
                    </div>
                    <!-- / item -->
                    <!-- item -->
                    <div class="col-sm-3 item-wrap">
                        <div class="item">
                            <a href="#">
                            <img src="assets/templates/magazine/img/catalog/catalog4.jpg" alt="">
                            <span>НАПОЛЬНО-ПОТОЛОЧНЫЕ</span>
                        </a>
                        </div>
                    </div>
                    <!-- / item -->
                    <!-- item -->
                    <div class="col-sm-3 item-wrap">
                        <div class="item">
                            <a href="#">
                            <img src="assets/templates/magazine/img/catalog/catalog3.jpg" alt="">
                            <span>КОНДИЦИОНЕРЫ WI-FI</span>
                        </a>
                        </div>
                    </div>
                    <!-- / item -->
                    <!-- item -->
                    <div class="col-sm-6 item-wrap">
                        <div class="item">
                            <a href="#">
                            <img src="assets/templates/magazine/img/catalog/catalog9.jpg" alt="">
                            <span>МУЛЬТИ СПЛИТ-СИСТЕМЫ</span>
                        </a>
                        </div>
                    </div>
                    <!-- / item -->
                    <!-- item -->
                    <div class="col-sm-3 item-wrap">
                        <div class="item">
                            <a href="#">
                            <img src="assets/templates/magazine/img/catalog/catalog5.jpg" alt="">
                            <span>КАССЕТНЫЕ КОНДИЦИОНЕРЫ</span>
                        </a>
                        </div>
                    </div>
                    <!-- / item -->
                    <!-- item -->
                    <div class="col-sm-3 item-wrap">
                        <div class="item">
                            <a href="#">
                            <img src="assets/templates/magazine/img/catalog/catalog6.jpg" alt="">
                            <span>VRV / VRF СИСТЕМЫ</span>
                        </a>
                        </div>
                    </div>
                    <!-- / item -->
                    <!-- item -->
                    <div class="col-sm-3 item-wrap">
                        <div class="item">
                            <a href="#">
                            <img src="assets/templates/magazine/img/catalog/catalog7.jpg" alt="">
                            <span>КАНАЛЬНЫЕ КОНДИЦИОНЕРЫ</span>
                        </a>
                        </div>
                    </div>
                    <!-- / item -->
                    <!-- item -->
                    <div class="col-sm-3 item-wrap">
                        <div class="item">
                            <a href="#">
                            <img src="assets/templates/magazine/img/catalog/catalog8.jpg" alt="">
                            <span>РАСХОДНЫЕ МАТЕРИАЛЫ</span>
                        </a>
                        </div>
                    </div>
                    <!-- / item -->
                    <!-- item -->
                    <div class="col-sm-6 item-wrap">
                        <div class="item">
                            <a href="#">
                            <img src="assets/templates/magazine/img/catalog/catalog10.jpg" alt="">
                            <span>УСТАНОВКА И ПРОЧИЕ РАБОТЫ</span>
                        </a>
                        </div>
                    </div>
                    <!-- / item -->
                </div>
            </div>
        </div>
    </div>
</section>
<!-- / CATALOG -->
<!-- PRODUCTS -->
<section class="def-section products">
    <div class="container">
        <h2>Популярные предложения</h2>
        <div class="product-list">
            <div class="row">
                <!-- item -->
                <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                    <div class="item">
                        <div class="image">
                            <div class="labels">
                                <div class="avaibles outstock">
                                    Нет наличии
                                </div>
                                <div>
                                    <span class="labels-hits">Хит продаж</span>
                                </div>
                                <div>
                                    <span class="labels-action">Акция</span>
                                </div>
                            </div>
                            <div class="bigger">
                                <a href="#">
                                            <img src="assets/templates/magazine/img/product.jpg" alt="">
                                        </a>
                                <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                            </div>
                        </div>
                        <div class="text">
                            <a href="#" class="category">Сплит система настенная</a>
                            <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                            <div class="features">
                                <div class="feature-item">
                                    <i class="iconm iconm-inverter"></i>
                                    <span>Инвертор</span>
                                </div>
                                <div class="feature-item">
                                    <span class="iconms">А++</span>
                                </div>
                                <div class="feature-item">
                                    <i class="iconm iconm-volume"></i>
                                    <span>26 Дб</span>
                                </div>
                            </div>
                            <div class="characters">
                                <div class="char-item">
                                    <span class="label">На помещение</span>
                                    <span class="value">
                                                <small>до</small> 25 м<sup>2</sup>
                                            </span>
                                </div>
                                <div class="char-item">
                                    <span class="label">Режим</span>
                                    <span class="value">
                                                охлаждение и обогрев
                                            </span>
                                </div>
                            </div>
                            <div class="prices-block">
                                <div class="prices">
                                    <div class="old_price">
                                        <span>55 228</span> руб.
                                    </div>
                                    <div class="price">
                                        <span>45 228</span> руб.
                                    </div>
                                </div>
                                <form action="#">
                                    <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                    <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- / item -->
                <!-- item -->
                <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                    <div class="item">
                        <div class="image">
                            <div class="labels">
                                <div class="avaibles instock">
                                    В наличии
                                </div>
                                <div>
                                    <span class="labels-hits">Хит продаж</span>
                                </div>
                                <div>
                                    <span class="labels-action">Акция</span>
                                </div>
                            </div>
                            <div class="bigger">
                                <a href="#">
                                            <img src="assets/templates/magazine/img/product.jpg" alt="">
                                        </a>
                                <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                            </div>
                        </div>
                        <div class="text">
                            <a href="#" class="category">Сплит система настенная</a>
                            <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                            <div class="features">
                                <div class="feature-item">
                                    <i class="iconm iconm-inverter"></i>
                                    <span>Инвертор</span>
                                </div>
                                <div class="feature-item">
                                    <span class="iconms">А++</span>
                                </div>
                                <div class="feature-item">
                                    <i class="iconm iconm-volume"></i>
                                    <span>26 Дб</span>
                                </div>
                            </div>
                            <div class="characters">
                                <div class="char-item">
                                    <span class="label">На помещение</span>
                                    <span class="value">
                                                <small>до</small> 25 м<sup>2</sup>
                                            </span>
                                </div>
                                <div class="char-item">
                                    <span class="label">Режим</span>
                                    <span class="value">
                                                охлаждение и обогрев
                                            </span>
                                </div>
                            </div>
                            <div class="prices-block">
                                <div class="prices">
                                    <div class="old_price">
                                        <span>55 228</span> руб.
                                    </div>
                                    <div class="price">
                                        <span>45 228</span> руб.
                                    </div>
                                </div>
                                <form action="#">
                                    <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                    <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- / item -->
                <!-- item -->
                <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                    <div class="item">
                        <div class="image">
                            <div class="labels">
                                <div class="avaibles instock">
                                    В наличии
                                </div>
                                <div>
                                    <span class="labels-hits">Хит продаж</span>
                                </div>
                                <div>
                                    <span class="labels-action">Акция</span>
                                </div>
                            </div>
                            <div class="bigger">
                                <a href="#">
                                            <img src="assets/templates/magazine/img/product.jpg" alt="">
                                        </a>
                                <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                            </div>
                        </div>
                        <div class="text">
                            <a href="#" class="category">Сплит система настенная</a>
                            <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                            <div class="features">
                                <div class="feature-item">
                                    <i class="iconm iconm-inverter"></i>
                                    <span>Инвертор</span>
                                </div>
                                <div class="feature-item">
                                    <span class="iconms">А++</span>
                                </div>
                                <div class="feature-item">
                                    <i class="iconm iconm-volume"></i>
                                    <span>26 Дб</span>
                                </div>
                            </div>
                            <div class="characters">
                                <div class="char-item">
                                    <span class="label">На помещение</span>
                                    <span class="value">
                                                <small>до</small> 25 м<sup>2</sup>
                                            </span>
                                </div>
                                <div class="char-item">
                                    <span class="label">Режим</span>
                                    <span class="value">
                                                охлаждение и обогрев
                                            </span>
                                </div>
                            </div>
                            <div class="prices-block">
                                <div class="prices">
                                    <div class="old_price">
                                        <span>55 228</span> руб.
                                    </div>
                                    <div class="price">
                                        <span>45 228</span> руб.
                                    </div>
                                </div>
                                <form action="#">
                                    <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                    <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- / item -->
                <!-- item -->
                <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                    <div class="item">
                        <div class="image">
                            <div class="labels">
                                <div class="avaibles instock">
                                    В наличии
                                </div>
                                <div>
                                    <span class="labels-hits">Хит продаж</span>
                                </div>
                                <div>
                                    <span class="labels-action">Акция</span>
                                </div>
                            </div>
                            <div class="bigger">
                                <a href="#">
                                            <img src="assets/templates/magazine/img/product.jpg" alt="">
                                        </a>
                                <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                            </div>
                        </div>
                        <div class="text">
                            <a href="#" class="category">Сплит система настенная</a>
                            <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                            <div class="features">
                                <div class="feature-item">
                                    <i class="iconm iconm-inverter"></i>
                                    <span>Инвертор</span>
                                </div>
                                <div class="feature-item">
                                    <span class="iconms">А++</span>
                                </div>
                                <div class="feature-item">
                                    <i class="iconm iconm-volume"></i>
                                    <span>26 Дб</span>
                                </div>
                            </div>
                            <div class="characters">
                                <div class="char-item">
                                    <span class="label">На помещение</span>
                                    <span class="value">
                                                <small>до</small> 25 м<sup>2</sup>
                                            </span>
                                </div>
                                <div class="char-item">
                                    <span class="label">Режим</span>
                                    <span class="value">
                                                охлаждение и обогрев
                                            </span>
                                </div>
                            </div>
                            <div class="prices-block">
                                <div class="prices">
                                    <div class="old_price">
                                        <span>55 228</span> руб.
                                    </div>
                                    <div class="price">
                                        <span>45 228</span> руб.
                                    </div>
                                </div>
                                <form action="#">
                                    <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                    <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- / item -->
                <!-- item -->
                <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                    <div class="item">
                        <div class="image">
                            <div class="labels">
                                <div class="avaibles instock">
                                    В наличии
                                </div>
                                <div>
                                    <span class="labels-hits">Хит продаж</span>
                                </div>
                                <div>
                                    <span class="labels-action">Акция</span>
                                </div>
                            </div>
                            <div class="bigger">
                                <a href="#">
                                            <img src="assets/templates/magazine/img/product.jpg" alt="">
                                        </a>
                                <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                            </div>
                        </div>
                        <div class="text">
                            <a href="#" class="category">Сплит система настенная</a>
                            <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                            <div class="features">
                                <div class="feature-item">
                                    <i class="iconm iconm-inverter"></i>
                                    <span>Инвертор</span>
                                </div>
                                <div class="feature-item">
                                    <span class="iconms">А++</span>
                                </div>
                                <div class="feature-item">
                                    <i class="iconm iconm-volume"></i>
                                    <span>26 Дб</span>
                                </div>
                            </div>
                            <div class="characters">
                                <div class="char-item">
                                    <span class="label">На помещение</span>
                                    <span class="value">
                                                <small>до</small> 25 м<sup>2</sup>
                                            </span>
                                </div>
                                <div class="char-item">
                                    <span class="label">Режим</span>
                                    <span class="value">
                                                охлаждение и обогрев
                                            </span>
                                </div>
                            </div>
                            <div class="prices-block">
                                <div class="prices">
                                    <div class="old_price">
                                        <span>55 228</span> руб.
                                    </div>
                                    <div class="price">
                                        <span>45 228</span> руб.
                                    </div>
                                </div>
                                <form action="#">
                                    <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                    <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- / item -->
                <!-- item -->
                <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                    <div class="item">
                        <div class="image">
                            <div class="labels">
                                <div class="avaibles instock">
                                    В наличии
                                </div>
                                <div>
                                    <span class="labels-hits">Хит продаж</span>
                                </div>
                                <div>
                                    <span class="labels-action">Акция</span>
                                </div>
                            </div>
                            <div class="bigger">
                                <a href="#">
                                            <img src="assets/templates/magazine/img/product.jpg" alt="">
                                        </a>
                                <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                            </div>
                        </div>
                        <div class="text">
                            <a href="#" class="category">Сплит система настенная</a>
                            <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                            <div class="features">
                                <div class="feature-item">
                                    <i class="iconm iconm-inverter"></i>
                                    <span>Инвертор</span>
                                </div>
                                <div class="feature-item">
                                    <span class="iconms">А++</span>
                                </div>
                                <div class="feature-item">
                                    <i class="iconm iconm-volume"></i>
                                    <span>26 Дб</span>
                                </div>
                            </div>
                            <div class="characters">
                                <div class="char-item">
                                    <span class="label">На помещение</span>
                                    <span class="value">
                                                <small>до</small> 25 м<sup>2</sup>
                                            </span>
                                </div>
                                <div class="char-item">
                                    <span class="label">Режим</span>
                                    <span class="value">
                                                охлаждение и обогрев
                                            </span>
                                </div>
                            </div>
                            <div class="prices-block">
                                <div class="prices">
                                    <div class="old_price">
                                        <span>55 228</span> руб.
                                    </div>
                                    <div class="price">
                                        <span>45 228</span> руб.
                                    </div>
                                </div>
                                <form action="#">
                                    <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                    <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- / item -->
                <!-- item -->
                <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                    <div class="item">
                        <div class="image">
                            <div class="labels">
                                <div class="avaibles instock">
                                    В наличии
                                </div>
                                <div>
                                    <span class="labels-hits">Хит продаж</span>
                                </div>
                                <div>
                                    <span class="labels-action">Акция</span>
                                </div>
                            </div>
                            <div class="bigger">
                                <a href="#">
                                            <img src="assets/templates/magazine/img/product.jpg" alt="">
                                        </a>
                                <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                            </div>
                        </div>
                        <div class="text">
                            <a href="#" class="category">Сплит система настенная</a>
                            <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                            <div class="features">
                                <div class="feature-item">
                                    <i class="iconm iconm-inverter"></i>
                                    <span>Инвертор</span>
                                </div>
                                <div class="feature-item">
                                    <span class="iconms">А++</span>
                                </div>
                                <div class="feature-item">
                                    <i class="iconm iconm-volume"></i>
                                    <span>26 Дб</span>
                                </div>
                            </div>
                            <div class="characters">
                                <div class="char-item">
                                    <span class="label">На помещение</span>
                                    <span class="value">
                                                <small>до</small> 25 м<sup>2</sup>
                                            </span>
                                </div>
                                <div class="char-item">
                                    <span class="label">Режим</span>
                                    <span class="value">
                                                охлаждение и обогрев
                                            </span>
                                </div>
                            </div>
                            <div class="prices-block">
                                <div class="prices">
                                    <div class="old_price">
                                        <span>55 228</span> руб.
                                    </div>
                                    <div class="price">
                                        <span>45 228</span> руб.
                                    </div>
                                </div>
                                <form action="#">
                                    <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                    <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- / item -->
                <!-- item -->
                <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                    <div class="item">
                        <div class="image">
                            <div class="labels">
                                <div class="avaibles instock">
                                    В наличии
                                </div>
                                <div>
                                    <span class="labels-hits">Хит продаж</span>
                                </div>
                                <div>
                                    <span class="labels-action">Акция</span>
                                </div>
                            </div>
                            <div class="bigger">
                                <a href="#">
                                            <img src="assets/templates/magazine/img/product.jpg" alt="">
                                        </a>
                                <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                            </div>
                        </div>
                        <div class="text">
                            <a href="#" class="category">Сплит система настенная</a>
                            <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                            <div class="features">
                                <div class="feature-item">
                                    <i class="iconm iconm-inverter"></i>
                                    <span>Инвертор</span>
                                </div>
                                <div class="feature-item">
                                    <span class="iconms">А++</span>
                                </div>
                                <div class="feature-item">
                                    <i class="iconm iconm-volume"></i>
                                    <span>26 Дб</span>
                                </div>
                            </div>
                            <div class="characters">
                                <div class="char-item">
                                    <span class="label">На помещение</span>
                                    <span class="value">
                                                <small>до</small> 25 м<sup>2</sup>
                                            </span>
                                </div>
                                <div class="char-item">
                                    <span class="label">Режим</span>
                                    <span class="value">
                                                охлаждение и обогрев
                                            </span>
                                </div>
                            </div>
                            <div class="prices-block">
                                <div class="prices">
                                    <div class="old_price">
                                        <span>55 228</span> руб.
                                    </div>
                                    <div class="price">
                                        <span>45 228</span> руб.
                                    </div>
                                </div>
                                <form action="#">
                                    <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                    <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- / item -->
                <!-- item -->
                <div class="col-xl-4 col-lg-6 col-md-6 item-wrap">
                    <div class="item">
                        <div class="image">
                            <div class="labels">
                                <div class="avaibles instock">
                                    В наличии
                                </div>
                                <div>
                                    <span class="labels-hits">Хит продаж</span>
                                </div>
                                <div>
                                    <span class="labels-action">Акция</span>
                                </div>
                            </div>
                            <div class="bigger">
                                <a href="#">
                                            <img src="assets/templates/magazine/img/product.jpg" alt="">
                                        </a>
                                <img src="assets/templates/magazine/img/toshiba.png" class="vendor" alt="Toshiba">
                            </div>
                        </div>
                        <div class="text">
                            <a href="#" class="category">Сплит система настенная</a>
                            <a href="#" class="title">Toshiba RAS-10N3KVR-E / RAS-10N3AVR-E</a>
                            <div class="features">
                                <div class="feature-item">
                                    <i class="iconm iconm-inverter"></i>
                                    <span>Инвертор</span>
                                </div>
                                <div class="feature-item">
                                    <span class="iconms">А++</span>
                                </div>
                                <div class="feature-item">
                                    <i class="iconm iconm-volume"></i>
                                    <span>26 Дб</span>
                                </div>
                            </div>
                            <div class="characters">
                                <div class="char-item">
                                    <span class="label">На помещение</span>
                                    <span class="value">
                                                <small>до</small> 25 м<sup>2</sup>
                                            </span>
                                </div>
                                <div class="char-item">
                                    <span class="label">Режим</span>
                                    <span class="value">
                                                охлаждение и обогрев
                                            </span>
                                </div>
                            </div>
                            <div class="prices-block">
                                <div class="prices">
                                    <div class="old_price">
                                        <span>55 228</span> руб.
                                    </div>
                                    <div class="price">
                                        <span>45 228</span> руб.
                                    </div>
                                </div>
                                <form action="#">
                                    <button type="submit" class="btn btn-blue btn-rounded">В корзину</button>
                                    <a href="#" class="one-click"><span>Купить в 1 клик</span></a>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- / item -->
            </div>
        </div>
    </div>
</section>
<!-- RELATED POSTS -->
<section class="def-section wow fadeInUp">
    <div class="container">
        <h2>Последние новости</h2>
        <div class="posts">
            <div class="row">
                <div class="col-md-4">
                    <div class="post eqh">
                        <a href="#">
                            <img src="assets/templates/magazine/img/news/news1.jpg" alt="">
                        </a>
                        <span>01.06.2018</span>
                        <p><a href="#">Новая линейка мотобуксировщиков Бурлак-М</a></p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="post eqh">
                        <a href="#">
                            <img src="assets/templates/magazine/img/news/news2.jpg" alt="">
                        </a>
                        <span>02.02.2018</span>
                        <p><a href="#">Бурлак-М штурмует Уральские горы</a></p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="post eqh">
                        <a href="#">
                            <img src="assets/templates/magazine/img/news/news3.jpg" alt="">
                        </a>
                        <span>26.09.2016</span>
                        <p><a href="#">Бурлак новое поколение мотобуксировщиков - видео. Смотри!</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- / RELATED POSTS -->
{/block}
	</code>

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

Оцените статью:

Проголосовало: 16

Комментарии ()

  1. Максим 03 апреля 2019, 22:25 # 0
    Приветствую. Хотел пройти ваши уроки, но не смог скачать шаблон магазин. Он не доступен. Как его скачать?
    1. Петропавловский Артем 04 апреля 2019, 13:23 # 0
      Поправил ссылку, спасибо!
    2. Vlad 06 апреля 2019, 03:22 # 0
      Не работал код {extends 'file:templates/index.tpl'} — помогла простая установка чанка {extends 'index'}. Не знаю в чем проблема

      Написать комментарий

      Наши клиенты

      Многие компании уже доверяют нам. Будьте в их числе!

      Хотите реализовать проект?

      Контакты

      Напишите нам - мы расскажем вам много интересного!


      Пермь, ул. Крупской 34, офис 510