Руководство дизайнера

Дата изменения 17 января 2012

Оглавление

1. Новый дизайн
2. Разметка дизайна
3. Liquid
4. Примеры кода на Liquid
   • Список товаров
   • Описание товара
   • Публикации
   • Производители
   • Группы товаров
5. Содержимое стандартных страниц
6. Файлы
7. Кнопки
8. Мета теги
9. Часто задаваемые вопросы
   • Как установить дизайн из каталога?
   • Как добавить текст на главную страницу?
   • Как вставить баннер?
   • Как изменить стили (CSS)?

1Новый дизайн

Что бы создать новый дизайн, перейдите в панели управления на страницу «Настройки» → «Дизайн» и нажмите «Добавить». Откроется страница с описанием дизайна.

Где:

1. Разметка дизайна - это HTML код, который задает общий вид всех страниц
2. Разметка корзины – это HTML код, который задает вид маленькой корзины. Это корзина информер, она обновляется без перезагрузки страницы, когда клиент кликает «В корзину».
3. Содержимое стандартных страниц – это текст или HTML код, который размещается в зонах страницы (пример: текст для левой, центральной и правой зоны)
4. Файлы – только те, что используются в дизайне
5. Кнопки – выбор иконок для стандартных кнопок
6. Мета теги – мета тэги дизайна (пример: подключение JavaScript или CSS)
7. Просмотр – как выглядит магазин с этим дизайном

Есть и более простой способ создать дизайн – установите готовый дизайн и каталога и измените его.
Что бы применить дизайн к магазину, кликните «Сделать текущим».

2Разметка дизайна

Разметка дизайна – это HTML код, который отображается на каждой странице. В разметке дизайна можно использовать Liquid и объявлять зоны. Зона служит контейнером для информации на странице, в котором будет размещаться нужное содержимое. Пример: в разметке в левой колонке объявлена левая зона, на главной странице в левой зоне размещается список последних новостей магазина.

Для объявления зоны в разметке дизайне нужно вставить код {{ zone.название зоны }}. Пример: {{ zone.left }} или {{ zone.center }}.

3Liquid

Liquid – это язык программирования шаблонов. Справочник по Liquid.
Переменные Liquid пишутся так: {{ shop.title }}
Условия и цикли пишутся так: {% if settings.show_stock %}{% endif %}

Цикл:

{% for vendor in vendors.items %} {{ vendor.title }} {% endfor %}

Цикл для списка товаров или публикаций:

{% paginate products_stars cols:3 %} {% for product in list.items %} <h1>{{ product.title }}</h1> {% endfor %} {{ list.pagination }} {% endpaginate %}

Условие:

{% if product.last %} <div class="separator"></div> {% endif %} {% if product.related_count > 0 %} <div class="separator"></div> {% endif %}

4Примеры кода на Liquid

Список товаров

{% paginate products size:10 cols:1 %} <div class="breadcrumbs"> {% for crumb in list.breadcrumbs %} {% if forloop.last %}{{ crumb.title }} {% else %}<a href="{{ crumb.url }}">{{ crumb.title }}</a> › {% endif %} {% endfor %} </div> <h1>{{ list.title }}</h1> <div class="groupDescription">{{ list.description }}</div> <div class="list_head"> <div class="sort">{{ controls.products_sort }}</div> <div class="rowCount">{{ controls.products_size }}</div> <div class="clear"></div> </div> {% for product in list.items %} {{ product.image }} {% for tag in item.tags %} <span class="tag-{{ tag.code }}">{{ tag.name }}</span> {% endfor %} <a href="{{ product.url }}">{{ product.title }}</a> {{ product.text_short }} {% if product.has_vendor %}{{ text.68 }}: <a href="{{ product.vendor_url }}">{{ product.vendor }}</a>{% endif %} <div class="price"> <ins>{{ product.price }}</ins> <del>{{ product.price_old }}</del> </div> {% if settings.show_stock %} {% if product.available %} <div class="available">{{ text.60 }}</div> {% else %} <div class="not-available">{{ text.59 }}</div> {% endif %} {% endif %} {{ product.button_add }} {% endfor %} {{ list.pagination }} {% endpaginate %}

Описание товара

