Страница "Настройка оформления магазина" — различия между версиями

Материал из Insales Wiki
Перейти к: навигация, поиск
(Внесение изменений в настройки)
(Настройка темы)
Строка 330: Строка 330:
 
На эту страницу можно попасть из раздела бэк-офиса "Сайт", подраздела "Дизайн" по ссылке "Настройка темы".
 
На эту страницу можно попасть из раздела бэк-офиса "Сайт", подраздела "Дизайн" по ссылке "Настройка темы".
  
Используя панель "Настройки" Редактора тем, можно создавать, сохранять и переключать варианты настройки сайта магазина, отличающиеся
+
Используя страницу "Настройки темы", можно создавать, сохранять и переключать варианты настройки сайта магазина, отличающиеся
 
*'''цветом''' элементов дизайна,
 
*'''цветом''' элементов дизайна,
 
*'''шрифтом''' страницы,
 
*'''шрифтом''' страницы,
Строка 339: Строка 339:
  
  
'''Примечание:''' панель "Настройки" редактора тем доступна не для всех тем (см. [[#Таблица сравнения индивидуальных возможностей тем|таблицу возможностей тем]]). Кроме того, в разных темах набор настраиваемых параметров различен. Для некоторых тем есть уже готовые варианты настроек. Хорошие готовые наборы есть у тем: "Металлик", "Мода", "Зеленый лист". Также есть варианты для тем "Лайт" и "Телескоп".
+
'''Примечание:''' страница "Настройки темы" доступна не для всех тем (см. [[#Таблица сравнения индивидуальных возможностей тем|таблицу возможностей тем]]). Кроме того, в разных темах набор настраиваемых параметров различен. Для некоторых тем есть уже готовые варианты настроек. Хорошие готовые наборы есть у тем: "Металлик", "Мода", "Зеленый лист". Также есть варианты для тем "Лайт" и "Телескоп".
  
  

Версия 15:30, 21 ноября 2010

Общее описание страницы "Настройка оформления магазина"

На эту страницу можно попасть, выбрав в разделе "Сайт" подраздел "Дизайн".

Страница предназначена для изменения внешнего вида интернет-магазина.


Design 1b.png
Рис. 1. Настройка управления магазина.


Для этого на странице имеется блок ссылок (Рис. 1. поз. 1.):

Ссылка "Переустановить тему" позволяет восстановить первоначальное содержание шаблонов установленной темы. Эту ссылку следует применять, чтобы в используемой теме оформления появился максимум поддерживаемых настроек (и готовых вариантов настроек), появившихся в сервисе после начала Вашнй работы с этой темой. Если установленная тема полностью совпадает с текущим вариантом стандартной темы, то ссылка "Переустановить тему" не показывается. Ссылка появится или после редактирования Вами темы, или, если с момента установки темы в неё были добавлены новые функции или исправлены ошибки.

На этой странице приведён также список возможностей текущей темы (Рис. 1. поз. 4.). Таблицу возможностей всех тем можно увидеть здесь.

Для создания резервной копии на случай непредвиденного результата изменения темы есть возможность сохранить и восстановить тему (Рис. 1. поз. 2.),

Сохранение и восстановление темы

На странице можно скачать текущую тему (Рис. 1. поз. 2.). Вы сможете добавлять, удалять нужные файлы, редактировать существующие прямо у себя на компьютере. Тема скачивается в виде ZIP-архива, содержащего файлы в структуре директорий. Архив следует распаковать, сохраняя эту структуру, файлы, подлежащие правке - отредактировать. После того как Вы сделали собственную тему или отредактировали существующую, нужно вновь запаковать её в ZIP-архив, сохранив структуру директорий. После этого можно загрузить её обратно на сервер и использовать в оформлении магазина.

Смена темы оформления магазина

На эту страницу можно попасть из раздела бэк-офиса "Сайт", подраздела "Дизайн" по ссылке "Галерея тем".


Design 2b.png
Рис. 2. Выбор темы магазина.


На странице "Стандартные темы оформления" представлен список стандартных тем.

Здесь можно изменять вид страниц магазина на один из предлагаемых предопределённых.

Предлагаемые темы представлены в виде таблицы, в левой колонке которой показан скриншот страницы магазина. В правой колонке для каждой темы указано название и содержатся:

  • ссылка на всплывающий перечень возможностей, которые поддерживает тема,
  • ссылка на демо-магазин, сделанный на базе этой темы,
  • кнопка "Установить",
  • значок Palette.png возле названий тем, имеющих возможность "Настройка".

Для смены темы на выбранную - следует щёлкнуть мышкой по кнопке "Установить".

При смене темы товары, равно как и все остальные данные, никуда из магазина не исчезнут.


На выбор предлагаются следующие готовые темы:

  • Телескоп
  • Техника
  • Стиль
  • Лайт
  • Классика
  • Лёгкость
  • Мода
  • Зелёный лист
  • Лето
  • Модерно
  • Металлик

При смене темы следует иметь в виду, что от выбора темы зависит набор возможностей, которые будет иметь магазин. Список возможностей каждой темы показывается на всплывающем ярлыке после наведения курсора мыши на ссылку "Возможности".

Предлагаемые темы содержат ряд общих и индивидуальных возможностей, указанных ниже.

Таблица возможностей тем

Возможности имеющиеся во всех темах

  • Редактор тем: Шаблоны / Стили и скрипты / Файлы
  • Навигационные панели
  • Описание категорий
  • Выбор модификаций товара
  • Скидки на заказ
  • Скидки по купонам - включается на тарифах Стандартный, Продвигающий, Бизнес и Бизнес+
  • Обратная связь (с покупателем)
  • Личный кабинет - включается на тарифах Стандартный, Продвигающий, Бизнес и Бизнес+
  • Накопительные скидки - включается на тарифах Стандартный, Продвигающий, Бизнес и Бизнес+

Таблица сравнения индивидуальных возможностей тем

Возможности темы Темы. Возможности: 0 - нет, 1 - есть, Л - любой, д - ограничено дизайном
Телескоп Техника Стиль Лайт Классика Лёгкость Мода Зелёный
лист
Лето Модерно Металлик
Редактор тем: Настройки темы 1 1 1 1 0 1 1 1 1 1 1
Редактор тем: Настройка темы прямо на сайте 0 0 0 1 0 0 0 1 0 0 0
Число готовых вариантов дизайна сайта

(находятся в "Настройки темы")

4шт. 1 1 2шт. 1 1 8шт. 3шт. 1 1 7шт.
Блог 1 1 1 1 1 1 1 1 1 1 1
Поиск 1 1 1 1 1 1 1 1 0 0 1
Панели блоков 1 1 1 1 0 1 1 1 0 0 0
Баннеры 1 1 1 0 0 0 0 1 0 0 0
АвтоВывод артикула товара на сайт 0 0 0 1 0 0 0 1 0 0 0
Сопутствующие товары 1 1 1 1 0 1 0 1 0 0 0
Старая цена 1 1 1 1 0 1 0 1 0 1 0
Сортировка товаров 1 1 0 1 0 1 1 1 1 0 0
Фильтрация товаров по параметрам 1 1 1 1 1 1 1 1 1 0 0
Фильтрация товаров по свойствам 0 0 0 0 1 0 0 0 0 0 1
Переключатель языков 1 1 1 1 1 1 1 1 1 0 0
Кнопка "Под заказ" при нулевом остатке товара 1 1 1 1 1 1 0 1 1 0 0
Уровень вложенности категорий 2 3 2 Л Л Л Л Л Л 1 2
Возможности темы Телескоп Техника Стиль Лайт Классика Лёгкость Мода Зелёный
лист
Лето Модерно Металлик
Темы. Возможности: 0 - нет, 1 - есть, Л - любой, д - ограничено дизайном


Тему "Металлик" можно рекомендовать для создания магазинов, рассчитанных на покупателей с "медленными" каналами доступа в интернет, поскольку позволяет не использовать картинок при показе каталога и списков категорий товаров.

Настройка темы

На эту страницу можно попасть из раздела бэк-офиса "Сайт", подраздела "Дизайн" по ссылке "Настройка темы".

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

  • цветом элементов дизайна,
  • шрифтом страницы,
  • видом "шапки" страниц,
  • цветом "кнопок",
  • фоновым изображением на страницах.


Примечание: страница "Настройки темы" доступна не для всех тем (см. таблицу возможностей тем). Кроме того, в разных темах набор настраиваемых параметров различен. Для некоторых тем есть уже готовые варианты настроек. Хорошие готовые наборы есть у тем: "Металлик", "Мода", "Зеленый лист". Также есть варианты для тем "Лайт" и "Телескоп".


На рисунке Рис. 4. Настройки. показан вид панели "Настройки" с полностью развёрнутыми секциями.


Design 5b.png
Рис. 4. Настройки.


Панель "Настройки" состоит из нескольких сeкций:

Настройки темы

В секции "Настройки темы" есть возможность выбрать из списка ранее созданных вариантов настройки нужный или сохранить текущий вариант с указанным Вами названием.

Выпадающий список "Использовать вариант" предназначен для переключения ранее созданных вариантов или удаления одного из них (ссылка "удалить этот вариант").

Выпадающий список "Сохранить текущие настройки как" предназначен для выбора варианта, в котором будут сохранены текущие настройки после щелчка по кнопке "Сохранить":

  • Если в этом списке выбран пункт "новый вариант", то ввести его название можно в поле ввода "с названием" правее выпадающего списка.
  • Если Вы хотите переключить сайт на ранее сохранённый вариант настройки, то выберите нужный вариант из списка "Использовать вариант" и нажмите кнопку "Сохранить". В списке "Сохранить текущие настройки как" в это время должен быть пункт "новый вариант", а поле "с названием" должно быть пустым.

Цвета

В секции "Цвета" можно выбрать, каким цветом будут отображаться:

  • Обычный текст.
  • Выделенный текст 1.
  • Выделенный текст 2.
  • Заголовки в шапке.
  • Текст в шапке.
  • Текст ссылки.
  • Ссылка при нажатии.
  • Границы.
  • Фон.
  • Фон блоков.

После щелчка "мышью" по квадратику с образцом цвета или по полю ввода с кодом цвета, выбранного для правки элемента изображения, появляется средство для выбора цвета указанием нужного. Можно и просто ввести код необходимого цвета в поле ввода.


Design 6b.png
Рис. 5. Выбор цвета.

Шрифты

В секции "Шрифты" можно выбрать гарнитуру шрифтов "Обычный текст" или "Выделенный текст" из списка:

  • Sans-serif
    • Helvetica/Arial
    • Impact
    • Lucida Grande
    • Trebuchet MS
    • Verdana
    • DejaVu
  • Serif
    • Garamond
    • Georgia
    • Palatino
    • Times New Roman
  • Monospace
    • Courier New
    • Monaco/Lucida Console

Шапка сайта

В секции "Шапка сайта" содержатся настройки:

  • Логотип сайта
  • Выводить название магазина?
  • Изображение справа
  • Цвет шапки

Чекбокс возле каждого пункта настроек позволяет включать и выключать использование соответствующей возможности. Кнопки "Обзор" возле пунктов "Логотип сайта" и "Изображение справа" позволяют выбрать на локальном компьютере нужный файл и загрузить его на сервер. Правее кнопки размещена ссылка на файл, который используется в текущем варианте настройки. Цвет шапки настраивается так же, как и в секции "Цвета"

Фоновое изображение

В секции "Фоновое изображение" содержатся настройки:

  • Изображение,
  • Местоположение,
  • Повтор,
  • Прокрутка,

позволяющие загрузить выбрать на локальном компьютере нужный файл и загрузить его на сервер (п. "Изображение"), разместить на страницах сайта (п. "Местоположение") и управлять отображением (п.п. "Повтор" и "Прокрутка").

Сохранение настройки

После изменений выбранных параметров в нужных секциях панели "Настройка" нужно в секции "Настройки темы" ввести название варианта и щёлкнуть по кнопке "Сохранить" в нижней части панели.

Что изменяет настройка

Реально в результате изменения настроек меняются Liquid-объект "settings" и на основе файла *.css.liquid генерируется соответствующий файл *.css, подключенный через шаблоны. В общем списке файлов сгенерированный файл не показывается.

Редактирование темы магазина

На эту страницу можно попасть из раздела бэк-офиса "Сайт", подраздела "Дизайн" по ссылке "Редактор тем".

Редактирование темы позволяет произвольно менять вид страниц магазина.

Перед редактированием темы рекомендуется сохранить текущую тему для возможности её восстановления, в случае нежелательных последствий редактирования.


Design 3b.png
Рис. 3. Редактор темы.


На странице размещён заголовок с иконкой справки Help.png (Рис. 3. поз. 2.), левее его - кнопка для возврата на страницу, откуда была вызвана текущая Back ico.png (Рис. 3. поз. 1.)

В рамках редактирования темы имеется возможность изменения:

Внесение изменений в шаблоны

Шаблоны - это текст на языке HTML со вставками на языке Liquid. Для внесения изменений в шаблоны нужно знать эти языки.

Начальную информацию о Liquid можно прочитать тут:

Шаблоны позволяют изменять вид страниц магазина, то есть компоновку, места размещения, размеры, цвет, фон и другие параметры различных частей страницы с отображённой на этих частях информацией.

В шаблон передаётся список переменных (набор данных) для отображаемой страницы, которые могут отображаться или не отображаться на странице, в зависимости от содержания (текста) шаблона.

В шаблоне также описана логика отображения переданных шаблону данных, которая описывает зависимость способа отображения этих данных от их содержания.

В панели "Шаблоны" для изменения предлагаются следующие шаблоны, каждый из которых соответствует типу страницы:

  • HTML - описывает общее оформление всех страниц магазина. В этом шаблоне имеется указание, в каком месте будет вставлена содержательная часть конкретной страницы. Содержательная часть страницы описывается другими шаблонами, в зависимости от типа страницы. Тип страницы соответствует названию шаблона.
  • Главная - описывает оформление главной страницы магазина.
  • Категория - описывает оформление страниц магазина, являющихся какой либо из категорий или подкатегорий витрины.
  • Товар - описывает оформление страниц магазина, являющихся описанием какого-либо товара.
  • Корзина - описывает оформление страницы магазина, отображающей корзину покупателя.
  • Страница - описывает оформление страниц магазина, которые могут содержать дополнительную информацию для покупателя.
  • Поиск - описывает оформление страницы магазина с результатами поиска товаров в магазине.

Для внесения изменений в шаблон нужно шёлкнуть по ссылке под ним. Появится окно для редактирования с текстом выбранного файла шаблона. Над окном показан путь размещения и имя файла, под окном имеется кнопка "Сохранить" и ссылка "отменить" для завершения редактирования.

Более подробно о шаблонах можно прочитать в следующих статьях:

Внесение изменений в стили и скрипты

В раздел стили и скрипты попадают файлы с расширениями .css или .js.

Для внесения изменений в файлы нужно щёлкнуть по ссылке под ним. Появится окно для редактирования с текстом выбранного файла стиля. Под окном имеется кнопка "Сохранить" и ссылка "отменить" для завершения редактирования.

В панели "Стили и скрипты" для изменения предлагаются следующие стили (список может отличаться в зависимости от темы):

  • content-style.css - обязательный файл, определяет внешний вид статей полных описаний товара и описаний категорий,
  • ie6.css - используется для корректировки внешнего вида сайта в браузере IE6.
  • reset.css - используется для отмены настроек стилей браузера.
  • style.css - главный файл стилей, в котором задаётся вид сайта.

В панели также есть возможность удалить любой из этих файлов.

Загрузка новых файлов

В панели "Файлы" имеется возможность загрузить новые файлы, которые можно использовать в шаблонах. При этом, если имя файла оканчивается на .js или на .css, он после загрузки на сервер отображается в панели "Стили и скрипты", Все остальные файлы попадают в панель "Файлы". В основном - это файлы изображений.

В панели также есть возможность удалить любой из имеющихся файлов, щёлкнув по иконке Del ico.png.

Для того чтобы заменить файл, надо его сначала удалить, а потом загрузить новый - одноименный. Имена файлов регистрозависимые.

Для создания фоновых градиентов и других цветных или имеющих форму объектов на любых страницах магазина можно использовать формат SVG (подробнее об SVG на wikipedia). Файлы *.SVG размещаются вместе с другими файлами темы. Ссылки на файлы из текста страниц должны при этом выглядеть как *.SVG.PNG, поскольку файлы после их загрузки преобразуются в формат PNG.

Для размещения файлов не входящих в шаблоны, следует пользоваться страницей "Файлы".

Настройка стиля оформления заказа и кабинета клиента

В бэк-офисе имеется возможность настраивать внешний вид страницы оформления заказа и личного кабинета покупателя, их можно стилизовать под оформление магазина. Со временем во все темы будет добавлена возможность это делать "настройками".

В простом варианте эта возможность поддерживается в теме Металлик. Настраивая дизайн путём выбора цветов, шрифтов, задавая фоновые картинки для магазина, Вы тем самым настраиваете и страницы оформления заказа и личного кабинета. Они будут в том же стиле, что и сам магазин.

В общем случае (для других тем оформления и индивидуальных дизайнов) это можно сделать в разделе "Сайт", подразделе "Дизайн" по ссылке "Редактор темы", добавив файл custom_checkout.css со стилями для объектов, отображаемых в процессе оформления заказа или при входе в личный кабинет покупателя. Этот файл будет подключаться на странице оформления заказа, и в нём Вы сможете настроить логотип, цвета и фон в тон используемой темы. Посмотреть пример заполнения такого файла можно тут: custom_checkout.css.

Страница "Файлы"

На эту страницу можно попасть из раздела бэк-офиса "Сайт", подраздела "Дизайн" по ссылке "Файлы".


Design 4b.png
Рис. 6. Страница "Файлы".


На странице размещён заголовок с иконкой справки Help.png (Рис. 6. поз. 2.), левее его - кнопка для возврата на страницу, откуда была вызвана текущая Back ico.png (Рис. 6. поз. 1.)

На странице "Файлы" Вы можете загружать файлы и изображения, которые потом будете использовать на страницах сайта, в блоках и в описаниях категорий и товаров. Именно отсюда они будут доступны для вставки из редактора TinyMCE в операциях "вставить изображение" или "вставить ссылку".

Для выбора и загрузки файлов используйте форму (Рис. 6. поз. 3.). На размер загружаемого файла имеется ограничение - не может быть загружен файл размером более 10 мегабайт. При попытке загрузить такой файл загрузка запущена не будет, а будет показано сообщение об ошибкке.

Список уже загруженных файлов в виде набора уменьшенных изображений картинок или характерных иконок для файлов других типов (.pdf, .xls, .doc, .mp3) можно наблюдать в правой части страницы (Рис. 6. поз. 4.).

Если по иконке файла щёлкнуть "мышкой", то появится информация об этом файле (Рис. 6. поз. 5.), в том числе имя файла, размер файла, полный путь к файлу (URL).

Здесь же есть возможность стереть файл, щёлкнув по иконке Del ico.png.

Любые файлы, которые Вы загрузите на странице "Файлы" будут доступны в корне сайта магазина, кроме ранее описанных файлов скриптов (*.css, *.js), некоторых файлов со специальными именами (например sitemap.txt), файлов с мультимедиа-контентом (то ессть файлрв с именами *.gif, *.png, *.jpg, *.jpeg, *.bmp, *.ico, *.swt, &.svg, *.mp3, *.mp4 и т.д.).

Например, Вы можете загрузить сюда специальный файл robots.txt. Об использовании и правилах оформления этого файла можно прочитать здесь: Использование robots.txt