Блог
В структуре шаблонов новой версии движка довольно много изменений. Шаблоны, работающие на Elite-Board 2.3 с новой версией несовместимы, но их можно модифицировать по инструкции. Далее подробно описаны все изменения
Шаблоны eco, aqua, flame обновлены и входят в базовый дистрибутив скрипта. Появился новый шаблон - neo. Посмотреть на шаблоны можно здесь или на тестовом сайте. Шаблон espresso больше не поддерживается.
Инструкция по миграции шаблонов Elite-Board с версии 2.3.191014 на версию 3.0.200218
1. Копируем файлы
Cкрипты и стили:
- assets/css/fu/* - стили плагина мультизагрузки файлов
- assets/css/img/loading.gif, assets/css/img/progressbar.gif - картинки для этих стилей
- assets/css/jquery-ui.css, assets/js/jquery.ui.widget.js - библиотека и стили jQuery UI
- assets/js/js/main_libs.js - сюда добавилась библиотека jQuery UI
- assets/js/script.js - сюда добавилось много скриптов для интерфейсов сайта, их можно отследить по diff файлу или просто скопировать файл как есть
Новые html шаблоны
- block_shop.html - блок с соцсетями магазина
- block_shop_top.html - верхник блок с заголовком и баннером магазина
- fileupload.html - шаблона интерфейса загрузки файлов
- premium.html - блок с предложением заказать платную услугу после публикации объявления (премиум блок)
- pwa.html - подключение скриптов для работы сайта в режиме PWA-приложения
2. В add.html, add2.html подключаем блок с предложением премиум-услуг, который появится после публикации объявления
{%include file='premium.html'%}
3. В style.css добавляем новые стили для отображения диапазона цен и числовых значений в слайдере поисковой формы, списков автокомплита, баннеров магазина
.input-range input {
font-size: 11px;
height: 13px !important;
width: 70px;
border-radius: 3px;
border: 1px solid silver;
color: #787878;
text-align: center;
}
.input-range .to {
margin-left: 115px;
}
.rates-range .rate {
border: 1px solid silver;
display: inline-block;
font-size: 11px;
line-height: normal;
padding: 2px;
width: auto;
border-radius: 3px;
cursor: pointer;
}
.rates-range .rate.active {
border-color: #16A085;
background-color: #16A085;
color: white;
}
.input-range input:focus {
border-color: #16a085;
color: #555;
}
.info-row .edit a{
color: #9a9a9a;
text-decoration: underline;
}
.info-row .edit a:hover{
text-decoration: none;
}
.slider-disabler {
font-weight: normal;
}
.slider-disabler input {
vertical-align: -2px;
}
.slider-disabled{
pointer-events: none;
opacity: 0.4;
}
.autocomplete-suggestions .autocomplete-suggestion::after {
content: "\e814";
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
margin-bottom: 10px;
}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
}
.nav-shop > li > a {
padding: 5px 8px;
}
.block_shop .title-2, .shop_top_phone {
text-shadow: 1px 1px 2px black;
font-size: 20px;
font-weight: bold;
color: white;
border-bottom: 0;
margin-bottom: 0px;
}
.shop_top_phone {
text-align: right;
}
.shop_top_phone a, .top_shop_link{
color: white;
}
.top_shop_link{
text-shadow: 1px 1px 2px black;
}
.menu-rates{
left: 60px;
width: 200px;
}
.in_title{
font-size: 18px;
color: #515151;
}
.in_title p{
margin-bottom: 0px;
}
.social_top a{
margin-right: 10px;
text-shadow: 1px 1px 2px black;
color: white;
font-weight: normal;
font-size: 13px;
}
.social_top a:hover{
color:#FA7722;
}
.item-price {
font-size: 24px;
line-height: 28px;
white-space: nowrap;
display: block;
word-spacing: -3px;
}
.item-price .currency {
margin-right: 3px;
color: #828282;
}
.menu-rates .currency {
font-weight: normal;
color: #828282;
}
.badge .currency {
margin-right: 1px;
color: silver;
}
.make-grid .category{
display: none;
}
.pricetag .currency{
margin-right: 2px;
}
.suggestion_cont{
position: relative;
}
.suggestion {
position: absolute;
width: 400px;
max-height: 300px;
z-index: 9999;
top: -5px;
background: white;
overflow-y: scroll;
display: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 3px;
}
.suggestion div {
border-bottom: 1px solid #f0f0f0;
margin-top: 2px;
margin-bottom: 2px;
padding-bottom: 2px;
}
.suggestion div:hover, .shovered {
background-color: #fffdd1;
cursor: pointer;
}
.suggetion_item:last-child {
border: 0;
padding-bottom: 2px;
}
.menu-rates > li > a:hover, .menu-rates > li > a:focus {
background-color:#81b7e6;
}
4. В block_promo.html меняем переменные:
- новая ссылка на объявление теперь $message.lnk_full
- ссылка на первую картинку $message.fields.i.0.ts
Для отображение цен используем модификатор currency
$message.fields.p.0.value.charcode|currency:$message.fields.p.0.value.num:$message.fields.p.0.value.txt
5. В блоке поиска block_search.html добавим класс autocomplete-cat для привязки плагина автокомплита к текстовому полю
6. В меню ЛК block_user.html добавляем ссылку для загрузки баннеров в магазин users/shop/?act=images
7. В body.html меняем условие $smarty.get.cat.0 == $smarty.const.MESSAGES на $modtype == 'msg' и добавляем текст из сеомодуля
{%if $seomodule.info%}
{%$seomodule.info%}
{%/if%}
8. В fields.html много изменений
Определена js переменная для API ключа яндекс карт $settings.yaapi
Подтипы строковых полей БД $field.type_string теперь заменены на отдельные типы полей БД $field.type
- 'v' - простая строка
- 'n' - номер телефона
- 'u' - адрес сайта
- 'g' - целое число
- 'l' - дробное число
Другие типы остались как раньше
- 't' - произвольный текст
- 'y' - ролик на youtube
- j' - метка на карте
- 's' - список select
- 'r' - список radio
- 'c' - список checkbox
- 'p' - цена
- 'i' - фото
- 'f' - произвольные файлы
Полностью переписан интерфейс загрузки картинок и произвольных файлов внутри условия if $field.type == 'f' || $field.type == 'i'
9. В подвале footer.html подключаем стили jquery ui - assets/css/jquery-ui.css
добавляем библиотеки для push уведомлений
{%if $settings.push%}
<script type="text/javascript" src="//www.gstatic.com/firebasejs/3.6.8/firebase.js"></script>
<script type="text/javascript" src="{%$settings.path%}firebase_subscribe.js"></script>
{%/if%}
Условие для страниц объявлений меняем на $modtype == 'msg'
Подключаем шаблон загрузки файлов для страницы добавления объявления
{%if in_array($smarty.get.cat.0, array('edit', 'add', 'users'))%}
...
{%include file=fileupload.html%}
{%/if%}
10. В шапке сайта header.html добавляем код запуска PWA приложения
{%if $settings.pwa%}
<link rel="manifest" target=_blank href="{%$settings.path%}pwa/manifest.json">
<meta name="msapplication-TileColor" content="#E6E6FA">
<meta name="msapplication-TileImage" content="{%$smarty.const.THEME%}assets/ico/fav192.png">
<meta name="theme-color" content="#E6E6FA">
<script>
if('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('{%$settings.path%}pwa/sw.js');
});
}
</script>
{%/if%}
Тайтл сайта из сеомодуля теперь будет подменяться прямо в шаблоне. Для этого нужно обрамить содержимое title условием
<title>
{%if !empty($seomodule.title)%}
{%$seomodule.title%}
{%else%}
... старый тайтл
{%/if%}
</title>
Регламентные задания теперь запускаются с помощью фейкового js файла, подключаемого в defer режиме только при необходимости. Этот код надо добавить в шаблон обязательно!
{%if $cron%}
<script src="{%$settings.path%}cron.js" defer></script>
{%/if%}
УРЛы страницы объявлений теперь изменились. Меняем условие для определения страниц объявлений с $smarty.get.cat.0 == 'messages' на $modtype == 'msg'
Для создания в заголовке текста типа "Объявления в Москве", добавим {%$locale.243%} {%$second_region_name|morphy:'ПР'%}
Модификатор morphy с параметром 'ПР' используется для склонения существительно в предложный падеж. Также можно использовать параметры
- 'ИМ'- Именительный. Кто? Что? (есть),
- 'РД'- Родительный. Кого? Чего? (нет),
- 'ДТ'- Дательный. Кому? Чему? (дам),
- 'ВН'- Винительный. Кого? Что? (вижу),
- 'ТВ'- Творительный. Кем? Чем? (горжусь),
- 'ПР'- Предложный. О ком? О чем? (думаю)
Если переменная $second_region_name в шаблоне не определена, добавим код
{%assign var=second_region_name value=""%}
{%if $second_region%}
{%assign var=second_region_name value=$second_region.name|@count%}
{%assign var=second_region_name value=$second_region_name-1%}
{%assign var=second_region_name value=$second_region.name[$second_region_name]%}
{%/if%}
Если в шапке есть текстовое поисковое поле, добавим к нему идентификатор для автокомплита id="autocomplete-text"
11. Вывод списка объявлений list_full.html.
- Новая ссылка на объявление $message.lnk_full
- Ссылка на первую картинку $message.fields.i.0.ts
Для отображение цен используем модификатор currency
$message.fields.p.0.value.charcode|currency:$message.fields.p.0.value.num:$message.fields.p.0.value.txt
код модификатора находится как обычно в smarty/modifirs.php
Для вывода интерфейса смены валюты цен производится обход массива $rates с генерацией ссылок вида ?filter[currency]=ИД_валюты
{%foreach from=$rates item='rate'%}
<li class="{%if $rate.id == $rates_default.id && (!empty($settings.filter.currency) || $settings.pricetype == 1)%}active {%/if%}dropdown-item">
<a target=_blank href="?filter[currency]={%$rate.id%}" rel="nofollow">
{%$rate.charcode|currency:'':'<i class="fa fa-money" aria-hidden="true"></i>'%}
{%$rate.name%}
</a>
</li>
{%/foreach%}
Для ajax подгрузки списка объявлений в конце файла добавлена конструкция
{%if ($modtype == 'cat' || $smarty.get.cat.0 == 'search') && $pages > 1 && $pages != $smarty.get.page%}
<div class="tab-box save-search-bar text-center">
<script>
var ajax_current_page = {%$smarty.get.page|intval%} + 1;
var ajax_max_pages = {%$pages%};
var ajax_uri = '{%$get_str%}';
var ajax_dir = '{%$current_dir%}';
</script>
<a target=_blank href="#" id="more"> <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
{%$locale.1424%}
</a>
</div>
{%/if%}
12. Список объявлений в ЛК list_short.html
- Новая ссылка на объявление $message.lnk_full
- Ссылка на картинку $message.fields.i.0.ts
13. В поиске на карте map.html добавляем стили jquery ui для работы слайдера выбора диапазона значений
<link rel="stylesheet" target=_blank href="{%$smarty.const.THEME%}assets/css/jquery-ui.css">
<style>
.ui-slider-horizontal {
width: 95%;
margin-left: 7px;
}
</style>
14. На странице объявления message.html возвращаем ссылку на редактирование объявления
{%if $edit%}
<span class="edit">
<a target=_blank href="{%$settings.path%}edit/{%$message.id%}">
<i class="fa fa-pencil" aria-hidden="true"></i> {%$locale.200%}
</a>
</span>
{%/if%}
Возвращаем имя автора объявления и магазина
{%if $message.user_array%}
<a target=_blank href="{%$settings.path%}userinfo/{%$message.user_array.id%}">
<i class=" icon-user"> </i> {%$message.user_array.name%}
</a>
{%if $message.shop%}
(«<a target=_blank href="{%$settings.path%}shops/{%$message.shop.link%}">{%$message.shop.name%}</a>»)
{%/if%}
{%else%}
<i class=" icon-user"> </i> {%$message.user%}
{%/if%}
Для отображение цен используем модификатор currency
$message.fields.p.0.value.charcode|currency:$message.fields.p.0.value.num:$message.fields.p.0.value.txt
Для отображения ссылки на картинку внутри цикла по всем фотографиям используем $image.tb вместо {%$settings.path%}uploads/images/tb/{%$image.value%}
Подтипы строковых полей БД теперь отдельные типы полей (см. выше), поэтому условия вывода полей теперь сгруппированы по-другому.
Числовые значения сгруппированы условием if in_array($v.field_type, array('n', 'g', 'l'))
Ссылка на загрузку файла выглядит так
{%foreach from=$v.value item='file' name='filearr'%}
<strong>
<a target=_blank href="{%$settings.path%}download/{%$file.filename%}"><i class="fa fa-download" aria-hidden="true"></i> {%$locale.617%}</a>
</strong>
{%if $smarty.foreach.filearr.last eq false %}, {%/if%}
{%/foreach%}
Чтобы предотвратить появление Countable-ошибок на PHP7.3 перед использованием модификатора count, убеждаемся, что переменная не является false:
{%if $message.fields.y && $message.fields.y|@count > 0%}
{%if $message.fields.j && $message.fields.j|@count > 0%}
15. Для ссылок в пагинации pagination.html добавлен абсолютный путь и строка с параметрами. Иначе пагинация может не сработать при использовании страниц-алиасов в СЕО-модуле
<a target=_blank href="{%$current_dir%}page{%$p%}.html{%$get_str%}"></a>
16. В продлении объявлений prolong_few.html убедимcя, что $err не false
{%if $err && $err|@count > 0%}
17. На страницу поиска объявлений search.html поставим счётчик объявлений
{%if $messages|@count == 0%}
<div class="alert alert-warning">
{%$locale.1113%}
</div>
{%else%}
<div class="alert alert-success">
{%$messages_counter%}
</div>
{%/if%}
18. Сильно изменился вывод поисковых полей search_fields.html. В соотвествие с новыми типами полей сгруппированы числовые поля и цена. Для этих полей формируется html код, который позволяет сгенерировать слайдеры выбора диапазона значенией
<div class="slider-inputs">
<div class="slider-cont" data-id="{%$id%}" data-min="{%$field.min%}" data-max="{%$field.max%}">
<div class="slider-range"></div>
<div class="input-range">
<input class="from" type="text">
<input class="to" type="text">
</div>
</div>
</div>
<label class="slider-disabler"><input type="checkbox" class="off"/> {%$locale.204%}</label>
$field.min, $field.max - максимальное и минимальное значение поля.
19. В магазине shops.html добавим стиль для отображения фонового изображения, который загрузил администратор магазина
{%if $shop.img_bg%}</p>
<style>
.main-container{
background-image: url('{%$shop.img_bg%}');
background-position: top;
}
</style>
{%/if%}
20. В шаблонах treeX.html избавляемся от переменной $uri и вместо этого используем модификатор uri для вывода абсолютной ссылки на категорию $el.id|url
21. На страницу администрирование магазина users_shop.html добавилась форма загрузки баннеров
{%elseif $smarty.get.act == "images"%}
<form action="" name="add" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="sh_img">
{%$locale.539%}
</label>
<p class="text-muted">({%$locale.1140%} {%$image_size.width%} X {%$image_size.height%}px)</p>
<p><img src="{%$shop.logo%}?rnd={%100|rand:999%}"/></p>
<div class="row">
<div class="col-md-6"><p>{%$locale.7%} — <input id="sh_img" type="file" name="img" value="{%$locale.7%}"/></p></div>
<div class="col-md-6">{%if $shop.del.logo%}<p><label><input type="checkbox" name="del[logo]" value="1" /> {%$locale.201%}</label></p>{%/if%}</div>
</div>
</div>
<hr />
<div class="form-group">
<label for="top_img">
{%$locale.119%}
</label>
<p class="text-muted">({%$locale.1140%} {%$image_size_top.width%} X {%$image_size_top.height%}px)</p>
<p><img style="max-width: 100%;" src="{%$shop.logo_top%}?rnd={%100|rand:999%}"/></p>
<div class="row">
<div class="col-md-6"><p>{%$locale.7%} — <input id="top_img" type="file" name="img_top" value="{%$locale.7%}"/></p></div>
<div class="col-md-6">{%if $shop.del.logo_top%}<p><label><input type="checkbox" name="del[logo_top]" value="1" /> {%$locale.201%}</label></p>{%/if%}</div>
</div>
</div>
<hr />
<div class="form-group">
<label for="bg_img">
{%$locale.187%}
</label>
<p class="text-muted">({%$locale.1140%} {%$image_size_bg.width%} X {%$image_size_bg.height%}px)</p>
<p><img style="max-width: 100%;" src="{%$shop.logo_bg%}?rnd={%100|rand:999%}"/></p>
<div class="row">
<div class="col-md-6"><p>{%$locale.7%} — <input id="bg_img" type="file" name="img_bg" value="{%$locale.7%}"/></p></div>
<div class="col-md-6">{%if $shop.del.logo_bg%}<p><label><input type="checkbox" name="del[logo_bg]" value="1" /> {%$locale.201%}</label></p>{%/if%}</div>
</div>
</div>
<p>
<input class='add btn btn-primary' type='submit' name='submit' value='{%$submit_text%}'>
</p>
</form>
{%/if%}
И соотвествующая ссылка в меню
<li {%if $act=="images"%}class="active"{%/if%}><a target=_blank href="?act=images">{%$locale.115%}</a></li>
В форму контактов добавились поля ввода ссылок на соцсети
<div class="form-group">
<label>{%$locale.1413%}</label>
<input maxlength="70" type="url" name="soc_vk" class="calcletters form-control" placeholder="https://vk.com/public20003922" value="{%$shop.soc_vk%}">
</div>
<div class="form-group">
<label>{%$locale.1414%}</label>
<input maxlength="70" type="url" name="soc_fb" class="calcletters form-control" placeholder="https://www.facebook.com/groups/2478935628991128/" value="{%$shop.soc_fb%}">
</div>
<div class="form-group">
<label>{%$locale.1415%}</label>
<input maxlength="70" type="url" name="soc_in" class="calcletters form-control" placeholder="https://www.instagram.com/instagram/" value="{%$shop.soc_in%}">
</div>
Для работы поиска по яндекс карте нужно изменить ссылку на подключение библиотеки яндекс.карт
https://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU{%if $settings.yaapi != ''%}&apikey={%$settings.yaapi%}{%/if%}
Дополнительно можно добавить ссылку на сам магазин
<a target=_blank href="{%$shop.link%}" target="_blank">
<i class="glyphicon glyphicon-new-window"></i> «{%$shop.name%}»
</a>
Комментировать
Комментарии
Рад за развитие проекта. Крутое обновление.
Но неделю назад купил лицензия и обновился до 2.3 и купил шаблон для 2.3.