Николай Ланец
20 янв. 2015 г., 13:16

Tutorial: Установка собственного скина на ShopModxBox

Всем привет! Читали статью про новую сборку? Хотите сменить скин сайта, но не совсем поняли как это сделать? Сегодня я подробно расскажу как это сделать.
После того как вы развернули нашу сборку, магазин выглядит так:
?
Простой скин, а нам хочется, чтобы оформление отличалось от стандартного. Для этого надо всего лишь установить новую тему bootstrap. Лезем в интернеты и ищем любую понравившуюся нам тему (главное условие — bootstrap версии 3+). А далее делаем все по следующей инструкции:
1) Укажем название нашего скина. Для этого переходим в настройки системы, меняем раздел на modxsmarty, находим переменную modxSmarty.pre_template и меняем значение на skin/имя_вашей_папки_с_шаблоном — в моем случае это skins/StonnieAnnie.
?
Теперь Smarty учитывает директорию нашего скина и при обращении к странице, ищет указанный шаблон в нашей директории. В случае, если в нашей директории файл шаблона не найден, Smarty ищет этот шаблон в директории основного скина сайта. Так как пока еще моей папки скина нет, для сайта еще ничего не поменялось.
2) Создадим Смарти-скин. Для этого переходим в Smarty Templates и создадим там свою папку скина (напомню, что в моем случае это skins/StonnieAnnie). В этой папке создаем файл layout.tpl.
?
Все основные шаблоны страниц основного скина так или иначе расширяют layout.tpl, так что мы имеем возможность вклиниться в шаблонизацию всего сайта. Т.к. данный файл пустой, перейдя на сайт мы увидим только белую страницу. Это логично: нет кода в шаблоне — нечего и выводить. Давайте исправим это, прописав {extends "[main]layout.tpl"}.
?
Таким образом мы расширим базовый шаблон layout.tpl из основного скина сайта ([main] указывает Смарти на то, что надо искать файл именно в директории главного скина (такое название ему задано в плагине modxSmarty)). Теперь на странице сайта все вернулось к первоначальному виду. То есть у нас уже свой переопределяющий скин, но мы пока ничего не стали менять в общей шаблонизации.
3) А теперь самое главное — залить новую bootstrap-тему и задать ее сайту. Заходим в Public Templates. В папке skins создаем папку для своего скина, а в ней еще одну для будущих файлов шаблона bootstrap.
?
Заливаем файлы из скачанного bootstrap-шаблона.
?
Всё, файлы темы залили. Осталось только задать их сайту. Открываем файл index.html из папки bootstrap. Рамкой выделены нужные нам стили и скрипты. Они нужны нам для переопределения bootstrap-блока из базового шаблона.
?
Этот блок можно найти в основном шаблоне layout.tpl главного скина сайта. Он располагается в Smarty Templates->shopmodx-> layout.tpl. В шаблоне находим блок bootstrap, копируем его в шаблон layout.tpl нашего скина.
?
В блоке удаляем все старые данные bootstrap и прописываем новые из добавляемой темы. Не забываем сменить пути до файлов. Особое внимание обратите на переменные $template_url. Эта переменная содержит путь до публичной папки основного скина, а путь до публичной папки нашего скина содержится в переменной $pre_template_url.
Так выглядит переопределенный блок bootstrap:
? Сохраняем изменения, обновляем сайт и переходим на него. Теперь наш сайт выглядит следующим образом:
?
Хммм, мне не нравится высота header. Создаем свой файл style.css.
?
В нем прописываем нужные нам стили.
?
Остается только его подключить. Для этого переопределяем блок {styles}.
?
Сохраняем изменения, обновляем сайт и переходим на него. Как видно, минимальная высота header изменилась.
?
Вообще, при желании можно многое поменять, но перед нами стояла задача смены дефолтного скина сайта на какой-нибудь другой. Мы лишь немного подправили настройки стиля bootstrap.
З.Ы. Данный скин можно увидеть в новой сборке ShopModxBox-2.5.1
К слову, в новой версии сборки большая часть чанков из технических страниц сайта (регистрация и т.п.) перенесена в смарти-шаблоны, чтобы можно было в свой скине править их, не трогая содержимого самих страниц и чанки не трогая. Например: шаблон обновления профиля. Это все тот же сниппет Login, только уже на смарти. Надо отметить, что это не только возможность менять оформление, но и более правильная логика. К примеру, давайте глянем старую версию вот эту строчку. Интересует именно это: value="[[+email]]". В данном случае в значение попадает именно текущий емейл пользователя, а не то, что передается в запросе, поэтому если с емейлом что-то не так (к примеру, он уже занят), то мы получим ошибку от логина, но в значении поля по прежнему будет емейл текущий, а не тот, что пользователь прописал. ИМХО это не юзабельно. Я должен видеть какой я ввел емейл и что с ним не так. Теперь это так.
Еще важное дополнение: в управлении заказами теперь в строчке заказа выводится сумма заказа. Мелочь, но как-то я все упускал это и не доделывал.
Еще поправил modCaptcha и процессор обратной связи. Так как у процессоров нет собственных объектов для ошибок, все фигачится в объект $modx->error, и если вы вызвали какой-то процессор, который добавил ошибку, то все остальные процессоры после него обязательно будут возвращать ошибки. По этой причине в смарти-плагин processor добавлен сброс ошибок (раньше не редки случаи были перекрестных ошибок), и именно по этой причине в форме обратной связи правильный ввод каптчи не учитывался, пока были ошибки в других критичных полях. Сейчас это тоже исправлено.
Ну а еще многие формы на сайте приведены в порядок стилистически, за что Саше Маркову отдельное спасибо!
В остальном каких-то важных изменений не было.
Я правильно понял, что наименование папки $pre_template_url в Public-templates (куда закачали bootstrap) должно совпадать с наименованием папки нашего скина в Smarty-templates?
Т.е. должно быть 1) в Public-templates: /assets/components/modxsite/templates/skins/имя-папки (здесь имя-папки- это значение параметра $pre_template_url) и 2) в Smarty-templates /core/components/modxsite/templates/skins/имя-папки (здесь имя-папки- это значение параметра modxSmarty.pre_template из настройки CMS)
Говоря короче, переменная $pre_template_urlиз файла layout.tpl нашего скина, равна значению в настройках CMS переменной modxSmarty.pre_template? — Если так, получается, что соответствие папок однозначное? И нельзя будет загруженную тему bootstrap из, скажем, «папки1» на паблике, используемую со скином в «папке1» на смарти, подключить к новосозданному скину в «папке2» на смарти. Какой тогда смысл разделения на Smarty и Public?
Какой тогда смысл разделения на Smarty и Public?
На минуточку, Смарти-шаблоны лежат в core/...., а core/ должна закрываться на просмотр извне. Как будут доступны паблик-файлы, если они будут лежать в закрытой папке? Исторически, серверные файлы компонентов лежат в core/components/my_component, а публичные в assets/componentns/my_component/
Николай, получается, основная (единственная?) причина такого разделения — это безопасность (ограничение доступа к файлам в core)?
Как будут доступны паблик-файлы..?
Не совсем понял, для кого или чего они должны быт доступны? Ведь только мы ими пользуемся на своем сайте.
И я думал, файлы bootstrap-темы не являются серверными файлами (или являются?). И по идее их можно было кинуть в нашу директорию со скином на смарти.
Не так?
это безопасность (ограничение доступа к файлам в core)?
Да.
И я думал, файлы bootstrap-темы не являются серверными файлами (или являются?). И по идее их можно было кинуть в нашу директорию со скином на смарти.
файлы bootstrap-темы — да, не являются, и должны быть доступны извне. А вот Смарти-шаблоны и т.п. в папке core/, которая закрыта.
файлы bootstrap-темы… должны быть доступны извне.
Для возможных автоматических обновлений? Или что-то другое?
Просто для запроса к веб-серверу извне :) То есть из браузера, к примеру. Полистайте инфу про основы работы веб-серверов. Браузер — это программка на стороне пользователя. Сайт ваш в ней не сидит (включая JS, CSS и т.п.). Чтобы получить эти файлы, браузер отправляет запросы на ваш веб-сервер, и веб-сервер (если файлы найдены и на их чтение есть права (в том числе права на запрос к данному разделу)) отдает ответ с содержимым файлов (или результатом выполнения скриптов). Вот CSS и JS с бутстрап-темы должны быть доступны для таких запросов. А вот Смарти-шаблоны в папке core/ нет. Конечно, если обратиться напрямую к смарти-шаблону, ничего как бы и не произойдет, потому что он должен выполняться в среде Smarty, но зато можно увидеть все содержимое шаблона, и посмотреть, к примеру, какие параметры он на себя принимает, чтобы передать их в процессор. Это уже угроза.
Понял. Спасибо за подробные разъяснения.
Здравствуйте. Я в общем новичок в modx. Не могли бы Вы набросать примерный список как вклиниваться в различные места шаблона своим расширением tpl наподобие кого как это указано для основного шаблона {extends "[main]layout.tpl"}. Невозможно кардинально изменить дизайн не переопределив классы самого элемента html.
Все очень просто: создаете свой файл-шаблон с таким же путем, как и оригинальный. К примеру, если вам надо расширить шаблон shop/basket/entity/index.tpl, то создаете такой же файл в своем скине и в нем прописываете расширение базового шаблона (в данном случае {extends file=«shop/basket/entity/index.tpl»}). Но расширять из расширяемого файла можно только блоки {block}. Если нет в нужном месте блока, то придется не расширять файл, а именно заменять (то есть тоже самое делаете, только копируете и меняете содержимое оригинального файла-шаблона).
Добрый день, а подробного туториала не ожидается? Полностью внедрить свои шаблоны.
А это разве не подробный туториал? Или вы предлагаете здесь провести уроки основ HTML, CSS и т.п.? На это уже есть интернет, эти технологии не мы придумали. И Smarty изучайте по официальной документации шаблонизатора. Мы рассказали только об особенностях реализации именно в нашей сборке и что как делать, а дальше уже изучаете конкретные технологии.
Ха, уже менюшку осилил, ща контактами займусь )) mag11.3apok.ru
Поправьте пожалуйста файл который расположен по пути shopmodx/inc/office/orders/index.tpl В самом низу у вас небольшая опечатка, последних два div надо закрыть, а не открывать и объявлять класс. А вообще всё просто классно.
<div class="row-fluid"> <div class="span12"> <table class="orders table table-bordered"> <tbody> <tr> <th class="title">№ заказа</th> <th class="title">Количество позиций</th> <th class="title">Количество товаров</th> <th class="title">Дата создания</th> <th class="title">Дата последнего изменения</th> <th class="title">Сумма</th> <th class="title">Статус</th> <th class="title">Действие</th> </tr> {foreach $result.object as $object} <tr class="{if $object.status_id==8}success{else if $object.status_id==7}error{/if}" > <td>{$object.id}</td> <td>{$object.positions}</td> <td>{$object.total}</td> <td>{$object.createdon}</td> <td>{$object.editedon}</td> <td>{$object.sum}</td> <td>{$object.status_str}</td> <td> {foreach $object.menu as $menu} <span class="action {$menu.handler}"> <a href="{$uri}?action={$menu.handler}&order_id={$object.id}">{$menu.text}</a> </span> {/foreach} </td> </tr> {/foreach} </tbody> </table> <div class="row-fluid"> <--------------- <div class="span12"> <---------------
Ага, поправил. Спасибо! Но вообще надо бы переверстать. Эта верстка еще под Bootstrap второй, а уже третий используется.
Шаблоны у меня сверстаны, но на чистом css, как лучше их внедрить?
В вашем случае, если у вас не будет использоваться на сайте bootsrtap, лучше сделать полную копию шаблона shopmodx (и в core, и в assets), и его уже переделывать под себя, так как у вас скорее всего будет сильно HTML-верстка изменена.
Ну вот, что-то вырисовывается, promo.kirovmeb.ru, сделал в общих чертах главную и каталог, где-то была инфа как поиск прикрутить
Карточка товара пока поехавшая joxi.ru/Q2KndEBsd91bmj, но я так понимаю, это будет поправлено? По поиску вот полезная статья.
Ок, спасибо. Карточку поправлю, не добрался еще до нее. Все делаю в свободное время, я просто мебель продаю.
После очистки корзины всплывает надпись с грамматической ошибкой «Козина успешно очищена»
На всех сайтах естественно
И конкретно у меня после обновления странички выводится текст ошибки в верхнем правом углу, где это можно отключить?
Спасибо! Исправили.
Какая именно ошибка?
[2015-02-09 21:40:50] (ERROR @ /index.php)
Array ( [0] => Не был указан ID заказа ) при обновлении корзины после очищения на всех сайтах эта надпись только в корзине, а у меня еще в левом верхнем углу вот это вывод
Проблема именно в момент очищения корзины, а после этого при переходе на другую страницу этой ошибки нет? Если ошибка выходит на всех страницах, возможно вы удаляли активные корзины в админке в управлении заказами. Если так, то необходимо сбросить все сессии, так как просто висит в сессии ID несуществующего заказа.
Второе: обновите модуль modxSmarty, если старый стоит. С большой долей вероятности должно помочь. Один из минусов процессоров в том, что у них нет собственного объекта обработки ошибок, они используют объект $modx->error, и если один процессор вернул ошибку и не выполнить сброс ошибок $modx->error->reset(), то все последующие процессоры на этой странице вернут ошибку. В новой версии modxSmarty добавлен сброс ошибок в смарти плагине processor.
Третье: в любом случае, скорее всего у вас старая версия сборки. Если обновить ее проблематично для вас и с этой ошибкой не справитесь, напишите мне доступы в админку сайта на почту n.lanets@modxclub.ru, я поправлю.
Сборка 2.5, в момент очищения все ок, после f5 эта фигня вылазит, так что можно ничего не делать, позже обновлюсь. Спасибо.
Аа, ну если F5 — так это все ОК. 1. Не надо нажимать F5 — это не действие, предусмотренное какой-то ссылкой на странице или типа того. 2. Обработка ошибки здесь — это норма. Попытка очистки несуществующей корзины — это ошибка, и ее надо обрабатывать. Другое дело, что вы видите системное сообщение на странице типа [2015-02-09 23:18:57] (ERROR @ /index.php)..., так это просто плагин Debug работает. Во-первых, он срабатывает только для суперюзеров, простым пользователям не будет выводиться подобное сообщение. Во-вторых, на продакшене этот плагин правильно отключать (он в категории modxSite).
подскажите, как прописывать картинки в CSS? вот так сейчас (не работает)
background-image: url(../../../Theme/Full/images/zoom.png);
пардон, разобрался. просто думал что туда тоже надо $pre_template_url
а в чанках как?
<a class="navbar-brand" href="#"><img src="{$pre_template_url}images/logo.png" alt="logo" /></a> <a class="navbar-brand" href="#"><img src="../images/logo.png" alt="logo" /></a>
так не работает.
сделал от корня
src="assets/components/modxsite/templates/skins/Skin/images/logo.png"
Пути к файлам, если относительные, формируются в CSS относительно адреса самого CSS файла, а не от корня сайта (если не прописано типа :url('/url....')). Это если прописан адрес в самом CSS. А если в HTML-коде, то формируется уже с учетом текущего УРЛа и тега <base>. В вашем случае правильней или использовать CSS-классы (для которых в CSS уже прописать путь к картинкам) или пропарсить код менюшки дополнительно. Пропишите вызов меню вот так:
{include "eval:{$modx->runSnippet("Wayfinder@MainMenu")}"}
Тогда Смарти дополнительно обработает Смарти-теги в полученном коде выполненного сниппета.
А еще в такой вызов можно дополнительно прописать параметры, к примеру вот так:
{include "eval:{$modx->runSnippet("Wayfinder@MainMenu")}" class="myClass" anotheAttr="myAttrData"}
Тогда в чанках вэйфайндера можно прописать в нужных местах теги {$class}, {$anotheAttr} и т.п., и они заменятся на переданные атрибуты.
Это не по религии. Абсолютные пути — злое Зло. Как же тогда скины переключаемые поддерживать?
этот чанк входит в копию набора параметров Wayfinder@MainMenu который сделан для нового скина.
Все равно не круто (это отцы-программисты заповедовали). Ниже я написал как лучше сделать. Но вам уже решать как что делать.
Готово на 90%, остались мелочи, регистрации не будет. мебель-эконом.рф/
ИМХО слишком много рамочек. Так лучше: joxi.ru/vAWD10pflZGWrW (просто в сайдбаре отступы между блоками добавить и все). Но в целом норм.
Печаль. На дворе 2015год, люди продолжают клепать не адаптивные шаблоны, потом удивлються чё их поисковики не любят, а Bootstrap нервно курит в сторонке. ))
Что-то вот очень сомневаюсь что поисковики сильно обращают внимание на адаптивность дизайна. Или есть пруффы? Если нету, то так уверенно и насмешливо не обязательно говорить. Красота в глазах смотрящего.
Адаптивность нужна там, где она нужна. Я не встречал интернет-магазинов с адаптивным дизайном. Шатура, столплит — крупные проекты без всякой адаптивности. Ну не будут люди покупать мебель со смартфона. На индексацию это тоже практически не влияет.
Я вижу рекомендации по оптимизации, но это не пруфф на то, что это хоть как-то существенно повлияет на позиции сайта. Долгое время и наш сайт был без адаптивного макета, и все равно у него позиции были хорошие в поисковиках. Да, конечно же какую-то долю это и может повлиять на ранжирование, но критериев ранжирования тысячи, и не думаю, что только наличие адаптивного дизайна существенно влияет на позиции.
P.S. Давайте не будем раздувать по этому поводу холивары. Каждый высказался, хватит. Если есть желание похоливарить на эту тему — создавайте отдельный топик.
Я думаю, что не все ещё знают, что к примеру у Google есть вполне чёткий критерий который влияет на выдачу. Это ответ сервера который должен быть не выше 200 миллисекунд. Что конечно же в значительной степени зависит от Вашего хостинга.
Да всё завязываем )) Дело в том, какой запрос Вы вбиваете в поисковик. Если напривер: modx То сайтов (серьёзных) подобной тематики априори мало. И хорошая выдача гарантирована. Если запрос более размыт по содержанию, то уже не факт быть на выдаче в 10-ке.
Да блин. Николай, только не сочти что издеваюсь или прикалываюсь. Из спортитвного интереса вбил в Google: modx. Какой-то там Безумкин с минишопом на 14 позиции, а modxclub с модхшопом на 15-й.
«Какой-то» — тут совсем не уместно. Я не разделяю многие его технологии, но есть много кто, кто разделяет, и его bezumkin dot ru появился гораздо раньше сайта нашего Клуба, и аудитория все-таки у него давно обширная, которую он в процессе и перенаправил на modx dot pro. Так что ничего удивительного.
Опять-таки, тема вообще не для этого топика. Полный оффтоп.
Народ как сделать каталог > подкаталог 1 > подкаталог 1.1 подкаталог 1.2 подкаталог 1.3 подкаталог 2 > подкаталог 2.1 подкаталог 2.2 подкаталог 2.3
Народ помогите где подкорректировать чтобы в меню вышел каталог с 2 уровнем.
каталог <ul> <li>подкаталог 1</li> <li>подкаталог 2</li> <li> <ul> <li>подкаталог 2.1</li> <li>подкаталог 2.2</li> </ul> </li> </ul>
Если вам многоуровневый надо вывести, можете просто Wayfinder использовать.
при сборке в ручную шаблон собирал чанками и сниппетами… раз два и готова без всяких изменений путей… а тут смарти изменить это, то и то… я уже запутался… по скринам кое-как понял как подключить, но блоки уже другие (2.7), и как в них подключать тоже не понял… в заблуждение вошел. Николай, обьясни мне пожалуйста будет ли разница в работоспособности (скорость может) того, что если шаблон страницы будет построен чанками — сниппетами и того, что промучаться со смарти, чтобы подключить шаблон..,? Я конечно раньше в своих разработках по началу использовал смарти, но потом его вовсе убрал, заменив на другой шаблонизатор… но это другая история…
Безусловно разница в скорости есть. Но есть и другие аспекты, к примеру, попробуйте на чанках-сниппетах что-то в цикле набить. Надо будет в сниппете набивать чанки, а этот сниппет в другом месте вызывать и т.д. и т.п. А в смарти это просто в блоке {foreach} фигачится. А еще нет расширяемости ни сниппетов, ни чанков. В общем, много всего пересказывать не буду, много раз уже говорилось. Повторюсь, что разница есть и она большая.
Спасибо, этого достаточно для убеждения =)

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