Документация для шаблона Agencium

Для начала

Спасибо за покупку шаблона!

Для начала установки шаблона перейдите в Панель Управления (дальше ПУ) Вашим сайтом (http://ваш-сайт.ucoz.ru/admin), и активируйте все необходимые модули.

Например, на демо-сайте, активированные такие модули – Каталог файлов, Интернет-магазин, Блог, Новости сайта, Форум, Пользователи, Поиск по сайту, Редактор страниц и Почтовые формы

Разархивируйте и перейдите в папку с шаблоном.

Структура файлов и папок.

В папке с шаблоном будут находиться такие файлы и папки (более подробное объяснение о структуре файлов и папок):

  • «Дополнительно» - папка содержит файл страницы «Ошибка 404».
  • «Информеры» - здесь вы найдете код основных информеров для вашего сайта.
  • «Модули» - в этой папке находится все разработанные модули для Вашего сайта, а также код глобальных контейнеров.
  • «Файлы» - папка содержит все файлы, необходимые для правильной работы шаблона. Содержимое этой папки нужно загрузить на сервер.
  • «style.txt» - файл стилей.
  • «tmpl.txt» - код который необходим для установления шаблона через конструктор шаблонов сервиса uCoz.

Загрузка файлов на сервер

Для начала перейдите в папку «Файлы», и загрузите файлы и папки на сервер (при этом следует соблюдать структуры файлов и папок).

Загрузить файлы на сервер можно двумя способами:

1. Через встроенный файловый менеджер ПУ: Главная - Файловый менеджер.

2. Через FTP-менеджер. Более подробную информацию вы можете найти здесь.

Далее, перейдите в ПУ: Главная - Файловый менеджер загрузите файл 404.htm из папки «Дополнительно».

После загрузки всех файлов из папок «Файлы» и «Дополнительно», Ваш файловый менеджер должен выглядеть со структурой вот так (но могут и быть дополнительные папки и файлы):

uCoz file manager

Установка дизайна сайта

Зайдите в Настройки - Общие настройки.

Найдите и измените версию библиотеки jQuery с 1.7.2 на 1.10.2 (Версия библиотеки jQuery: jquery-1.10.2.js).

Задайте параметр "Значение тега <!DOCTYPE>:"

<!DOCTYPE html>

Site Settings

Теперь, перейдите во вкладку Дизайн - Конструктор шаблонов. Скопируйте в форму «Конструктора шаблонов» содержимое файла tmpl.txt и нажмите «Создать шаблоны».

Далее, перейдите во вкладку Дизайн - Управление дизайном (CSS). Скопируйте в форму «Таблица стилей (CSS)» содержимое файла style.txt и нажмите «Сохранить».

Перейдите во вкладку Дизайн - Управление дизайном (шаблоны), на странице что загрузилась перейдите по ссылке «Первый контейнер». В форме «Первый контейнер» замените всё содержимым файла Первый контейнер.txt (файл находиться в папке Модули) и нажмите «Сохранить».

Далее, вернитесь во вкладку Управление дизайном (шаблоны), перейдите по ссылке «Глобальные блоки». На странице «Глобальные блоки» нажмите на кнопку «Добавить блок». Укажите название блока - PROMO

Если у вас уже есть блок с названием «PROMO» - ничего создавать и пересоздавать не нужно!

Перейдите во вкладку Дизайн - Управление дизайном (шаблоны), перейдите в глобальный блок «PROMO». Если вы хотите использовать вариант главной страницы БЕЗ СЛАЙДЕРА, то в форме «PROMO» вставьте код из файла PROMO - Категоризатор.txt (файл находиться в папке Модули) и нажмите «Сохранить». Если вам нужна страница, где ПРИСУТСТВУЕТ СЛАЙДЕР, то в форме «PROMO» вставьте код из файла PROMO - Слайдер.txt (файл находиться в папке Модули) и нажмите «Сохранить».

Перейдите на сайт. Войдите администраторским аккаунтом на сайт. Перейдите на страницу «Обратная связь» (по умолчанию, http://ваш-сайт.ucoz.ru/index/0-3). Нажмите на иконку «Редактировать HTML-код»

Page Edit Html Code

В форме «Содержимое страницы» замените все содержимым из файла Контакты.txt (файл находиться в папке Модули) и нажмите «Сохранить».

Цвет шаблона

Изначально, у вас шаблон будет красного цвета.

Если вы хотите изменить цвет шаблона, то:

1. Перейдите на демо-сайт → agencium-temp.do.am

2. Нажмите на «шестерёнку» слева.

3. Сгенерируйте ваш уникальный цвет, нажав на квадратик справа от текста «СГЕНЕРИРУЙТЕ СВОЙ УНИКАЛЬНЫЙ ЦВЕТ» ИЛИ выберите из уже готовых наборов.

4. Нажмите на ссылку «Сгенерировать код».

5. Скопируйте код из модального окна, и замените им содержимое файла main.min.css (Панель управления – Файловый менеджер – папка css).

Изменить цвет, вы сможете в любой нужный вам момент, и любое, необходимое вам, количество раз.

Установка дизайна модулей сайта

В папке «Модули» Вы найдете разработанные модули для uCoz. Для установки модуля (например, новости сайта), Вам необходимо будет перейти во вкладку Дизайн - Управление дизайном (шаблоны) и найти на странице «Новости сайта». Зайдите в папку «Новости сайта», в ней будут находиться такие файлы:

Вид материалов.txt
Страница архива материалов.txt
Страница материала и комментариев к нему.txt

Вам нужно будет скопировать содержимое файла Вид материалов.txt, и заменить им, «Вид материалов» в ПУ сайтом в графе «Новости сайта».

Далее, Вам нужно будет скопировать содержимое файла «Страница архива материалов.txt», и заменить им, «Страница архива материалов» в ПУ сайтом в графе «Новости сайта». Скопировать «Страница материала и комментариев к нему.txt», и заменить им — «Страница материала и комментариев к нему.txt».

По такому принципу, заменяем полностью все модули, которые присутствуют в папке «Модули». Название файла соответствует шаблону в панели управления.

На данном этапе, пропускаем, только папку «Почтовые формы».

Настройка модулей

Перейдите по ссылке ПУ — Новости сайтаНастройки модуля.

Установите значения:

Количество материалов на главной странице — 8

Количество материалов на странице в категории — 6

Количество материалов на странице в архиве — 6

Поставьте галочки напротив «Краткое описание материала» и «Дополнительное поле 1».

Нажмите на «Сохранить».


Перейдите по ссылке ПУ — БлогНастройки модуля.

Установите значения:

Количество материалов на главной странице — 6

Количество материалов на странице в категории — 6

Нажмите на «Сохранить».


Перейдите по ссылке ПУ — Каталог файловНастройки модуля.

Снимите галочки с:

Выводить количество материалов в категории возле названия категории

Выводить описание разделов в меню под названием раздела

Выводить описание категорий в меню под названием категории

Выводить меню для сортировки материалов

Установите значения:

Количество материалов на главной странице — 20

Количество материалов на странице в разделе — 20

Количество материалов на странице в категории — 20

Сортировка материалов на главной странице по умолчанию — Название материала (A)

Сортировка материалов в разделе по умолчанию — Название материала (A)

Сортировка материалов в категории по умолчанию — Название материала (A)

Поставьте галочку на «Использовать дополнительные поля», и установите значение 8.

Далее, отформатируйте поля для добавления материалов таким образом:

Нажмите на «Сохранить».


Перейдите по ссылке ПУ — Интернет-магазинНастройки модуля.

Установите значения:

Разделитель для генератора пути от главной сайта к категориям и страницам магазина —  <small>/</small>  (скопируйте вместе с пробелами в начале и конце кода)

Снимите галочки с:

Отображать последний элемент пути как ссылку

 

Корзина.

Сокращать названия товаров в корзине до: 19 символов

 

Список категорий.

Установите параметр «Тип отображения списка категорий» на «Раскрывающееся дерево».

Снимите галочку с «Выводить количество активных товаров возле названия категории».

Настройка загрузчика изображений.

Размеры (ширина/высота в пикселях) для превью изображения товара: 250х250

Качество сжатия JPG-изображений: 100

Цвет заливки пустых областей во время вписывания/обрезания изображения с соблюдением пропорций: FFFFFF

Настройки товарных блоков.

Показывать случайным образом M из N последних добавленных товаров: 12 из 24

Показывать случайным образом M из N самых просматриваемых товаров: 12 из 24

Показывать случайным образом M из N самых продаваемых товаров: 12 из 24

Максимально допустимое количество элементов в блоке похожих материалов: 12

Нажмите на «Сохранить».

Замена стандартных надписей

Перейдите по ссылке ПУЗамена стандартных надписей

Откройте ссылку «НАЗВАНИЯ МОДУЛЕЙ» — измените «Гостевая книга» на «Отзывы» и «Каталог файлов» на «Услуги».

Откройте ссылку «ФОРМА ДОБАВЛЕНИЯ МОДУЛЯ "НОВОСТИ САЙТА"» и измените «Дополнительное поле 1» на «Условия».

Откройте ссылку «ФОРМА ДОБАВЛЕНИЯ МОДУЛЯ "КАТАЛОГ ФАЙЛОВ"» и измените «Дополнительное поле 1» на «Информер | Название (верх)», «Дополнительное поле 2» на «Информер | Название (низ)», «Дополнительное поле 3» на «Доп. информация (№1)», «Дополнительное поле 4» на «Доп. информация (№2)».

Нажмите на кнопку «Сохранить».

Установка информеров

После успешной установки модулей, перейдите по ссылке Главная - Информеры и создайте информеры (нажмите на кнопку «Создать информер») в соответствующем порядке:

Если у вас уже есть информеры – удалите их, затем обновите страницу, и только тогда приступайте к созданию информеров.

 

Новости

Название информера: Новости

Раздел: Новости сайта

Тип данных: Материалы

Способ сортировки: Дата добавления материала D

Количество материалов: 3

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «1 Новости.txt» (папка «Информеры»)

 

Блог

Название информера: Блог

Раздел: Блог

Тип данных: Материалы

Способ сортировки: Дата добавления материала D

Количество материалов: 3

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «2 Блог.txt» (папка «Информеры»)

 

Визы на главной

Название информера: Визы на главной

Раздел: Каталог файлов

Тип данных: Материалы

Способ сортировки: Количество просмотров D

Количество материалов: 12

Количество колонок: 1

Дополнительные опции

Список ID категорий: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «3 Визы на главной.txt» (папка «Информеры»)

 

Работы на главной

Название информера: Работы на главной

Раздел: Каталог файлов

Тип данных: Материалы

Способ сортировки: Количество просмотров D

Количество материалов: 12

Количество колонок: 1

Дополнительные опции

Список ID категорий: 2

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «4 Работы на главной.txt» (папка «Информеры»)

 

Туры на главной

Название информера: Туры на главной

Раздел: Каталог файлов

Тип данных: Материалы

Способ сортировки: Количество просмотров D

Количество материалов: 12

Количество колонок: 1

Дополнительные опции

Список ID категорий: 3

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «5 Туры на главной.txt» (папка «Информеры»)

 

Слайдер на главной

Название информера: Слайдер на главной

Раздел: Новости сайта

Тип данных: Материалы

Способ сортировки: Дата добавления материала D

Количество материалов: 3

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «6 Слайдер на главной.txt» (папка «Информеры»)

 

Слайдер магазина

Название информера: Слайдер магазина

Раздел: Новости сайта

Тип данных: Материалы

Способ сортировки: Дата добавления материала D

Количество материалов: 3

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «7 Слайдер магазина.txt» (папка «Информеры»)

 

Новинки магазина

Название информера: Новинки магазина

Раздел: Интернет-магазин

Тип данных: Материалы

Способ сортировки: Дата добавления материала D

Количество материалов: 12

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «8 Новинки магазина.txt» (папка «Информеры»)

 

Cамый популярный товар

Название информера: Cамый популярный товар

Раздел: Интернет-магазин

Тип данных: Материалы

Способ сортировки: Количество просмотров D

Количество материалов: 1

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «9 Cамый популярный товар.txt» (папка «Информеры»)

 

Самый продаваемый товар

Название информера: Самый продаваемый товар

Раздел: Интернет-магазин

Тип данных: Материалы

Способ сортировки: Количество продаж D

Количество материалов: 1

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «10 Самый продаваемый товар.txt» (папка «Информеры»)

 

Случайный материал

Название информера: Случайный материал

Раздел: Блог

Тип данных: Материалы

Способ сортировки: Дата добавления материала D

Количество материалов: 1

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «11 В случайном порядке.txt» (папка «Информеры»)

Меню

Перейдите по ссылке ПУДизайнКонструктор меню

Оптимизируйте основное меню сайта. Например, вот так:

Нажмите на «Основное меню сайта», и с выпадающего списка выберите «Создать меню».

«Название» — Футер

«Способ отображения» — Вертикальный

Заполните меню необходимыми вам данными.

Нажмите на кнопку «Сохранить»

Установка почтовых форм

Перейдите по ссылке ПУПочтовые формыУправление почтовыми формами.

У вас должна присутствовать одна форма – Обратная связь ($MFORM_1$).

Приведите её к такому виду (нажмите на ссылку "Конструктор полей"):

Удалите поля: Web-site, Оценка сайта, и Код безопасности. Оставьте обязательным поле «E-mail отправителя».

После нажмите на кнопку «Управление дизайном».

Скопируйте код из файла Обратная связь.txt (папка из шаблоном – модули – Почтовые формы) и вставьте с заменой в форму управления дизайном.

Сохраните изменения.

Далее, нажмите на кнопку «Создать почтовую форму».

Название почтовой формы: Заказать звонок

Ответ об успешной отправке письма: <b>Наш менеджер свяжется с вами в ближайшее время.</b>

Нажмите на кнопку «Создать форму».

Нажмите на ссылку «Конструктор полей», только что созданной формы.

Приведите форму к такому виду:

На странице, что открылась, удалите поле «Текст сообщения».

Добавляйте поля с помощью кнопки «Добавить новое поле».

Очередность полей соответствует изображению вверху (добавлять поля нужно от первого к последнему). «Тип поля» (на странице добавления поля) соответствует «Типу заполнения» на изображению. Также, все обязательные поля отмечены красными звёздочками.

После нажмите на кнопку «Управление дизайном».

Скопируйте код из файла Заказать звонок.txt (папка из шаблоном – модули – Почтовые формы) и вставьте с заменой в форму управления дизайном.

Сохраните изменения.

Если вам необходимо изменить формат номера, перейдите шаблон почтовой формы, и найдите data-mask="+9 (999) 999 99 99".

По умолчанию, формат номера соответствует номеру России. Для Украины используйте +99 (999) 999 99 99, для Беларуси +999 (99) 999 99 99, для Казахстана используйте +9 (999) 999 99 99

Далее, нажмите на кнопку «Создать почтовую форму».

Название почтовой формы: Подбор тура

Ответ об успешной отправке письма: <b>Наш менеджер свяжется с вами в ближайшее время.</b>

Нажмите на кнопку «Создать форму».

Нажмите на ссылку «Конструктор полей», только что созданной формы.

Приведите форму к такому виду:

На странице, что открылась, удалите поле «Текст сообщения».

Добавляйте поля с помощью кнопки «Добавить новое поле».

Очередность полей соответствует изображению вверху (добавлять поля нужно от первого к последнему). «Тип поля» (на странице добавления поля) соответствует «Типу заполнения» на изображению. Также, все обязательные поля отмечены красными звёздочками.

Внимание! В поле «Значения» для полей типа select, checkbox и radio установите прочерк (—).

После нажмите на кнопку «Управление дизайном».

Скопируйте код из файла Подбор тура.txt (папка из шаблоном – модули – Почтовые формы) и вставьте с заменой в форму управления дизайном.

Сохраните изменения.

Если вам необходимо изменить формат номера, перейдите шаблон почтовой формы, и найдите data-mask="+9 (999) 999 99 99".

По умолчанию, формат номера соответствует номеру России. Для Украины используйте +99 (999) 999 99 99, для Беларуси +999 (99) 999 99 99, для Казахстана используйте +9 (999) 999 99 99

Далее, нажмите на кнопку «Создать почтовую форму».

Название почтовой формы: Обратная связь | Услуги

Ответ об успешной отправке письма: <b>Наш менеджер свяжется с вами в ближайшее время.</b>

Нажмите на кнопку «Создать форму».

Нажмите на ссылку «Конструктор полей», только что созданной формы.

Приведите форму к такому виду:

На странице, что открылась, удалите поле «Текст сообщения».

Добавляйте поля с помощью кнопки «Добавить новое поле».

Очередность полей соответствует изображению вверху (добавлять поля нужно от первого к последнему). «Тип поля» (на странице добавления поля) соответствует «Типу заполнения» на изображению. Также, все обязательные поля отмечены красными звёздочками.

Внимание! В поле «Значения» для полей типа select, checkbox и radio установите прочерк (—).

После нажмите на кнопку «Управление дизайном».

Скопируйте код из файла Обратная связь - Услуги.txt (папка из шаблоном – модули – Почтовые формы) и вставьте с заменой в форму управления дизайном.

Сохраните изменения.

Если вам необходимо изменить формат номера, перейдите шаблон почтовой формы, и найдите data-mask="+9 (999) 999 99 99".

По умолчанию, формат номера соответствует номеру России. Для Украины используйте +99 (999) 999 99 99, для Беларуси +999 (99) 999 99 99, для Казахстана используйте +9 (999) 999 99 99

Настройка форм

Настройка формы на примере формы «Подбор тура».

В шаблоне используется Bootstrap сетка (v4.0.0-alpha.5). Условно строка (ширина сайта) разделяется на 12 секций. И если вам нужно что-то разделить на половину, вам нужно использовать по 6 секций. Если на треть – по 4 секции, и так далее. Главное правило, что сума секций должна быть равна 12.

Более практичный пример, вы можете видеть в коде формы «Подбор тура». Для этого перейдите в режим редактирования формы ("Управление дизайном").

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

<!-- Начало | col-lg-6 = использовать половину строки --> — этот комментарий сигнализирует – «начало блока». А также, что используется половина строки (ширины сайта). Если вам нужно изменить ширину этого блока, то вы можете изменить номер в классе под ним. Например, <div class="col-lg-6 col-12"> изменяем на <div class="col-lg-12 col-12"> и таким образом получим, что блок будет занимать всю ширину страницы (если заменим col-lg-6 на col-lg-4 – то получим блок шириной треть ширины сайта).

<!-- Конец --> — этот сигнализирует – «конец блока».

Заполнение выпадающих списков данными.

В коде почтовой формы («Подбор тура»), вы можете найти вот такой код:

<select class="wide" name="f6">
<option>Любое популярное направление</option>
<option>Европа</option>
<option>Америка</option>
<option>Турция</option>
<option>Бали</option>
<option>Египет</option>
</select>

Атрибут name="f6" указывает системе uCoz на то, что этот код отвечает полю «Направление тура» текущей почтовой формы.

Внутри его нужно указать все необходимые вам данные (значения) в таком виде: <option>Текст</option>

Если вам необходим еще один (или несколько) выпадающих списков сделайте вот что:

1. Перейдите в конструктор полей и создайте новое поле select.

2. Скопируйте и вставьте вот эту заготовку в нужное вам место формы:

<select class="wide" name="f*">
<option>Текст</option>
<option>Текст</option>
<option>Текст</option>
</select>

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

Создание чекбоксов.

В коде почтовой формы («Подбор тура»), вы можете найти вот такой код:

<label><input type="checkbox" id="fc81" name="f8" value="Все включено"><span>Все включено</span></label>
<label><input type="checkbox" id="fc82" name="f8" value="Активный отдых"><span>Активный отдых</span></label>

Атрибут name="f8" указывает системе uCoz на то, что этот код отвечает полю «Опции» текущей почтовой формы. Атрибут id="fc81" указывает системе uCoz на то, что это первое значение поля «Опции». Атрибут id формируется таким образом: fc + код из атрибута name (сама цифра) + порядковый номер.

Данные, которые форма вам отправит, указываются в атрибуте value="текст".

Как создать чекбокс?

1. Перейдите в конструктор полей и создайте новое поле checkbox.

2. Скопируйте и вставьте вот эту заготовку в нужное вам место формы (тут два значения):

<label><input type="checkbox" id="fc*1" name="f*" value="Текст"><span>Текст</span></label>

<label><input type="checkbox" id="fc*2" name="f*" value="Текст"><span>Текст</span></label>

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

По такому же принципу, можно создавать радиокнопки, только нужно заменить в коде input type="checkbox" на input type="radio" и создавать поле типа radio.

Если вам необходимо установить форму на страницу (*/index/*), добавьте после вызова формы $MFORM_*$, вот такой код:

<script> $(document).ready(function() { $('#main input').iCheck({ checkboxClass: 'icheckbox_square', radioClass: 'iradio_square', increaseArea: '20%' }); $('#main select').niceSelect(); }); </script>

Блоки на главной странице

Перейдите по ссылке Панель управления - Управление дизайном - глобальный блок "PROMO".

Блок с категоризатором формируется на первых строках шаблона «PROMO».

Структура блока:

<div class="rubric col-lg-4 col-12">
<a class="rubric-data" href="ссылка-на-нужную-страницу">
<div class="rubric-data-text">
<span class="rubric-data-text-link">Название услуги</span>
<div class="rubric-data-text-main">Описание</div>
</div>
<img class="rubric-data-background" src="ссылка-на-изображение" alt="">
</a>
</div>

По умолчанию, используется 3 блока с данными. Если вам нужно использовать 2 блока, то измените класс с <div class="rubric col-lg-4 col-12"> на <div class="rubric col-lg-6 col-12">. Если вам нужно использовать 4 блока, то измените класс с <div class="rubric col-lg-4 col-12"> на <div class="rubric col-lg-3 col-12">.

Тут (как и в большинстве блоков в шаблоне) используется правило из Bootstrap сетки: "Условно строка (ширина сайта) разделяется на 12 секций. И если вам нужно что-то разделить на половину, вам нужно использовать по 6 секций. Если на треть – по 4 секции, и так далее. Главное правило, что сума секций должна быть равна 12."

Например, мы используем три блока в категоризаторе, значит мы указываем класс col-lg-4 (три блока умножить на номер класса будет равно 12).

 

Главная страница со слайдером.

На первых строках шаблона «PROMO» (<div id="slider" data-speed="8">) будет располагаться код слайдера. Атрибут data-speed задает количество секунд до смены слайда.

В слайдер, информация добавляется в ручном режиме.

Информация в слайдере имеет простую структуру:

<div class="slider-slide">
<div class="slider-slide-body">
<div class="slider-slide-body-title">
<a href="ссылка-на-нужную-страницу">Название материала</a>
</div>
<img class="slider-slide-background" src="ссылка-на-изображение" alt="">
</div>
</div>

Этот код нужно вставлять в div-блок с class = slider-body («PROMO» – строка №2).

ЕСЛИ у Вас нет необходимых знаний HTML, Вы можете использовать стандартные функции конструктора uCoz.

На этом этапе у вас уже есть создан информер №6 «Слайдер на главной».

Для того, чтобы вставить информер, удалите все в диапазоне строк 3 (<div class="slider-slide">) - 27 (</div>) на странице шаблона «PROMO».

На место удаленного кода вставьте код вызова информера — $MYINF_6$.

Сохраните изменения.

 

Настройка блока «Мы предлагаем вам» описана в разделе «Настройка и наполнение модуля с услугами»

 

Блок «Как мы работаем?» формируется на ~70 строке [~66] (<div class="land-block-body row">).

В квадратных скобках указаны строки в шаблоне со слайдером.

Структура:

<div class="col-xl-3 col-lg-6 col-12">
<div class="work-unit" data-number="номер"><div>Название</div></div>
</div>

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

 

Блок с предложением консультации формируется на ~89 строке [~85] (<div class="text-inner">).

В квадратных скобках указаны строки в шаблоне со слайдером.

Структура:

<div>Консультация:<br/>«Какая виза мне нужна?»<br/><a href="#" class="to-contact-js" data-topic="Тема сообщения" data-message="Автоматически генерируемый текст сообщения">Получить бесплатно</a></div>

Изображение для этого блока формируется на ~ 94 строке [~91] (<div class="land-block-special-image">).

Структура:

<img src="ссылка-на-изображение" alt="">

 

Анимация текста блока «Мы это...» формируется на ~122 строке [~118] (<ul class="why-we-options" data-speed="3500">).

В квадратных скобках указаны строки в шаблоне со слайдером.

Структура:

<li>... текст</li>

Внимание! Первому значению нужно присвоить класс active. Вот так:

<li class="active">... текст</li>

Цифры из блока «Мы это...» формируются на ~132 строке [~128] (<div class="why-we-number-section row">).

Структура:

<div class="col-sm-6 col-12">
<div class="number-unit">
<div class="number-unit-icon"><span class="класc-иконки"></span></div>
<div class="number-unit-numeric">Цифра</div>
<div class="number-unit-text">Описание</div>
</div>

Инструкция по изменению иконок описана в разделе «Изменение иконок на примере блока с преимуществами».

Фотографии в блоке «Мы это...» формируются на ~ 160 строке [164] (<div class="why-we-photo-section row">).

Этот блок условно делится на два блока (<div class="col-sm-6 offset-sm-0 col-10 offset-1">), в первом используется одна фотография, во втором – две.

Структура:

<a href="ссылка-на-изображение" class="image-popup photo-unit" data-title="Описание">
<span>Описание</span>
<img src="ссылка-на-изображение" alt="">
</a>

Блоки на главной странице модуля «Интернет-магазин»

Перейдите по ссылке Панель управления - Управление дизайном - Главная страница магазина

Слайдер формируется на 30 строке (<div class="shop-main-slider" data-speed="8">). Атрибут data-speed задает количество секунд до смены слайда.

В слайдер, информация добавляется в ручном режиме.

Информация в слайдере имеет простую структуру:

<div class="shop-main-slider-slide">
<div class="shop-main-slider-slide-body"><div>Описание слайда</div></div>
<div class="shop-main-slider-slide-special">Условие (если необходимо)</div>
<div class="shop-main-slider-slide-image"><img src="ссылка-на-изображение" alt=""></div>
<div class="shop-main-slider-slide-button"><a href="ссылка-на-страницу" class="button">Подробнее</a></div>
</div>

Этот код нужно вставлять в div-блок с class = shop-main-slider-body (строка №31).

ЕСЛИ у Вас нет необходимых знаний HTML, Вы можете использовать стандартные функции конструктора uCoz.

На этом этапе у вас уже есть создан информер №7 «Слайдер магазина».

Для того, чтобы вставить информер, удалите все в диапазоне строк 31 (<div class="shop-main-slider-body">) - 49 (</div>).

На место удаленного кода вставьте код вызова информера — $MYINF_7$.

Сохраните изменения.

 

Блок «Специальное предложение» формируется на 67 строке (<div id="shop-special" class="shop-section">).

Структура:

<div class="shop-section-special">
<div class="shop-section-special-body">
<div class="shop-section-special-body-inner">
<span>Специальное предложение</span>
<div>Описание предложения</div>
<a href="ссылка-на-страницу">Узнать подробнее</a>
</div>
</div>
<div class="shop-section-special-image" style="background-image: url('ссылка-на-изображение')"></div>
</div>
<div class="shop-section-special-count" data-text="до конца предложения" data-time-year="ГОД" data-time-month="НОМЕР МЕСЯЦА" data-time-day="ЧИСЛО" data-time-hour="ЧАС"></div>

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

Предположим, что окончание специального предложения будет 1 января 2018 года в 00:00.

Для этого в структуру блока запишем следующие данные:

data-time-year="2018" data-time-month="1" data-time-day="1" data-time-hour="0"

Или следующий пример.

Предположим, что окончание специального предложения будет 10 марта 2018 года в 15:00.

Для этого в структуру блока запишем следующие данные:

data-time-year="2018" data-time-month="3" data-time-day="10" data-time-hour="15"

Вы можете не использовать таймер в специальном предложении. Для этого удалите вот этот кусок кода: <div class="shop-section-special-count" data-text="до конца предложения" data-time-year="ГОД" data-time-month="НОМЕР МЕСЯЦА" data-time-day="ЧИСЛО" data-time-hour="ЧАС"></div>

 

Блок с преимуществами формируется на 99 строке (<div class="shop-main-features row">).

Структура:

<div class="col-lg-3 col-md-6 col-12">
<a href="ссылка-на-страницу">
<div class="mf-icon"><span class="класc-иконки"></span></div>
<div class="mf-title">Название</div>
<div class="mf-body">Описание</div>
</a>
</div>

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

Изменение иконок на примере блока с преимуществами

Перейдите сюда – http://agencium-temp.do.am/f/flaticon.html

Выберете необходимую вам иконку, скопируйте её класс, например flaticon-growth (без точки).

Далее перейдите "Панель управления" - "Управление дизайном" - Главная страница магазина на строку 15

<div class="mf-icon"><span class="flaticon-shopping-cart-1"></span></div>

Вам нужно будет удалить flaticon-shopping-cart-1 и заменить на необходимую иконку (в нашем случае flaticon-growth). Сохраните изменения.

В других блоках иконки можно менять аналогичным способом.

Если нужно вставить иконку в текст/ссылку используйте следующую конструкцию:

<span class="название-класса"></span>

Такой же принцип работы с иконками от Font Awesome, только класс там формируется таким образом: fa + имя класса.

Например, <span class="fa fa-address-card"></span>

Блоки на главной странице с услугами

Перейдите по ссылке Панель управления - Управление дизайном - Главная страница каталога файлов

Блоки с услугами формируются на 32 строке (<div id="rubrics" class="rubric-page">).

Структура:

<div class="rubric">
<a class="rubric-data" href="ссылка-на-категорию">
<div class="rubric-data-text">
<span class="rubric-data-text-link">Название услуги</span>
<div class="rubric-data-text-main">Текст под названием услуги</div>
</div>
<img class="rubric-data-background" src="ссылка-на-изображение" alt="">
</a>
<div class="rubric-desc"><span>Описание услуги</span></div>
</div>

Хедер и футер

Перейдите по ссылке Панель управления - Управление дизайном - Верхняя часть сайта

Блок с логотипом формируется на 8 строке (<a id="logo" href="/">).

Структура:

<a id="logo" href="/">
<div class="logo-icon">
<span class="flaticon-map"></span>
</div>
<div>
<span class="logo-name">Agencium</span>
<span class="logo-slogan">Быстро. Надежно. Безопасно</span>
</div>
</a>

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

Вместо <span class="flaticon-map"></span> вы можете использовать логотип — замените этот код на <img src="ссылка-на-логотип">

Указать контактный адрес электронной почты можно на 39 строке.

Структура:

<div class="mail-box-e"><a href="mailto:mail@agencium.mail.ru">mail@agencium.mail.ru</a></div>

Блок с номером телефона и контактными данными формируется на 25 строке (<div class="info-box">).

Структура:

<div class="info-box">
<div class="info-box-phone">+ 1 (234) <span>56 78 999</span></div>
<div class="info-box-body">
<div class="info-box-body-additional">
<div><span class="класс-иконки"></span>данные</div>
<div><span class="класс-иконки"></span>данные</div>
</div>
<div class="info-box-body-hours">Работаем: с 9:00 до 18:00</div>
</div>
</div>

Изменить главный номер телефона можно на этой строчке — <div class="info-box-phone">+ 1 (234) <span>56 78 999</span></div> (все что указано внутри блока <span></span> будет выделено цветом).

Также, вы можете добавить дополнительные способы связи в блок с class="info-box-body-additional". Для этого используйте такую заготовку:

<div><span class="класс-иконки"></span>данные</div>

Как установить иконку можно узнать на шаге «Изменение иконок на примере блока с преимуществами».

 

Далее, перейдите по ссылке Панель управления - Управление дизайном - Нижняя часть сайта

Ссылку на ваш адрес можно указать на 30 строке.

<a class="popup-map" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&amp;hl=ru&amp;t=v&amp;hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">г. Лондон, ул. Бейкер-Стрит, 221Б</a>

Для вставки карты перейдите на сайт google.ru/maps

На странице, что открылась найдите необходимое место (выровняйте его по центру, и кликните на него). Далее, перейдите в меню. Более наглядно → скриншот.

Из меню выберите пункт «Ссылка/код». В диалоговом окне выберите вкладку «Код», и скопируйте код из поля ввода.

Например, вы получили такой код:

<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d1122.3682594176234!2d37.622634110760195!3d55.7630791253118!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2sru!4v1497443463522" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Из него нужно скопировать выделенный кусок кода (демонстрационный код выделенный красным).

Далее, перейдите на 30 строку, и вставьте скопированный ранее код в <a class="popup-map" href="сюда-вставить-код">Адрес</a>

Указать номера телефонов можно на 34 и 35 строке.

Структура:

<a href="tel:+123456789000">+12 (345) 67 89 000</a>

Указать контактный адрес электронной почты можно на 39 строке.

Структура:

<a href="mailto:mail@agencium.mail.ru">mail@agencium.mail.ru</a>

Также, в футере вы можете указать ссылки на социальные страницы.

Наполнение интернет-магазина

Перед добавлением товаров в интернет-магазин, создайте нужное вам количество категорий (панель управления — интернет-магазин — категории товаров).

Если вам нужно использовать опции товаров, то для их добавления перейдите в Панель управления — интернет-магазин — Опции товаров.

На странице «Опции товаров» нажмите на ссылку «Добавить опцию» — введите название опции, выберите категорию на которую опция будет распространяться, введите варианты значений (каждое значение из новой строки), и обязательно установите галочку напротив «выводить в виде "radio buttons"» и «Выделять первое значение в "radio buttons"».

Более наглядно:

product-options

Также, при добавлении товаров, установите галочку на странице товара, что хотите использовать созданную ранее опцию.

При добавлении товаров в блок «с этим товаром покупают», оптимальное количество товаров — 4 (или кратное 4).

Настройка и наполнение модуля с услугами

Для начала, перейдите в Панель УправленияУслуги (Каталог файлов)Управление категориями

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

Это может быть одна, две, три и больше категорий. А уже в эти категории вы будете добавлять конкретные услуги.

После создания категорий — запомните их идентификаторы.

Допустим, что вы создали три категории.

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

Более подробную расшифровку какое поле в какое место выводит информацию (в информере на главной странице), вы можете увидеть на этой схеме:

Для вида материалов в модуле «Услуги» схема выше сохраняет достоверность, ТОЛЬКО вместо «Информер | Название (низ)» выводиться информация из поля «Название материала».

Для изменения информации в шаблоне «Вид материалов», перейдите в Панель УправленияУправление дизайномУслуги (Каталог файлов)Вид материалов

На странице, что открылась вы можете увидеть вид материалов для каждой категории. Вид каждой категории отделен комментариями вида: <!-- Начало условия для категории №1 (название) --> и <!-- Конец условия №1 -->; а также: условиями <?if($CID$ = 1)?>код<?endif?>

<?if($CID$ = 1)?> — условие, при котором код который в него заключен будет выводится для категории с идентификатором №1.

<?if($CID$ = 2)?> — условие для категории с идентификатором №2.

<?if($CID$ = 3)?> — условие для категории с идентификатором №3.

<?endif?> — конец блока с условием.

Разберем более подробнее код для каждой категории.

Категория №1. Базовый вывод информации.

Структура:

<?if($CID$ = 1)?>
<a href="$ENTRY_URL$" class="offer-block offer-block-visa">
<div class="offer-block-image"><img src="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>/img/noimage.png<?endif?>" alt="$TITLE$"></div>
<div class="offer-block-text">
<div>$TITLE$</div>
</div>
</a>
<?if($MODER_PANEL$)?><div class="entry-block-offer-mod">$MODER_PANEL$</div><?endif?>
<?endif?>

Тут, скорее всего, вам ничего не нужно будет изменять.

Категория №2. Вывод дополнительной информации при наведении.

Структура:

<?if($CID$ = 2)?>
<a href="$ENTRY_URL$" class="offer-block offer-block-work">
<div class="offer-block-image">
<img src="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>/img/noimage.png<?endif?>" alt="$TITLE$">
<div class="offer-block-meta">
<?if($OTHER3$)?><div title="Пол – $OTHER3$"><span class="flaticon-avatar"></span><?if(len($OTHER3$) > 3)?><?substr($OTHER3$, 0, 3)?>.<?else?>$OTHER3$<?endif?></div><?endif?>
<?if($OTHER4$)?><div title="Возраст – $OTHER4$"><span class="flaticon-stats"></span>$OTHER4$</div><?endif?>
</div>
</div>
<div class="offer-block-text">
<span>$OTHER1$</span>
<div>$TITLE$</div>
</div>
</a>
<?if($MODER_PANEL$)?><div class="entry-block-offer-mod">$MODER_PANEL$</div><?endif?>
<?endif?>

Красным выделено информацию, которую вы можете изменить под свои нужды. Оранжевым выделены классы иконок, которые вы можете изменить (согласно инструкции, которая описана в разделе «Изменение иконок на примере блока с преимуществами») под свои нужды.

Например, вам не нужно, чтобы в категории №2 выводилась информация о возврате, а нужно выводить информацию о городе, или стране. Вы просто изменяете текст «Возврат» на «Город», и в дальнейшем добавляете материалы, при этом указываете в дополнительном поле информацию о городе или стране.

Категория №3. Вывод дополнительной информации при наведении.

Структура:

<?if($CID$ = 3)?>
<a href="$ENTRY_URL$" class="offer-block offer-block-tour">
<div class="offer-block-image">
<img src="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>/img/noimage.png<?endif?>" alt="$TITLE$">
<div class="offer-block-meta">
<?if($OTHER3$)?><div title="Количество мест – $OTHER3$"><span class="flaticon-group"></span>$OTHER3$</div><?endif?>
<?if($OTHER4$)?><div title="Продолжительность тура – $OTHER4$"><span class="flaticon-clock"></span>$OTHER4$</div><?endif?>
</div>
</div>
<div class="offer-block-text">
<span>$OTHER1$</span>
<div>$TITLE$</div>
</div>
</a>
<?if($MODER_PANEL$)?><div class="entry-block-offer-mod">$MODER_PANEL$</div><?endif?>
<?endif?>

Красным выделено информацию, которую вы можете изменить под свои нужды. Оранжевым выделены классы иконок, которые вы можете изменить (согласно инструкции, которая описана в разделе «Изменение иконок на примере блока с преимуществами») под свои нужды.

Если вам необходимо добавить вид материалов для новой категории, копируете один из видов материалов выше (вместе с условием от <?if($CID$ = *)?> до <?endif?>), и вставляете в сам низ — указываете идентификатор категории, изменяете код под свои нужды и сохраняете шаблон «Вид материалов».

Если вы хотите выводить материалы без дополнительной информации, тогда скопируйте код:

<a href="$ENTRY_URL$" class="offer-block offer-block-visa">
<div class="offer-block-image"><img src="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>/img/noimage.png<?endif?>" alt="$TITLE$"></div>
<div class="offer-block-text">
<div>$TITLE$</div>
</div>
</a>
<?if($MODER_PANEL$)?><div class="entry-block-offer-mod">$MODER_PANEL$</div><?endif?>

И замените им весь код в шаблоне «Вид материалов».

Информеры и вывод информации о услугах на главной странице.

Вид материалов на главной странице указан в трёх информерах: №3 Визы на главной, №4 Работы на главной, №5 Туры на главной. В них указан код, который мы рассматривали выше в шаблоне вид материалов, только вместо одного "файла" с условиями, используются три "файла" (информера).

Если вы что-то изменили в шаблоне «Вид материалов», вам нужно это же изменить в нужном информере (аналогичное расположение изменяемых данных).

Если вам необходимо добавить информер для новой категории:

  1. Копируете один из видов информеров
  2. Создаете новый информер:
    • Название информера: Туры на главной
    • Раздел: Каталог файлов
    • Тип данных: Материалы
    • Способ сортировки: Количество просмотров D
    • Количество материалов: 12
    • Количество колонок: 1
    • Дополнительные опции → Список ID категорий: идентификатор категории
  3. Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код, который скопировали до этого.
  4. Измените новый вид информера под свои нужды и сохраните изменения.

Если вы хотите выводить информеры без дополнительной информации, тогда удалите код в диапазоне строк 6-7 во всех информерах (№3 Визы на главной, №4 Работы на главной, №5 Туры на главной).

Более наглядно:

Выделенную область удалите.

Перейдите по ссылке Панель управления - Управление дизайном - глобальный блок "PROMO".

Блок с предложением консультации формируется на ~37 строке [~33] (<div class="land-block land-block-we-offer option-chooser col-12">).

Структура:

<div class="land-block land-block-we-offer option-chooser col-12">
<div class="land-block-title">
<div class="land-block-title-text option-chooser-links">Мы предлагаем вам: <span data-href="/load/visa/1" class="active">визу</span>, <span data-href="/load/work/2">работу</span>, <span data-href="/load/tour/3">туры</span>.</div>
<div class="land-block-title-description">Лучшие результаты для вас. Отсортировано по популярности.</div>
</div>
<div class="land-block-body">
<div class="option-chooser-options active row">
$MYINF_3$
</div>

<div class="option-chooser-options row">
$MYINF_4$
</div>

<div class="option-chooser-options row">
$MYINF_5$
</div>

</div>
<a href="/load/visa/1" class="button">Весь список</a>
</div>

Логика работы этого блока такая: при нажатии на один из элементов span (внутри div с class="land-block-title-text option-chooser-links") открывается соответствующий элемент из классом option-chooser-options. Т.е при нажатии на второй элемент span будет показан второй блок с $MYINF_4$.

Также, те элементы которые "связаны" друг с другом подчёркнуты одним цветом.

Очень важно, чтобы количество элементов span была равна количеству элементов с классом option-chooser-options.

После установки шаблона и создания категорий, вам нужно будет указать в атрибутах data-href элемента span ссылку на нужные вам категории.

Если вам нужно удалить какой-то элемент, то сделайте вот что:

1. Удалите нужный span (внутри div с class="land-block-title-text option-chooser-links"). Например, последний.

2. Удалите последний div с class="option-chooser-options".

Если вам необходимо добавить еще один элемент, то придерживайтесь следующего алгоритма:

1. Создайте новый span (внутри div с class="land-block-title-text option-chooser-links"). Например, с такой структурой:

<span data-href="/load/license/4">лицензия</span>

data-href — это тот атрибут, данные с которого, подставляются в ссылку «Весь список» (т.е он должен ссылаться на нужную вам категорию).

2. Создайте новый div (внутри блока с class="land-block-body"). Например, с такой структурой:

<div class="option-chooser-options row">
Тут можно вывести нужный вам данные или информер.
</div>

3. Сохраните изменения.

При работе с данным блоком придерживайтесь следующих инструкций:

1. Первый элемент span (внутри div с class="land-block-title-text option-chooser-links") должен иметь класс active.

2. Первый элемент div с class="option-chooser-options row" должен иметь класс active.

3. Укажите значение для ссылки «Весь список», которое будет равно атрибуту data-href первого span с классом active.

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

ЧаВо

1. Работает ли в шаблоне конструктор блоков?

— Да.


2. Можно использовать только модуль Интернет-магазин?

Да. Для этого перейдите в Панель Управления – Настройки – Общие настройки. На странице, что открылась найдите параметр «При переходе на главную страницу открывать» и установите его на «Интернет-магазин».


3. Весь новый товар (и записи в блоге) отмечаются флажком «Новое». На какое время он будет выводиться?

Стандартно он выводиться на два дня от времени публикации товара (или записи в блоге). Если вы хотите это изменить, то перейдите по ссылке Панель управления - Управление дизайном - Верхняя часть сайта. На странице, что открылась (~ 2 строка) найдите такой код var ADD_TIE_DAYS = 2;
Измените число 2 на нужное вам количество дней.


3. Пусто в блоке «Бестселлеры».

Этот блок генерируется автоматически, на основе количества проданного товара.

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

Более наглядно:

Перед вами откроется окно, в котором установите параметр «Продаж» на 5 (например).
Более наглядно:

Нажмите на кнопку «Сохранить».

Перейдите на главную страницу. Блок с бестселлерами будет содержать товар, который вы редактировали выше (как правило, моментально, иногда нужно будет подождать 10-15 минут, и обновить страницу).

По такому же принципу, вы сможете «добавить» в этот блок другой товар, ДО ПЕРВЫХ продаж. Далее uCoz будет автоматически изменять содержимое этого блока.
Сначала блока бестселлеры «идут» товары с наибольшим количеством продаж.


4. Как «поменять» местами расположение сайд-бара из правой части — в левую?

Для этого перейдите в Панель Управления – Управление дизайном – Быстрая замена. На странице, что открылась, в поле «Что заменить» введите:

<div class="col-xl-9 col-12">

А в поле «На что заменить» введите:

<div class="col-xl-9 col-12 push-xl-3">

Нажмите на кнопку «Произвести замену».

Далее, вернитесь обратно на страницу Быстрая замена, и в поле «Что заменить» введите:

<div class="shop-side col-xl-3 offset-xl-0 col-md-8 offset-md-2 col-12">

А в поле «На что заменить» введите:

<div class="shop-side col-xl-3 pull-xl-9 offset-xl-0 col-md-8 offset-md-2 col-12">

Нажмите на кнопку «Произвести замену». После этих действий, сайд-бар изменить свое местоположение из правой части сайта – в левую.


5. Ошибка при отправке формы со страниц услуг: «Поле "E-mail отправителя" заполнено неправильно».

Перейдите в Панель Управление — Почтовые формы — Управление почтовыми формами.
Выберите форму «Обратная связь | Услуги», и нажмите на кнопку «Управление дизайном»

Далее, найдите в коде вот такие строки:

<input type="hidden" id="form-topic-js" name="f1" value="from@site.form">
<input type="hidden" name="f2" value="—">

и замените на:

<input type="hidden" name="f1" value="from@site.form">
<input type="hidden" id="form-topic-js" name="f2" value="—">

Сохраните изменения.


Частые вопросы будут пополняться по мере возможности и необходимости.