Umicms - Вклад участника [ru]

Участник:Zloydemon

2018-05-07T21:36:32Z

Zloydemon:

<h2>Партнер UMI.CMS<br>
Путилин Дмитрий</h2>

Опубликованные статьи
== Май: ==
<ul>
<li>[[Мобильное меню]]</li>
<li>[[Адаптивные вкладки (Responsive tabs)]]</li>
</ul>

Категория:Верстка в PHP

2018-05-07T21:14:16Z

Zloydemon: Новая страница: «'''Документация:''' {{Индекс категории}}»

'''Документация:'''

{{Индекс категории}}

Виды ключей

2018-05-07T21:04:47Z

Zloydemon:

'''Актуально для версии 2.9 и выше'''

UMI.CMS использует 6 видов ключей: '''лицензионный''', '''доменный''', '''девелоперский''', '''маркет''', '''демо''', '''nfr'''.

== Лицензионный ключ ==
[[Лицензионный ключ]] используется для активации системы. Он высылается в письме на указанную вами почту, при покупке коммерческой лицензии. Более он нигде не сохраняется. Если вы по какой либо причине утратили ваш лицензионный ключ обратитесь в коммерческий отдел на sales@umisoft.ru

== Доменный ключ ==
Доменный ключ можно увидеть в модуле конфигурация. Его, как и лицензионный ключ, можно использовать для обращения в Службу Заботы на странице www.umi-cms.ru/support

== Девелоперский ключ ==
Девелоперский ключ используется для паралельной разработки "живого" сайта на тестовом домене, чтобы не нарушать деятельности сайта.
Получить его можно по запросу в коммерческий отдел Umisoft. При обращении нужно указать следующую информацию:<br />
1. Активированный коммерческий ключ<br />
2. Ссылку на phpinfo находящийся на том сервере и домене который будет использоваться для разработки.
<br /><br />
<div style="border: 1px dashed black; width: 90%; margin: 0 auto; padding: 5px 10px;">
<b>На заметку</b>
<div style="padding: 0 5px 5px 5px;">
Для того, чтобы создать файл phpinfo необходимо:<br />
1. Создать текстовый файл<br />
2. Открыть его блокнотом<br />
3. Сделать запись <?php phpinfo(); ?><br />
4. Сохранить файл на сервере в корневой директории с именем phpinfo.php <br />
5. Проверить, что файл доступен по запросу http://developer.domain.ru/phpinfo.php<br />
</div>
</div>
== NFR ==
По своей сути NFR ключ является бессрочной триальной версией выдаваемой студии или фрилансеру. Ключ может быть привязан только к поддомену сайта студии или фрилансера. Используется для разработки сайтов заказчика. В последущем после переноса можно использовать NFR ключ повторно.
<br>

== Market ==
Ключ выдается вебстудии или фрилансеру для развертывания системы и разработки решений для UMI Market<br>

== Демо ==
Демо ключ выдается любому человеку решившему проверить работу и возможности системы. Срок действия ключа 30 дней. Ключ можно получить онлайн при установке системы. <br>

[[category:Лицензионные ключи]]

Участник:Zloydemon

2018-05-07T19:35:06Z

Zloydemon: Новая страница: «<h2>Партнер UMI.CMS<br> Путилин Дмитрий</h2> Опубликованные статьи == Май: == <uL> <li>Мобильное меню<…»

<h2>Партнер UMI.CMS<br>
Путилин Дмитрий</h2>

Опубликованные статьи
== Май: ==
<uL>
<li>[[Мобильное меню]]</li>
<li>[[Адаптивные вкладки (Responsive tabs)]]</li>
</ul>

Мобильное меню

2018-05-07T11:12:06Z

Zloydemon: Новая страница: «Мы будем делать мобильное меню на основе menu draw.<br> Для этого нам понадобится следующее – не…»

Мы будем делать мобильное меню на основе menu draw.<br>
Для этого нам понадобится следующее – небольшой файл с кодом вызова меню, стиль меню.<br>
'''Важно!''' Меню будет вызываться из отдельного файла по причине возможности существования 2х и более шаблонов для страниц сайта.<br>
Порядок работы.<br>
Создадим меню в модуле Меню (для примера идентификатор меню выбран как verxm)<br>
Напишем отдельный xsl файл для обработки меню. Назовем его mobmenu.xsl (файл создается в папке \templates\имя шаблона\xslt\layouts) <br>
Содержимое файла будет следующим<br>
<source lang="php">
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet SYSTEM "ulang://i18n/constants.dtd:file">

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template name="mmenu1">
<nav>
<input type="checkbox" id="btn-menu" />
<label for="btn-menu"> Меню</label>
<ul class="list-menu">
<xsl:apply-templates select="document('udata://menu/draw/verxm')/udata" mode="info-pages-head" />
</ul>
</nav>
</xsl:template>
</xsl:stylesheet>
</source>
Далее в файле стилей нашего сайта пропишем стиль меню
<source lang="css">
/* mobile menu */
.list-menu{
display: flex;
list-style: none;
}
.list-menu > li > a{
color: #000;
display: block;
padding: 5px 15px;
}
.list-menu > li > a:hover{
background: #fff;
}

#btn-menu{
display: none;
}
#btn-menu + label{
display: none;
position: relative;
color: #000;
height: 20px;
z-index: 1;
cursor: pointer;
}
#btn-menu + label:before{
content: '\f0c9';
display: inline-block;
font-family:'FontAwesome';
font-size: 22px;
}
#btn-menu:checked + label:before{
content: '\f00d';
color: #f00;
}

