Блог

Elite-Board 3, изменения в шаблонах
19 февраля 2020 16:02

В структуре шаблонов новой версии движка довольно много изменений. Шаблоны, работающие на 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%}
            (&laquo;<a target=_blank href="{%$settings.path%}shops/{%$message.shop.link%}">{%$message.shop.name%}</a>&raquo;)
        {%/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%} &mdash; <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%} &mdash; <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%} &mdash; <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> &laquo;{%$shop.name%}&raquo;
    </a>

Ваша оценка:

Комментировать

Ваше имя:
Ваш email:
(не публикуется)
Комментарий:
 
Введите код:
 

Комментарии

Антон
23 сентября 8314 13:47
 
Смешанные чувства.
Рад за развитие проекта. Крутое обновление.
Но неделю назад купил лицензия и обновился до 2.3 и купил шаблон для 2.3.
Гарик
1 марта 9899 06:30
 
Ну так переходите на версию 3.0
Обнова действительно крутая.
Nick
19 января 10216 23:55
 
Добавьте оплату через QIWI.
Яндекс без причин блокирует кошельки (лично 3 раза попадал), PayPal тоже мудрят и не выплачивают.