<div class="breadcrumbs"> {% for crumb in product.breadcrumbs %} <a href="{{ crumb.url }}">{{ crumb.title }}</a> {% if forloop.last %} {% else %} › {% endif %} {% endfor %} </div> <h1>{{ product.title }}</h1> {{ product.properties }} {{ product.text }} <a rel="imageBox" class="size_ll" href="{{ product.image }}"><img alt="{{ product.title }}" title="{{ product.title }}" src="{{ product.image250 }}"/></a> <div class="tags"> {% for tag in item.tags %} <span class="tag-{{ tag.code }}">{{ tag.name }}</span> {% endfor %} </div> {{ product.variants }} <div class="price"> <ins>{{ product.price }}</ins> <del>{{ product.price_old }}</del> </div> {% if settings.show_stock %} {% if product.available %} <div class="available">{{ text.60 }}</div> {% else %} <div class="not-available">{{ text.59 }}</div> {% endif %} {% endif %} {{ product.button_add }} {% for image in product.images %} <a href="{{ image.image_big }}" rel="imageBox" target="_blank" title="{{ image.title }}"><img src="{{ image.image_small }}" alt="{{ image.title }}" /></a> {% endfor%} {% if product.has_vendor %}{{ text.68 }}: <a href="{{ product.vendor_url }}">{{ product.vendor }}</a>{% endif %} {% if social.with_facebook %} {{ social.facebook_like }} {% endif %} {% if settings.show_product_comments %} <div id="comments"> <div class="comment_title">{{ text.25 }}</div> {{ product.comments.list }} </div> {{ product.comments.form_add }} {% endif %} {% if product.related_count > 0 %} <div class="related"> <div class="title">{{ text.125 }}</div> {% for related in product.related limit:5 %} <a href="{{ related.url }}"><img src="{{ related.image100 }}" class="h" title="{{ related.title }}" alt="{{ related.title }}"></a> <h2><a href="{{ related.url }}">{{ related.title }}</a></h2> {{ related.price }} {% endfor %} </div> {% endif %}

Публикации

{% paginate news size:10 %} <div class="breadcrumbs"> {% for crumb in list.breadcrumbs %} <a href="{{ crumb.url }}">{{ crumb.title }}</a> {% if forloop.last %} {% else %} › {% endif %} {% endfor %} </div> <h1>{{ list.title }}</h1> {% for item in list.items %} <div class="item"> {% if item.has_image %} <a href="{{ item.url }}"> <img title="{{ item.title }}" alt="{{ item.title }}" src="{{ item.image }}" /> </a> {% endif %} <h2><a href="{{ item.url }}">{{ item.title }}</a></h2> <p>{{ item.text_short }}</p> </div> {% endfor %} {{ list.pagination }} {% endpaginate %}

Производители

{% for vendor in vendors.items %} <a href="{{ vendor.url }}">{{ vendor.title }}</a> {% endfor %}

Группы товаров

controls.groups

Ниже приводится исходный код, что бы можно было под него писать стили (CSS).

Полный список групп и всех подгрупп

<div class="groups"> <div class="groups_title">Категории</div> <ul> <li> <a href="http://<ссылка>">Группа 1</a> <ul class="group_closed"> <li> <a href="http://<ссылка>">Подгруппа 1.1</a> </li> <li> <a href="http://<ссылка>">Подгруппа 1.2</a> </li> <li> <a href="http://<ссылка>">Подгруппа 1.3</a> </li> </ul> </li> <li> <a class="group_active" href="http://<ссылка>">Активная группа 2</a> <ul class="group_open"> <li> <a href="http://<ссылка>">Подгруппа 2.1</a> </li> </ul> </li> </ul> </div>

Сокращенный список

<div class="groups"> <div class="groups_title">Категории</div> <ul> <li> <a href="http://<ссылка>">Группа 1</a> </li> <li> <a href="http://<ссылка>">Группа 2</a> </li> <li> <a class="group_active" href="http://<ссылка>">Активная группа 3</a> <ul class="group_open"> <li> <a href="http://<ссылка>">Подгруппа 3.1</a> </li> <li> <a href="http://<ссылка>">Подгруппа 3.2</a> </li> </ul> </li> </ul> </div>

Список главных групп и первых подгрупп