@media screen and (max-width: 800px) {
input.button.search {left: 5px;
position: absolute;
margin-top: -27px;}
#btn-menu + label{
display: inline-block;
font-weight: 600;
font-size: 21px;

}
#btn-menu + label + .list-menu{
display: none;
}
#btn-menu:checked + label + .list-menu{
display: block;
margin-top: 20px;

}
nav{
background: #fcd62d;
padding: 15px;
display:block!important;
position: relative;
top: 0;
width: 100%;
z-index: 99;
}
ul.list-menu li a {
padding: 10 20;
color: black;
text-decoration: none;
font-weight: 600;
width: 100%;
display: block;
text-transform: uppercase;
}

ul.list-menu li a:hover {color: white}
ul.list-menu li:hover {background: #0f55aa;}
}
nav {display:none}
</source>
<br>
После чего мы можем воспользоваться вызовом нашего меню в том месте шаблона где нам требуется<br>
<source lang="php">
<xsl:call-template name="mmenu1" />
</source><br>
''Заметка. Вызов меню можно заключить в div для использования дополнительных действий, к примеру абсолютного или фиксированного позиционирования.''<br>
'''Важно!''' Не забываем подключить созданный файл в наш шаблон
<source lang="php">
<xsl:include href="layouts/mobmenu.xsl" />
</source><br>
'''ВАЖНО!''' Данная сборка делалась на основе demodizzy (стандартного демо шаблона), если у вас отсутствует этот шаблон, было проведено обновление системы с версии Lite или у вас собственный шаблон то убедитесь, что содержимое файла \templates\ваш шаблон\xslt\modules\menu\common.xsl соответствует указанному<br>
<source lang="php">
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet SYSTEM "ulang://mobile/i18n/constants.dtd:file">

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:umi="http://www.umi-cms.ru/TR/umi">


<xsl:template match="udata[@module = 'menu']" mode="info-pages-head">
<ul>
<xsl:apply-templates select="item" mode="info-pages-head" />

</ul>
</xsl:template>

<xsl:template match="udata[@module = 'menu']/item" mode="info-pages-head">
<li>
<a href="{@link}">
<xsl:value-of select="node()" />
</a>
</li>
</xsl:template>

</xsl:stylesheet>
</source><br>
И что данный файл подключен в основном шаблоне<br>
<source lang="php">
<xsl:include href="modules/menu/common.xsl" />
</source> <br>
[[category:Верстка в XSLT]]

Адаптивные вкладки (Responsive tabs)

2018-05-07T09:50:36Z

Zloydemon: Новая страница: «== Responsive Tabs (Адаптивные вкладки) для страницы контента или товара. ==<br> Для создания вкладок…»

== Responsive Tabs (Адаптивные вкладки) для страницы контента или товара. ==<br>

Для создания вкладок нам потребуется совсем немного – 2 скрипта и небольшой код css.<br>
Требуемые файлы jquery.responsiveTabs.js, tbs.js, styletab.css<br>
Все файлы есть в приложенном архиве. [[Файл:tabs.zip]]<br>
Подготовка.<br>
В корне сайта в папке js создаем подпапку tabs, в эту папку заливаем файлы скриптов (jquery.responsiveTabs.js, tbs.js) используя ftp или файл менеджер хостинга.<br>
Файл styletabs.css заливаем в папку со стилями нашего шаблона (путь заливки \templates\имя шаблона\css)<br>
На этом подготовка окончена.<br>
Открываем на редактирование шаблон страницы или товара и подключаем загруженные файлы<br>
<source lang="php">
<script type="text/javascript" src="/js/tabs/jquery.responsiveTabs.js"></script>
<script type="text/javascript" src="/js/tabs/tbs.js"></script>
<link rel="stylesheet" href="/templates/имя шаблона/css/styletab.css" />
</source><br>
Подключение размещать перед тегом </head> (или строго после подключения EiP)<br>
'''ВАЖНО!''' Если требуется вывести вкладки только на избранных страницах для которых написан отдельный внутренний шаблон, то подключение стилей можно сделать не в тегах <head></head>, а в теле шаблона<br>
Осталось только вывести сами вкладки на странице<br>
<source lang="html4strict">
<div id="horizontalTab">
<ul>
<li><a href="#tab-1">Название вкладки 1</a></li>
<li><a href="#tab-2">Название вкладки 2</a></li>
<li><a href="#tab-3">Название вкладки 3</a></li>
</ul>

<div id="tab-1">
Содержимое вкладки 1
</div>
<div id="tab-2">
Содержимое вкладки 2
</div>
<div id="tab-3">
Содержимое вкладки 3
</div>
</div>
</source><br>
В содержимом вкладки можно вывести любой контент по выбору <br>
– для контента: фотоальбомы, дополнительные поля (вариант страница о компании вкладки – адрес, условия доставки, условия оплаты)<br>
- для товара варианты вкладок – характеристики, особенности, отзывы<br>
Использовать данный метод вывода вкладок можно в шаблонизаторе любого типа tpl xslt или php.<br>

Результат<br>
На широком экране<br>
[[Файл:tab1.jpg]]<br>
На мобильном устройстве<br>
[[Файл:tab2.jpg]]<br>
[[Файл:tab3.jpg]]<br>
<br>
Актуально для версий 2.9.х и выше

[[category:Верстка в XSLT]]

Файл:Tab3.jpg

2018-05-07T09:48:20Z

Zloydemon:

Файл:Tab2.jpg

2018-05-07T09:48:02Z

Zloydemon:

Файл:Tab1.jpg

2018-05-07T09:47:33Z

Zloydemon:

Файл:Tabs.zip

2018-05-07T09:33:41Z

Zloydemon: