StonnieAnnie 20 января 2015 11 60
Всем привет! Читали статью про новую сборку? Хотите сменить скин сайта, но не совсем поняли как это сделать? Сегодня я подробно расскажу как это сделать.

После того как вы развернули нашу сборку, магазин выглядит так:



Простой скин, а нам хочется, чтобы оформление отличалось от стандартного. Для этого надо всего лишь установить новую тему 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
60 комментариев
Fi1osof1
Fi1osof 20 января 2015г в 17:46 #
К слову, в новой версии сборки большая часть чанков из технических страниц сайта (регистрация и т.п.) перенесена в смарти-шаблоны, чтобы можно было в свой скине править их, не трогая содержимого самих страниц и чанки не трогая. Например: шаблон обновления профиля. Это все тот же сниппет Login, только уже на смарти. Надо отметить, что это не только возможность менять оформление, но и более правильная логика. К примеру, давайте глянем старую версию вот эту строчку. Интересует именно это: value="[[+email]]". В данном случае в значение попадает именно текущий емейл пользователя, а не то, что передается в запросе, поэтому если с емейлом что-то не так (к примеру, он уже занят), то мы получим ошибку от логина, но в значении поля по прежнему будет емейл текущий, а не тот, что пользователь прописал. ИМХО это не юзабельно. Я должен видеть какой я ввел емейл и что с ним не так. Теперь это так.

Еще важное дополнение: в управлении заказами теперь в строчке заказа выводится сумма заказа. Мелочь, но как-то я все упускал это и не доделывал.

Еще поправил modCaptcha и процессор обратной связи. Так как у процессоров нет собственных объектов для ошибок, все фигачится в объект $modx->error, и если вы вызвали какой-то процессор, который добавил ошибку, то все остальные процессоры после него обязательно будут возвращать ошибки. По этой причине в смарти-плагин processor добавлен сброс ошибок (раньше не редки случаи были перекрестных ошибок), и именно по этой причине в форме обратной связи правильный ввод каптчи не учитывался, пока были ошибки в других критичных полях. Сейчас это тоже исправлено.

Ну а еще многие формы на сайте приведены в порядок стилистически, за что Саше Маркову отдельное спасибо!

В остальном каких-то важных изменений не было.
p
ptnz 21 января 2015г в 03:56 #
Я правильно понял, что наименование папки $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?
Fi1osof1
Fi1osof 21 января 2015г в 13:29 #
Какой тогда смысл разделения на Smarty и Public?
На минуточку, Смарти-шаблоны лежат в core/...., а core/ должна закрываться на просмотр извне. Как будут доступны паблик-файлы, если они будут лежать в закрытой папке? Исторически, серверные файлы компонентов лежат в core/components/my_component, а публичные в assets/componentns/my_component/
p
ptnz 21 января 2015г в 14:35 #
Николай, получается, основная (единственная?) причина такого разделения — это безопасность (ограничение доступа к файлам в core)?

Как будут доступны паблик-файлы..?

Не совсем понял, для кого или чего они должны быт доступны? Ведь только мы ими пользуемся на своем сайте.

И я думал, файлы bootstrap-темы не являются серверными файлами (или являются?). И по идее их можно было кинуть в нашу директорию со скином на смарти.

Не так?
Fi1osof1
Fi1osof 21 января 2015г в 14:42 #
это безопасность (ограничение доступа к файлам в core)?
Да.

И я думал, файлы bootstrap-темы не являются серверными файлами (или являются?). И по идее их можно было кинуть в нашу директорию со скином на смарти.
файлы bootstrap-темы — да, не являются, и должны быть доступны извне. А вот Смарти-шаблоны и т.п. в папке core/, которая закрыта.
p
ptnz 21 января 2015г в 18:47 #
файлы bootstrap-темы… должны быть доступны извне.