<div class="groups_main"> <div class="groupItem"> <h2>Группа 1</h2> <div class="groupImage"> <a href="http://<ссылка>"> <img alt="Группа 1" src="http://<фото>" /> </a> </div> <ul> <li> <a href="http://<ссылка>">Подгруппа 1.1</a> </li> <li> <a href="http://<ссылка>">Подгруппа 1.2</a> </li> </ul> </div> <div class="groupItem"> <h2>Группа 2</h2> <div class="groupImage"> <a href="http://<ссылка>"> <img alt="Группа 2" src="http://<фото>" /> </a> </div> <ul> <li> <a href="http://<ссылка>">Подгруппа 2.1</a> </li> <li> <a href="http://<ссылка>">Подгруппа 2.2</a> </li> </ul> </div> </div>

Список главных групп с фото и описанием

<div class="groups_list"> <div class="groupItem"> <div class="groupImage"> <a href="http://<ссылка>"> <img alt="Группа 1" src="http://<фото>" /> </a> </div> <h2>Группа 1</h2> <h3>Описание группы 1</h3> </div> <div class="groupItem"> <div class="groupImage"> <a href="http://<ссылка>"> <img alt="Группа 2" src="http://<фото>" /> </a> </div> <h2>Группа 2</h2> <h3>Описание группы 2</h3> </div> </div>

5Содержимое стандартных страниц

Здесь вы можете изменить содержимое стандартной страницы (пример: главная или список товаров). Содержимое страницы делится на зоны, которые были объявлены в размете дизайна.

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

6Файлы

Все файлы, которые используются в дизайне нужно добавлять через страницу «Настройки» → «Дизайн» → «Файлы»

7Кнопки

Для каждой стандартной кнопки нужно указать изображение. Файл изображения добавляется на странице «Настройки» → «Дизайн» → «Файлы». Если дизайн готовится для продажи через каталог дизайнов, желательно указать переведенные кнопки для других языков.

Если картинку не указать кнопка отобразится в виде ссылки или стандартной кнопки где это предусмотрено.

8Мета теги

Пример: что бы объявить файл стилей «main.css» необходимо добавить файл на странице «Настройки» → «Дизайн» → «Файлы» а затем добавить мета тег «CSS» указав имя файла с расширением (путь к файлу будет установлен автоматически).

Пример: что бы пройти «Подтверждение права собственности» в Google, нужно добавить мета тег:

<meta name="google-site-verification" content="pNBg_0YU6vFGsMn1Qmr5cBEal_CPcd00rjzYBjmthuU" />

Для этого в разделе «Мета теги» выберите тип «Google webmaster» и укажите значение атрибута content: pNBg_0YU6vFGsMn1Qmr5cBEal_CPcd00rjzYBjmthuU

9Часто задаваемые вопросы

Как установить дизайн из каталога?

1. Кликните по дизайну в каталоге, перейдете в описание
2. Нажмите "Установить" или "Купить"

Готово! Дизайн установлен в Вашем магазине. Перейдите в панель управления "Настройки" → "Дизайн" и напротив нужного дизайна нажмите "Сделать текущим"

Как добавить текст на главную страницу?

1. В панели управления перейдите в «Настройки» → «Дизайн» → кликните редактировать → «Содержимое стандартных страниц» → «Главная»
2. Перейдите в нужную зону, например: {{ zone.center }}
3. Откройте редактор и введите текст
4. нажмите «Сохранить»

 

Как вставить баннер?

1. В панели управления перейдите в «Файлы», загрузите картинку баннера и сохраните ссылку на файл
2. Перейдите в «Настройки» → «Дизайн» → кликните редактировать → «Содержимое стандартных страниц» → «Главная»
3. Перейдите в нужную зону, например: {{ zone.center }}
4. Вариант 1 (простой):
   
   1. Откройте редактор
   2. Кликните по кнопке «Изображение» и укажите ссылку (URL) на картинку баннера
   3. В редакторе выделите баннер (кликните по вставленной картинке) затем кликните по кнопке «Вставить ссылку» и укажите адрес (URL) страницы на которую должен попасть пользователь кликнув по баннеру
   
   Вариант 2 (сложный, но чистый код):
   <p><a href="http://<ссылка на страницу>"><img src="http://<ссылка на баннер>" /></a></p>
5. нажмите «Сохранить»

Как изменить стили (CSS)?

1. В панели управления перейдите в «Настройки» → «Дизайн»
2. Перейдите в раздел «Файлы»
3. Найдите файл стилей *.css (пример: main.css)
4. Кликните по ссылке файла и сохраните файл на компьютер
5. Внесите изменения в файл и на этой же странице «Файлы» загрузите его обратно