Как добавить возможность настройки темы на CMSInSales?

Где находятся настройки темы?

В разделе Сайт -> Дизайн -> Настройка темы бекофиса InSales

Как использовать возможность настройки в своей теме?

• После сохранения темы InSales на

локальный диск в сохраненном архиве

можно увидеть такие директории.

Сейчас нас будет интересовать директория config –

именно в ней находится интерфейс настройки и

переменные, которые можно использовать для настройки

• В директории находятся два файла: settings.html и

settings_data.json

• В первом – сверстанный интерфейс настройки темы, во

втором – значения переменных по умолчанию.

• К сожалению, в InSales пока нет «родного» интерфейса

для редактирования возможностей настройки тем.

Как применить созданные настройки к интерфейсу темы?

• Атрибут value элементов интерфейса настройки темы с определенным

атрибутом name соответствуют методу объекта settings. Например –

settings.text_color – значение input’а c атрибутом name text_color

• Таким образом настройки можно применять к стилям и шаблонам

темы. При этом к имени файла стилей следует добавить .liquid, чтобы

сообщить системе о том, что файл стилей содержит liquid-код. Например,

style.css.liquid.

• При использовании какого-либо файла в настройках темы к выводу

этого файла в шаблоне нужно применять фильтр asset_url. Например, {{

settings.logo_image | asset_url }} – применить загруженное изображение

логотипа. При использовании файла в стилях этот фильтр применять не

обязательно.

• Сами значения атрибутов стиля следует заключить в двойные фигурные

скобки, как вывод любой другой переменной в liquid. Например, body

(color: {{ settings.text_color }};)

А что делать с чекбоксами?

• Значения чекбоксов можно ставить как в стили, так и в сами коды

шаблонов.

• Удобнее всего это делать с помощью условия if.

Например, в настройках темы есть чекбокс

<input type="checkbox" id="show_shop_name" name="show_shop_name" value="1"

checked="checked"/>

(выводить ли название магазина, по умолчанию выводить)

В шаблоне где выводится название магазина пишем условие:

{% if settings.show_shop_name %}{{ account.title }}{% endif %}

Самый продвинутый уровеньИспользование SVG

• В CMS InSales есть возможность использования SVG, при этом

сервер автоматически будет конвертировать файлы в формат

PNG (да, мы все еще поддерживаем IE6 ☺, и поэтому не стоит

забывать о PngFix, например, на jQuery)

• XML для отрисовки SVG-изображений следует загружать

вместе с другими файлами темы – в «Редактор тем» и

именовать как {{название файла, применяемого в стилях без

.png}}.liquid, при этом название файла должно содержать .svg,

и id элемента в XML должен совпадать с названием

получаемого изображения без svg и liquid

Пример – см. следующий слайд

Использование SVG вовсю приветствуется и может помочь

получить парочку бонусных баллов ☺

Использование SVG. Пример. Фон блока

В стилях:.block { url('block_bg.svg.png');}

XML для отрисовки фона (файл block_bg.svg.liquid):<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="5px" height="90px" version="1.1" xmlns="http://www.w3.org/2000/svg">

<defs>

<linearGradient id="block_bg" x1="0%" y1="0%" x2="0%" y2="100%">

<stop offset="0%" style="stop-color:{{ settings.block_bg_gradient_color }}; stop-opacity:1"/>

<stop offset="100%" style="stop-color:{{ settings.block_bg_color }}; stop-opacity:1"/>

</linearGradient>

</defs>

<rect width="5px" height="90px" style="fill:url(#block_bg)"/>

</svg>

И используемые в нем настройки описываем в settings.html:<tr> <th><label for="block_bg_color">Фон блока</label></th>

<td><input id="block_bg_color" name="block_bg_color" class="color" value="#F8F7F5"/></td>

</tr>

<tr><th><label for="block_bg_gradient_color“>Градиент фона блока</label></th>

<td><input id="block_bg_gradient_color" name="block_bg_gradient_color" class="color"

value="#F2ECE0"/></td></tr>

Возможность использования cufon

• Для нестандартных шрифтов можно

использовать скрипт cufon. Получаемый с его

помощью векторный рисунок сервер также

будет сохранять в png самостоятельно.

• Это также можно использовать для настройки

темы.

Пример использования cufon

Добавим в настройках темы галочку «использовать декоративный

шрифт» для названия магазина<tr> <td><label for="use_font_replacement">Использовать декоративный шрифт для названия

магазина</label></td>

<td><input type="checkbox" id="use_font_replacement" name="use_font_replacement" value="1"

checked="checked"/></td> </tr>

<tr><td><label for="fancy_font">Декоративный шрифт</label></td>

<td><select class="fancy_font" name="fancy_font" id="fancy_font">

<option value="WienLightBold_600.font.js" selected="selected">WienLight</option>

</select></td></tr>

Подгружаем в head шаблона скрипты для нестандартных шрифтов:{% if settings.use_font_replacement %}

<script type="text/javascript" src="{{ 'shop/cufon-yui.js' | global_asset_url }}"></script>

{% capture fancy_font %}shop/fonts/{{settings.fancy_font}}{% endcapture %}

<script type="text/javascript" src="{{ fancy_font | global_asset_url }}"></script>

<script type="text/javascript">

Cufon.replace('h1#logo span’)'

});

</script> {% endif %}

И выводим название с использованием прописанного id:<h1 id="logo"><a href="/“><span>{{ account.title }}</span></a></h1>

• Скрипты шрифтов можно загружать в файлы темы, тогда

путь к ним будет прописываться с помощью фильтра

asset_url. Например, {{ ‘cufon.font_01.js’ | asset_url }}

• К таким шрифтам также можно применять градиенты,

созданные с помощью SVG.

Множество примеров по использованию можно найти в

стандартных темах InSales. SVG используется практически в

каждой теме, особенно для изучения использования всех

возможностей хороша тема «Телескоп».

Устали от кода? Посмотрим картинки!

Но легким движением руки в настройках темы мы можем изменить ее цвет, например, на зеленый

По умолчанию корзина в теме «Стиль» при наведении выглядит так

Пользователи, как показывает практика, в восторге от таких «фишечек», и готовы будут заплатить за такую тему больше – ведь тут можно проявить свой творческий потенциал, не углубляясь в HTML, CSS и нудное рисование в фотошопе

Не впечатляет? Еще пример

В теме «Телескоп» по умолчанию название магазина выглядит так

Изменением трех полей и без ковыряния в коде, либо фотошопе мы можем сделать его гораздо интересней

Клиенты, конечно, чайники. Но любят экспериментировать, причем без плачевных последствий. Они привыкли, что настройка темы ничего не сломает, и над ней можно издеваться как угодно

Снова не впечатляет?

Посмотрите примеры магазинов, созданных нашими клиентами самостоятельно, без каких-либо правок в шаблонах

Остались вопросы?Создавайте партнёрский аккаунт

http://www.insales.ru/new_partner

и обращайтесь в поддержку. Мы ответим.

http://www.insales.ru/blog

twitter:@insales