Multi-Shop

ВНИМАНИЕ!

Чтобы убрать ДЕМО-режим перейдите в Настройки темы:

Магазин -> Витрина -> Выберите тему MULTISHOP в выпадающем списке -> Настройки темы

Выберите значение для ДЕМО РЕЖИМа "Выключить". Нажмите "Сохранить".

Содержание

1. Шапка сайта
1.1 Летающая корзина
1.2 Телефон
1.3 Логотип и слоган

2. Горизонтальное меню категорий
2.1 Выпадающий список
2.2 Выпадающее меню
2.3 Комбинированное
-Встраивание произвольного HTML
2.4 Настройка индивидуального отображения категорий
2.4.1 Корневые категории
2.4.2 Дочерние категории
2.4.3 Вкладка "Еще"

3. Горизонтальное меню информационных страниц и приложений

4. Слайдер
4.1 Слайдер товаров магазина
4.2 Слайдер Ваших баннеров и фотографий
4.3 HTML-слайдер

5. Страница категорий
5.1 Отображение товаров
5.2 Загрузка товаров (постраничная навигация / ленивая загрузка)

6. Страница товара
6.1 Вкладки
6.2 Изображения
6.3 Выбор характеристик

7. Наклейки

8. Блок Новости
8.1 Превью новости
8.2 Ссылка на сторонний сайт/блог

9. Фильтр товаров

10. Подвал сайта

11. Баннеры

12. Иконки способов оплаты

13. Эскизы изображений

* * * 1. Шапка сайта * * *

1.1 Летающая корзина

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

Все это доступно с любой страницы сайта, что облегчает управление корзиной и позволяет в любой момент времени внести в нее изменения!

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

Магазин -> Витрина -> Дизайн -> Настройки темы.

Поле "Количество товаров в летающей корзине ", указывайте числа.

1.2 Телефон

Для изменения телефона зайдите в

Магазин -> Настройки -> Общие настройки.

Измените поле "Телефон".

Если Вы хотите указать другой телефон в шаблоне, сохранив текущий, то зайдите в

Магазин -> Витрина -> Дизайн -> Настройки темы

и заполните поле Телефон на витрине.

Чтобы полностью удалить вывод телефона, зайдите в

Магазин -> Витрина -> index.html.

Найдите блок

<!-- Телефон / Phone -->...<!-- Конец / End -->

и удалите его.

1.3 Логотип и слоган

Параметры логотипа: ширина – 261px; высота – 88px.

Максимальные параметры логотипа: ширина – 370px; высота – 90px.

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

Для того чтобы изменить логотип сайта, Вам необходимо зайти в:

Магазин -> Витрина -> Дизайн -> Настройки темы.

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

* * * 2. Горизонтальное меню категорий * * *

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

Cуществует 3 типа отображения категорий: выпадающим списком, выпадающим меню, комбинированным методом. Также можно настроить индивидуальное отображение каждой категории.

2.1 Выпадающий список

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

1) Корневые категории

Допустимые дополнительные параметры: 

columns=groups

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

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

Рассмотрим рабочий пример:

У категории "Украшения" имеется 6 подкатегорий: Серьги, Подвески и колье, Запонки, Детские украшения, Аксессуары для волос, Шкатулки для украшений. Мы хотим получить следующий результат:

Наши действия с самого начала:

1. Нажимаем на категорию Украшения, выбираем "Настройки категории":
   
   В "Дополнительных параметрах" указываем: columns=groups. Таким образом, даем понять, что у этой категории будет происходить ручная группировка:
   
2. В "Дополнительных параметрах" подкатегорий Серьги, Детские украшения указываем: column_group=mycolumn.
   Примечание, mycolumn - любое латинское название, которое будет идентификатором, объединяющим подкатегории.
   
3. В "Дополнительных параметрах" подкатегорий Подвески и колье, Запонки, Шкатулки для украшений указываем: column_group=secondcolumn.
4. Подкатегорию Аксессуары для волос не трогаем, потому что ее объединять мы ни с кем не собираемся.

Таким образом будут сгруппированы подкатегории в 3 колонки.

columns=4

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