Для возможных автоматических обновлений? Или что-то другое?
Fi1osof1
Fi1osof 21 января 2015г в 19:38 #
Просто для запроса к веб-серверу извне :) То есть из браузера, к примеру. Полистайте инфу про основы работы веб-серверов. Браузер — это программка на стороне пользователя. Сайт ваш в ней не сидит (включая JS, CSS и т.п.). Чтобы получить эти файлы, браузер отправляет запросы на ваш веб-сервер, и веб-сервер (если файлы найдены и на их чтение есть права (в том числе права на запрос к данному разделу)) отдает ответ с содержимым файлов (или результатом выполнения скриптов). Вот CSS и JS с бутстрап-темы должны быть доступны для таких запросов. А вот Смарти-шаблоны в папке core/ нет. Конечно, если обратиться напрямую к смарти-шаблону, ничего как бы и не произойдет, потому что он должен выполняться в среде Smarty, но зато можно увидеть все содержимое шаблона, и посмотреть, к примеру, какие параметры он на себя принимает, чтобы передать их в процессор. Это уже угроза.
p
ptnz 21 января 2015г в 19:55 #
Понял. Спасибо за подробные разъяснения.
Fi1osof1
Fi1osof 21 января 2015г в 20:09 #
Пожалуйста.
G
Ganaman 21 января 2015г в 21:21 #
Здравствуйте. Я в общем новичок в modx. Не могли бы Вы набросать примерный список как вклиниваться в различные места шаблона своим расширением tpl наподобие кого как это указано для основного шаблона {extends "[main]layout.tpl"}. Невозможно кардинально изменить дизайн не переопределив классы самого элемента html.
Fi1osof1
Fi1osof 21 января 2015г в 21:45 #
Все очень просто: создаете свой файл-шаблон с таким же путем, как и оригинальный. К примеру, если вам надо расширить шаблон shop/basket/entity/index.tpl, то создаете такой же файл в своем скине и в нем прописываете расширение базового шаблона (в данном случае {extends file=«shop/basket/entity/index.tpl»}). Но расширять из расширяемого файла можно только блоки {block}. Если нет в нужном месте блока, то придется не расширять файл, а именно заменять (то есть тоже самое делаете, только копируете и меняете содержимое оригинального файла-шаблона).
y
yurokr1 23 января 2015г в 16:01 #
Добрый день, а подробного туториала не ожидается? Полностью внедрить свои шаблоны.
Fi1osof1
Fi1osof 23 января 2015г в 18:16 #
А это разве не подробный туториал? Или вы предлагаете здесь провести уроки основ HTML, CSS и т.п.? На это уже есть интернет, эти технологии не мы придумали. И Smarty изучайте по официальной документации шаблонизатора. Мы рассказали только об особенностях реализации именно в нашей сборке и что как делать, а дальше уже изучаете конкретные технологии.
y
yurokr1 29 января 2015г в 17:33 #
Шаблоны у меня сверстаны, но на чистом css, как лучше их внедрить?
Fi1osof1
Fi1osof 29 января 2015г в 17:39 #
В вашем случае, если у вас не будет использоваться на сайте bootsrtap, лучше сделать полную копию шаблона shopmodx (и в core, и в assets), и его уже переделывать под себя, так как у вас скорее всего будет сильно HTML-верстка изменена.
y
yurokr1 07 февраля 2015г в 15:55 #
Ну вот, что-то вырисовывается, promo.kirovmeb.ru, сделал в общих чертах главную и каталог, где-то была инфа как поиск прикрутить
Fi1osof1
Fi1osof 07 февраля 2015г в 16:06 #
Карточка товара пока поехавшая joxi.ru/Q2KndEBsd91bmj, но я так понимаю, это будет поправлено?
По поиску вот полезная статья.
y
yurokr1 07 февраля 2015г в 16:43 #
Ок, спасибо. Карточку поправлю, не добрался еще до нее. Все делаю в свободное время, я просто мебель продаю.
Fi1osof1
Fi1osof 07 февраля 2015г в 17:41 #
Ясно. ОК.
y
yurokr1 22 февраля 2015г в 16:04 #
Готово на 90%, остались мелочи, регистрации не будет. мебель-эконом.рф/
Fi1osof1
Fi1osof 22 февраля 2015г в 16:31 #
ИМХО слишком много рамочек. Так лучше: joxi.ru/vAWD10pflZGWrW (просто в сайдбаре отступы между блоками добавить и все).
Но в целом норм.
G
Ganaman 22 февраля 2015г в 18:59 #
Печаль. На дворе 2015год, люди продолжают клепать не адаптивные шаблоны, потом удивлються чё их поисковики не любят, а Bootstrap нервно курит в сторонке. ))
Fi1osof1
Fi1osof 22 февраля 2015г в 19:42 #
Что-то вот очень сомневаюсь что поисковики сильно обращают внимание на адаптивность дизайна. Или есть пруффы? Если нету, то так уверенно и насмешливо не обязательно говорить. Красота в глазах смотрящего.
Fi1osof1
Fi1osof 22 февраля 2015г в 20:32 #
Я вижу рекомендации по оптимизации, но это не пруфф на то, что это хоть как-то существенно повлияет на позиции сайта. Долгое время и наш сайт был без адаптивного макета, и все равно у него позиции были хорошие в поисковиках.
Да, конечно же какую-то долю это и может повлиять на ранжирование, но критериев ранжирования тысячи, и не думаю, что только наличие адаптивного дизайна существенно влияет на позиции.

P.S. Давайте не будем раздувать по этому поводу холивары. Каждый высказался, хватит. Если есть желание похоливарить на эту тему — создавайте отдельный топик.
G
Ganaman 22 февраля 2015г в 20:42 #
Да всё завязываем )) Дело в том, какой запрос Вы вбиваете в поисковик. Если напривер: modx
То сайтов (серьёзных) подобной тематики априори мало. И хорошая выдача гарантирована. Если запрос более размыт по содержанию, то уже не факт быть на выдаче в 10-ке.
G
Ganaman 22 февраля 2015г в 21:06 #
Да блин. Николай, только не сочти что издеваюсь или прикалываюсь. Из спортитвного интереса вбил в Google: modx. Какой-то там Безумкин с минишопом на 14 позиции, а modxclub с модхшопом на 15-й.
Fi1osof1
Fi1osof 22 февраля 2015г в 21:11 #
«Какой-то» — тут совсем не уместно. Я не разделяю многие его технологии, но есть много кто, кто разделяет, и его bezumkin dot ru появился гораздо раньше сайта нашего Клуба, и аудитория все-таки у него давно обширная, которую он в процессе и перенаправил на modx dot pro. Так что ничего удивительного.

Опять-таки, тема вообще не для этого топика. Полный оффтоп.
G
Ganaman 22 февраля 2015г в 20:33 #
Я думаю, что не все ещё знают, что к примеру у Google есть вполне чёткий критерий который влияет на выдачу. Это ответ сервера который должен быть не выше 200 миллисекунд. Что конечно же в значительной степени зависит от Вашего хостинга.
y
yurokr1 22 февраля 2015г в 20:16 #
Адаптивность нужна там, где она нужна. Я не встречал интернет-магазинов с адаптивным дизайном. Шатура, столплит — крупные проекты без всякой адаптивности. Ну не будут люди покупать мебель со смартфона. На индексацию это тоже практически не влияет.
G
Ganaman 23 января 2015г в 19:07 #
Ха, уже менюшку осилил, ща контактами займусь )) mag11.3apok.ru
Fi1osof1
Fi1osof 23 января 2015г в 19:34 #
:)
G
Ganaman 25 января 2015г в 19:45 #
Поправьте пожалуйста файл который расположен по пути 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">                     <---------------
Fi1osof1
Fi1osof 25 января 2015г в 21:36 #
Ага, поправил. Спасибо! Но вообще надо бы переверстать. Эта верстка еще под Bootstrap второй, а уже третий используется.
y
yurokr1 09 февраля 2015г в 15:20 #
После очистки корзины всплывает надпись с грамматической ошибкой «Козина успешно очищена»
y
yurokr1 09 февраля 2015г в 15:21 #
На всех сайтах естественно
y
yurokr1 09 февраля 2015г в 15:24 #
И конкретно у меня после обновления странички выводится текст ошибки в верхнем правом углу, где это можно отключить?
Fi1osof1
Fi1osof 09 февраля 2015г в 21:05 #
Какая именно ошибка?
y
yurokr1 09 февраля 2015г в 21:47 #
[2015-02-09 21:40:50] (ERROR @ /index.php)

Array
(
[0] => Не был указан ID заказа
)
при обновлении корзины после очищения на всех сайтах эта надпись только в корзине, а у меня еще в левом верхнем углу вот это вывод
Fi1osof1
Fi1osof 09 февраля 2015г в 21:57 #
Проблема именно в момент очищения корзины, а после этого при переходе на другую страницу этой ошибки нет? Если ошибка выходит на всех страницах, возможно вы удаляли активные корзины в админке в управлении заказами. Если так, то необходимо сбросить все сессии, так как просто висит в сессии ID несуществующего заказа.

Второе: обновите модуль modxSmarty, если старый стоит. С большой долей вероятности должно помочь. Один из минусов процессоров в том, что у них нет собственного объекта обработки ошибок, они используют объект $modx->error, и если один процессор вернул ошибку и не выполнить сброс ошибок $modx->error->reset(), то все последующие процессоры на этой странице вернут ошибку. В новой версии modxSmarty добавлен сброс ошибок в смарти плагине processor.

Третье: в любом случае, скорее всего у вас старая версия сборки. Если обновить ее проблематично для вас и с этой ошибкой не справитесь, напишите мне доступы в админку сайта на почту n.lanets@modxclub.ru, я поправлю.
y
yurokr1 09 февраля 2015г в 22:16 #
Сборка 2.5, в момент очищения все ок, после f5 эта фигня вылазит, так что можно ничего не делать, позже обновлюсь. Спасибо.
Fi1osof1
Fi1osof 09 февраля 2015г в 22:22 #
Аа, ну если F5 — так это все ОК. 1. Не надо нажимать F5 — это не действие, предусмотренное какой-то ссылкой на странице или типа того. 2. Обработка ошибки здесь — это норма. Попытка очистки несуществующей корзины — это ошибка, и ее надо обрабатывать. Другое дело, что вы видите системное сообщение на странице типа [2015-02-09 23:18:57] (ERROR @ /index.php)..., так это просто плагин Debug работает. Во-первых, он срабатывает только для суперюзеров, простым пользователям не будет выводиться подобное сообщение. Во-вторых, на продакшене этот плагин правильно отключать (он в категории modxSite).
StonnieAnnie1
StonnieAnnie 09 февраля 2015г в 19:34 #
Спасибо! Исправили.
C
Comp.8bit 12 февраля 2015г в 06:51 #
подскажите, как прописывать картинки в CSS?
вот так сейчас (не работает)
background-image: url(../../../Theme/Full/images/zoom.png);
C
Comp.8bit 12 февраля 2015г в 07:45 #
пардон, разобрался. просто думал что туда тоже надо $pre_template_url
C
Comp.8bit 12 февраля 2015г в 09:38 #
а в чанках как?
<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>

так не работает.
C
Comp.8bit 12 февраля 2015г в 10:53 #
сделал от корня
src="assets/components/modxsite/templates/skins/Skin/images/logo.png"
Fi1osof1
Fi1osof 12 февраля 2015г в 10:58 #
Это не по религии. Абсолютные пути — злое Зло. Как же тогда скины переключаемые поддерживать?
C
Comp.8bit 12 февраля 2015г в 11:02 #
этот чанк входит в копию набора параметров Wayfinder@MainMenu который сделан для нового скина.
Fi1osof1
Fi1osof 12 февраля 2015г в 11:04 #
Все равно не круто (это отцы-программисты заповедовали). Ниже я написал как лучше сделать. Но вам уже решать как что делать.
C
Comp.8bit 12 февраля 2015г в 11:13 #
аминь )
Fi1osof1
Fi1osof 12 февраля 2015г в 10:55 #
Пути к файлам, если относительные, формируются в 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} и т.п., и они заменятся на переданные атрибуты.
В
Владик Кузьмин 08 апреля 2015г в 22:10 #
Народ как сделать
каталог > подкаталог 1 > подкаталог 1.1
подкаталог 1.2
подкаталог 1.3
подкаталог 2 > подкаталог 2.1
подкаталог 2.2
подкаталог 2.3
В
Владик Кузьмин 08 апреля 2015г в 22:15 #
Народ помогите где подкорректировать чтобы в меню вышел каталог с 2 уровнем.
каталог
<ul>
    <li>подкаталог 1</li>
    <li>подкаталог 2</li>
    <li>
            <ul>
                <li>подкаталог 2.1</li>
                <li>подкаталог 2.2</li>
            </ul>
    </li>
</ul>
Fi1osof1
Fi1osof 09 апреля 2015г в 09:27 #
Если вам многоуровневый надо вывести, можете просто Wayfinder использовать.
r
red_style 01 декабря 2015г в 04:17 #
при сборке в ручную шаблон собирал чанками и сниппетами… раз два и готова без всяких изменений путей… а тут смарти изменить это, то и то… я уже запутался… по скринам кое-как понял как подключить, но блоки уже другие (2.7), и как в них подключать тоже не понял… в заблуждение вошел.
Николай, обьясни мне пожалуйста будет ли разница в работоспособности (скорость может) того, что если шаблон страницы будет построен чанками — сниппетами и того, что промучаться со смарти, чтобы подключить шаблон..,?
Я конечно раньше в своих разработках по началу использовал смарти, но потом его вовсе убрал, заменив на другой шаблонизатор… но это другая история…
Fi1osof1
Fi1osof 01 декабря 2015г в 11:16 #
Безусловно разница в скорости есть. Но есть и другие аспекты, к примеру, попробуйте на чанках-сниппетах что-то в цикле набить. Надо будет в сниппете набивать чанки, а этот сниппет в другом месте вызывать и т.д. и т.п. А в смарти это просто в блоке {foreach} фигачится. А еще нет расширяемости ни сниппетов, ни чанков.
В общем, много всего пересказывать не буду, много раз уже говорилось. Повторюсь, что разница есть и она большая.
r
red_style 01 декабря 2015г в 17:44 #
Спасибо, этого достаточно для убеждения =)
Fi1osof1
Fi1osof 01 декабря 2015г в 18:09 #
Не за что!
Авторизуйтесь или зарегистрируйтесь (можно через соцсети ), чтобы оставлять комментарии.