Вот что произойдет, если у корневой категории Украшения вместо columns=groups мы укажем columns=4:

Максимальное число параметра columns равно 8 (при максимальной ширине шаблона).

отсутствие параметра

Если у корневой категории отсутствует параметр columns, то группировка произойдет автоматически.

2) Подкатегории

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

double_column=1

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

Пример:

Укажем в "Дополнительных параметрах" категории "Для него" значение double_column=1 и получим:

3) Корневые категории и вложенные категории

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

Необходимо запомнить главное правило, что преимущество отдается параметру, указанному у вложенной категории. Например, если корневая категория будет иметь параметр collapsible=1, а одна из вложенных - collapsible=0, то при формировании списка категорий вложенная категория будет иметь значение параметра collapsible равное 0.

Что значит данный параметр?

collapsible=1

Для категории "Для него" указан параметр collapsible=1:

Все вложенные подкатегории находятся в закрытом состоянии.

collapsible=0

Для категории "Для него" указан параметр collapsible=0:

Все вложенные категории будут раскрыты.

Представим ситуацию, что Вы хотите закрыть категорию "Профессиональные спортивные", для этого в настройках этой категории добавьте в "Дополнительных параметрах" значение collapsible=1. Тем самым, Вы закроете данную категорию:

2.2 Выпадающее меню

Отображение категорий выпадающим меню:

2.3 Комбинированное

Встраивание произвольного HTML

При использовании комбинированного типа отображения категорий у Вас есть возможность встроить в отображение категорий первого уровня произвольный HTML. Это могут быть баннеры, товары, что-угодно!

Обратите внимание! Даже при отсутствии дочерних категорий Вы можете добавить любой HTML-код в категорию первого уровня.

Доступны верхняя и нижняя области категорий

Как это работает?

В "Дополнительных параметрах" категории можно указать два значения:

1. category_top_html - верхняя область
2. category_bottom_html - нижняя область

Этим значениям необходимо присвоить идентификатор Блока, созданного в приложении Сайт. В Блоке и будет располагаться Ваш HTML.

Рассмотрим пример:

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

2) Создадим блок с баннером: Сайт - Блоки

3) В нужной категории первого уровня нажмем "Настройки категории" и в "Дополнительных параметрах" пропишем:

Результаты работы для:

а) Категории, не имеющей дочерних

б) Категории, имеющей подкатегории

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

ВНИМАНИЕ! Изображения, помещенные в категории будут растягиваться по ширине выпадающего окна. Изменить такое поведение можно в файле custom.css. Найдите правило
.dropdown-combine-wrap ul.menu-v.l0 ul.menu-v.l1 > li.category-html img {
    min-height: 100%;
    width: 100%;
}
и удалите строчку "width: 100%;"

2.4 Настройка индивидуального отображения категорий

2.4.1 Корневые категории

Категории имеют три типа отображения, описанных в пунктах 2.1, 2.2, 2.3.

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

menu_type

Данные параметр указывается в "Дополнительных параметрах" категории.

Значения, которые может принимать параметр:

1. list - отображение категорий списком
2. menu - отображение категорий выпадающим меню
3. combine - комбинированное отображение категорий

Пример указания параметра: menu_type=list

2.4.2 Дочерние категории

Дочерние категории также имеют параметр menu_type, но он может принимать только два значение: list и menu.

В данном примере категория "Профессиональные с длинным" имеет значение menu_type=menu, а категория "Мокасины" - menu_type=list

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

2.4.3 Вкладка "Еще"

Отображение данной вкладки и ее название может быть изменено в Настройках темы.

* * * 3. Горизонтальное меню информационных страниц и приложений * * *

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

Для того чтобы создать такие страницы с индивидуальными иконками, Вам потребуется:

1. Создать новую страницу в любом из приложении, у которого имеется такой функционал. Рассмотрим пример с Магазином:
   
2. При создании нажмите "Еще" и в "Дополнительных параметрах" укажите название активной и неактивной иконкок, а также параметр topmenu=1.
   Примечание, максимальный размер иконок: ширина - 35px; высота - 20px.
   

Вот так выглядит меню с описанием всех его элементов:

Как загрузить активные/неактивные иконки?

Вам необходимо зайти в приложение "Сайт" -> Файлы и загрузить иконки в каталог themes/multishop/img/colors/ЦВЕТ_ВАШЕЙ_ТЕМЫ/icons/:

Если каталог отсутствует, то зайдите в Сайт-Дизайн, выберите шаблон Multishop и нажмите Сохранить. После этого все файлы появятся.

Доступные иконки:

• blog.png, blog-active.png
• comment.png, comment-active.png
• contacts.png, contacts-active.png
• delivery.png, delivery-active.png
• payment.png, payment-active.png
• photo.png, photo-active.png
• shop.png, shop-active.png
• site.png, site-active.png

* * * 4. Слайдер * * *

Тема дизайна "Multishop" дает Вам возможность создания слайдеров без использования дополнительных плагинов или приложений.

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

Существует 3 вида слайдеров:

1. Слайдер товаров магазина.
2. Слайдер Ваших баннеров и фотографий (приложение Фото).
3. HTML-слайдер

Рассмотрим подробнее каждый пункт.

4.1 Слайдер товаров магазина

Существует четыре режима отбора товаров для слайдера:

• set/bestsellers - получение списка товаров с идентификатором bestsellers
• category/437 - получение товаров из категории с идентификатором 437
• tag/украшения - получение товаров, имеющих тег украшения
• подготовленным массивом

Первые три режима объединены и имеют одинаковую конструкцию вызова:

{include file="slider.html" slider_id="12" search="set/bestsellers" search_count="7" name="Хиты продаж"}, где

• file="slider.html" - обязательный параметр, который указывает путь к шаблону слайдера.
• slider_id="12" - обязательный параметр, присваивает идентификатор слайдеру. Если Вы используете несколько слайдеров на одной странице, то параметры slider_id не должны повторяться.
  ВНИМАНИЕ! Используйте значения slider_id > 10
• search="set/bestsellers" - получение списка товаров с идентификатором bestsellers. В поле search могут быть вставлены category/437 и tag/украшения
• search_count="7" - количество товаров, которые будут получены. Значение по умолчанию 10
• name="Хиты продаж" - заголовок, который появится перед слайдером.

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

{$crossselling = $product->crossSelling()}
{include file="slider.html" slider_id=13 products=$crossselling}, где

• products=$crossselling - подготовленный массив с товарами

Допустимые параметры:

• slider_id - уникальный идентификатор слайдера (обязательный)
• search - режим получения товаров (обязательный)
• search_count - количество товаров
• name - заголовок, который появится перед слайдером
• auto - автоматическая прокрутка слайдов. Допустимые значения: true, false.
• speed - скорость переключения слайдов при автоматической прокрутке. Измерение в миллисекундах.

Пример,

{include file="slider.html" products=$crossselling speed="5000"}

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

4.2 Слайдер Ваших баннеров и фотографий

Слайдер использует бесплатное приложение Фото.

Рассмотрим шаги создания слайдера:

1. Зайдите в приложение "Фото", создайте альбом с любым названием, указав в пункте "Доступ": "Приватный".
2. Загрузите изображения в созданный альбом.
   ВНИМАНИЕ, для изображений доступ должен быть "Опубликованный"!
3. При необходимости укажите в описании к фотографии ссылку на страницу, на которую должен вести слайд.
4. Запомните идентификатор альбома.
5. Вставьте слайдер в шаблон.

Существует два режима получения изображений для слайдера:

• album/1 - получение всех изображений альбома с идентификатором 1
• tag/украшения - получение изображений, имеющих тег украшения

Для встраивания слайдера используется код: {include file="slider.html" photos ="album/1" width="1300"}, где

• photos ="album/1" - все фотографии альбома с идентификатором 1. В поле photos может быть вставлено значение tag/украшения
• width="1300" - ширина изображения, которая будет сгенерирована из текущего и подставлена в слайдер. Значение по умолчанию 755px. Предварительно проверьте, что в Настройках приложения поддерживается требуемый размер и что включена генерация картинок "на лету".

Допустимые параметры:

• photos - режим получения изображений (обязательный)
• search_count - количество изображений
• width - ширина изображений
• height - высота изображений
• fullwidth=1 - включить широкоэкранный режим. Изображение будет растягиваться на всю ширину блока.

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

4.3 HTML-слайдер

В шаблоне home.html продемонстрировано, как создать свой слайдер. Вы можете изменить html-код на любой, который Вам необходим. Слайдер начинается с комментария <!-- CUSTOM SLIDER -->.

* * * 5. Страница категорий * * *

5.1 Отображение товаров

Товары могут отображаться плиткой или списком.

Пользователь сможет сам выбрать тип отображения товаров.

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

Для этого войдите в

Магазин -> Витрина -> Настройки темы -> Отображение товаров по умолчанию

5.2 Загрузка товаров (постраничная навигация / ленивая загрузка)

Товары могут быть загружены постранично или при помощи "ленивой загрузки".

Первый вариант означает, что пользователю будет загружено определенное количество товаров в каталоге. Для просмотра остальных ему необходимо будет перейти на страницы 2,3,4 и т.д.

"Ленивая загрузка" - динамическая подгрузка товаров с других страниц. Пользователь всегда остается на одной странице и по мере пролистывания списка товаров ему подгружаются остальные.

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

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

* * * 6 Страница товара * * *

6.1 Вкладки

На странице товара представлена подробная информация о товаре, содержащая:

• Описание товара
• Отзывы
• Характеристики
• Произвольные страницы

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

Произвольные страницы можно добавить в пункте "Страницы" при редактировании товара.

6.2 Изображения

Используйте изображения размером 880х1080px или бОльшие по размеру с такими же пропорциями.

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

6.3 Выбор характеристик

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

б) Выбор из списка <select>

Данный выбор Вы можете сделать в Настройках темы.

Если Вы хотите конкретному товару установить свой тип отображения характеристик, отличающийся от выбранного в Настройках темы, то используйте параметр selectable_features, который может принимать соответственно 2 значения: inline и select. Указывайте данный параметр на странице товара в разделе Описание в поле Дополнительные параметры.

Пример, selectable_features=inline

* * * 7. Наклейки * * *

У каждого товара могут быть определенные наклейки:

• Новинка 
• Хит
• Скидка
• Текстовое значение скидки
• Любой текст

Для изменения наклейки зайдите в сам товар, выберите раздел Изображения, нажмите на изображение, и Вы увидете следующее:

На сайте Вы увидите:

Таким же образом можно поставить товару наклейку "Хит" или "Скидка".

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

<div class="badge sale"><span>-25%</span></div>

где "-25%" - произвольное значение скидки.

Вот, что Вы увидите на витрине:

Если Вы хотите использовать любой текст на наклейке, то используйте класс custom для наклейки:

Вы можете задать заднему фону наклеек разный цвет. Для этого к классу custom добавьте один из предложенных:

• black - черный
• red - красный
• orange - оранжевый
• yellow - желтый
• green - зеленый
• lightblue - голубой
• blue - синий
• purple - фиолетовый
• pink - розовый

Если Вы хотите установить свой цвет фона и текста для наклейки, то выполните следующие шаги:

1. Откройте файл custom.shop.css в разделе Магазин - Витрина
2. В самом конце файла на новой строчке вставьте код:
   
   .badge.custom.dirtyred { background-color: #ee6f1a;}
   .badge.custom.dirtyred span { color: #d9ffc0;}
   
   dirtyred - это любое название вашего цвета на латинском языке
   #ee6f1a - цвет заднего фона наклейки
   #d9ffc0 - цвет текста наклейки
3. Нажмите Сохранить
4. Теперь добавьте созданный цвет к классу custom, как показано на предыдущей картинке

* * * 8. Блок Новости * * *

На главной странице магазина имеется блок новостей, который реализован при помощи приложения Блог.

Как создать такой же?

1. Создайте новый Блог.
   
2. Добавьте в него Ваши новости.
3. Запомните идентификатор блога.
   
4. Зайдите в Магазин -> Витрина -> Настройки темы и впишите этот идентификатор в поле "Идентификатор блога новостей ", девятый пункт

8.1 Превью новости

К каждой новости на главной странице Магазина Вы можете прикрепить картинку (превью). Для этого:

1. Зайдите в Блог новостей
2. Нажмите на нужную Вам запись
3. Справа есть блок Мета, нажмите редактировать и в "Дополнительных параметрах" укажите значение preview, которое должно содержать абсолютный путь к картинке превью. Пример:
   preview=http://mydomain.ru/wa-data/public/shop/themes/some_images/myimage.jpg
4. Нажмите Сохранить

Не загружайте большие картинки, используйте максимальную ширину в 250px.
Для загрузки изображений используйте Сайт-Файлы

8.2 Ссылка на сторонний сайт / блог

Если Вы хотите, чтобы Ваша новость вела на сторонний сайт, то Вы можете использовать еще один параметр external_link, который должен содержать ссылку на сторонний сайт. Не забудьте указывать http:// или https://.

Пример:

external_link=http://goaway.ru/

* * * 9. Фильтр товаров * * *

Для использования фильтра в каталоге товаров необходимо зайти в настройки категорий и поставить флаг "Разрешить фильтрацию товаров".

Изменить местоположение фильтра (поставить его сверху или снизу) Вы можете в "Настройках темы".

В фильтре используется максимальная цена, которая формируется следующим образом: из текущей категории перебирается 1000 первых товаров. Из них находится максимальная цена и подставляется в максимальное значение цены фильтра. Если у Вас в категории товаров больше, чем 1000, то Вы можете сами указать максимальную цену для фильтра категории.

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

* * * 10. Подвал сайта * * *

В шаблоне footer.html Вы можете изменить элементы подвала сайта.

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

Размер футера может быть:

• большой
  Это означает, что высота футера будет 305px. В нем появятся 3 колонки с информационными страницами, которые Вы можете заполнить на нужные Вам в шаблоне footer.html.
• маленький
  Высота футера 120px. Без дополнительных колонок.

* * * 11. Баннеры * * *

На главной странице Магазина имеются баннеры, которые Вы можете изменять.

Для встраивания своей информации в тело Большого баннера зайдите в раздел Сайт - Блоки. Создайте блок, ID которого multishop.big.banner. В этом блоке вы можете использовать свой HTML и CSS стили для отображения нужной Вам информации.

Если Вы хотите удалить Большой баннер, то зайдите в раздел Магазин - Витрина - home.html, найдите блок <!-- Big banner --> ... <!-- End --> и удалите его.

Для управления маленькими баннерами используйте Настройки темы и приложение Фото. Каждому баннеру можно присвоить ссылку. Подробнее о работе с приложением Фото читайте в разделе 4.2 Слайдер Ваших баннеров и фотографий

* * * 12. Иконки способов оплаты * * *

В Настройках темы Вы можете выбрать иконки способов оплаты на Вашем сайте, которые будут отображаться в подвале (футере) сайта. Количество видимых иконок равно 8.

Для того чтобы отобразить любой из способов оплаты в другом месте сайта используйте код:

<i class="payment-icon %КЛАСС ИКОНКИ%"><i>,
где %КЛАСС ИКОНКИ% - один из доступных классов способов оплаты

Доступные иконки:

• qiwi
• rbk-money
• robokassa
• privat-bank
• sberbank
• skrill-moneybookers
• telemoney
• unistream
• visa
• webmoney
• western-union
• yandex-money
• alfabank
• american-express
• assist
• payu
• cirrus
• contact
• diners-club
• elecsnet
• intellectmoney
• jcb
• maestro
• mail-money
• mastercard
• migom
• moneymail
• mts-bank
• paypal
• chronopay

Пример:

<i class="payment-icon webmoney"><i>

* * * 13. Эскизы изображений * * *

В шаблоне используются следующие эскизы изображений:

• 77x96
• 100x100
• 148x182
• 200x245
• 350xАвто
• 880x1080
• 970xАвто

Рекомендуется загружать изображения с такими пропорциями, чтобы отношение ширины к высоте равнялось 0,814