Документация

0. Блоки

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

В шаблоне «Дизайн со вкусом 2.0» определены следующие блоки:

  • site.phones - блок телефонов в шапке сайта
  • site.footer_phones - блок контактной информации в подвале сайта
  • site.copyright - блок копирайта
  • site.uslugi - блок вывода Оплата, Доставка, Как заказать под баннером главной
  • site.about - блок текст О компании на главной

Примечание

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

Добавление блоков

Для добавление блока необходимо выполнить следующие действия (см. рисунок):

  1. Перейти в приложение «Сайт»
  2. Раздел «Блоки»
  3. Жмем на Новый блок
  4. Вводим ID блока
  5. Вводим текст блока
Создание блока сайта webasyst Создание блока

site.phones

site.phones выводит телефоны в шапке сайта. Пример примерного кода блока site.phones приведен ниже

    <li>{if $wa->shop}{$wa->shop->settings('phone')}{/if}</li>
    <li><a href="tel:+88000004040">8 (800) 000-40-40</a></li>
    <li><a href="skype:username?add">Добавить в скайп</a></li>
    <li><a href="skype:username?call">Позвонить по скайпу</a></li>
			

Важно

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

site.about

site.about выводит текст о компании на главной странице магазина. Пример стандартного кода блока site.about приведен ниже

    <div class="headline">
        <h1 class="theme-border-color">Добро пожаловать в «{$wa->shop->settings('name')}»</h1>
    </div>
    <p>
        “Мой магазин” - это профессиональный и красивый шаблон, разработанный на основе Twitter Bootstrap, профессиональной командой разработчиков. Почему вы должны выбрать нас:
        <ul class="list-unstyled">
            <li><i class="fa fa-check"></i> Адаптапция для смартфонов и планшетов (технология Bootstrap 3).</li>
            <li><i class="fa fa-check"></i> Бесплатная оперативная поддержка и помощь в настройке магазина. </li>
            <li><i class="fa fa-check"></i> Регулярные бесплатные обновления расширяющих функционал.</li>
            <li><i class="fa fa-check"></i> 50 текстур для заднего фона и 14 цветовых оформлений + свой цвет.</li>
            <li><i class="fa fa-check"></i> Корректное отображение во всех популярных браузерах.</li>
            <li><i class="fa fa-check"></i> Тема разработа под приложения WebAsyst (магазин, сайт, фото, блог).</li>
        </ul> 
    </p>
    <blockquote>
        <p>Мы более 7 лет специализируемся на создании, обслуживании интернет-магазинов. Качественный и удобный дизайн подходит для любой сферы деятельности. С нашей стороны мы гарантируем качественную поддержку, регулярные обновления в целях улучшения визуальных и функциональных требований.</p>
        <small>© «Дизайн со вкусом»</small>
    </blockquote>
			

site.uslugi

site.uslugi выводит блоки Доставка, Оплата, Как заказать на главной странице магазина. Пример стандартного кода блока site.uslugi приведен ниже

    <div class="col-md-4">
        <div class="service">
            <a href="http://v2.designsovkusom.ru/site/dostavka/">
                <i class="fa fa-paper-plane service-icon theme-color"></i>
                <div class="desc">
                    <h4>Моя Доставка</h4>
                    <p>Доставка осуществляется по всей России и странам ближнего зарубежья. Только у нас при заказе от 5 000 рублей, доставка заказа доставляется беслплатно!</p>
                </div>
            </a>
        </div>
    </div>
    <div class="col-md-4">
        <div class="service">
            <a href="http://v2.designsovkusom.ru/site/sposoby-oplaty/">
                <i class="fa fa-credit-card service-icon theme-color"></i>
                <div class="desc">
                    <h4>Моя Оплата</h4>
                    <p>Оплатить заказ вы можете любым удобным для вас способом: наличный расчет, кредит на месте, платежной картой, yandex деньги, paypal, безналичный расчет и др...</p>
                </div>
            </a>
        </div>
    </div>
    <div class="col-md-4">
        <div class="service">
            <a href="http://v2.designsovkusom.ru/site/kak-zakazat/">
                <i class="fa fa-question-circle service-icon theme-color"></i>
                <div class="desc">
                    <h4>Как заказать</h4>
                    <p>Сделать заказ в нашем магазине очень просто,  заполнив форму заказа на сайте или воспользоваться формой заказ в один клик. Или позвонив по телефону 8-800-999-99-40. </p>
                </div>
            </a>
        </div>
    </div>
			

site.footer_phones

site.footer_phones выводит контактную информацию в подвале магазина. Пример стандартного кода блока site.footer_phones приведен ниже.

    <li>г. Москва, ул. Выдуманная д.8, корп. 42, офис. 405</li>
    <li>Телефоны: +7 (888) 555-12-34; +1 (111) 555-55-55;</li>
    <li>Факс: +7 (111) 555-12-34</li>
    <li>Email: <a href="mailto:{$wa->shop->settings('email')}">{$wa->shop->settings('email')}</a></li>
			

site.copyright выводит текст копирайта в подвале магазина. Пример стандартного кода блока site.copyright приведен ниже.

    Copyright © {if $wa->shop}{$wa->shop->settings('name')}{/if}, {time()|wa_datetime:"Y"}.
			

В теме дизайна «Дизайн со вкусом 2.0» добавлены различные вспомогательные шаблоны для сокращения объема кода и упрощения их конфигурирования, путем изменения различных параметров.

footer.list.html - вывод списков ссылок в подвале.

Таблица «Доступные параметры шаблона footer.list.html»

Параметр Назначение
array Массив, содержащий элементы с полями url и name.
mytitle Заголовок списка. По умолчанию пусто.
hide Параметр элемента для скрытия его из списка.
class Класс(ы) списка(ul). По умолчанию пусто.
md Ширина списка на среднем экране. Принимает значения от 1 до 12. По умолчанию 4 (треть пространства).
sm Ширина списка на маленьком экране. Принимает значения от 1 до 12. По умолчанию 6 (половина пространства).
xs Ширина списка на телефоне(портретное положение). Принимает значения от 1 до 12. По умолчанию 6 (половина пространства).

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

Вывести страницы приложения Сайт и скрыть страницы с доп. параметром nofooter. Список будет занимать треть пространства на средних экранах(значение по умолчанию 4), а на маленьких половину(значение по умолчанию 6), так как параметры не заданы.

{include file="footer.list.html" array=$wa->site->pages() mytitle="Страницы приложения сайт" hide="nofooter" class="simple-list"}

home.vk.html

home.vk.html - вывод сообщества ВК на главной.

Таблица «Доступные параметры шаблона home.vk.html»

Параметр Назначение
md Ширина блока на среднем экране. Число от 1 до 12. Значение по умолчанию 6 (половина пространства).
mytitle Заголовок блока. Значение по умолчанию "Вконтакте".

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

Вывести сообщество ВК с заголовком "Сообщество вк", занимающего всю ширину.

{include file="home.vk.html" mytitle="Сообщество вк" md=12}

home.fb.html

home.fb.html - вывод страницы facebook на главной.

Таблица «Доступные параметры шаблона home.fb.html»

Параметр Назначение
md Ширина блока на среднем экране. Число от 1 до 12. Значение по умолчанию 6 (половина пространства).
mytitle Заголовок блока. Значение по умолчанию "Facebook".

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

Вывести страницу Facebook с заголовком "Мы в facebook", занимающего всю ширину.

{include file="home.fb.html" mytitle="Мы в facebook" md=12}

home.photos.html

home.photos.html - вывод последних фотографий на главной.

Таблица «Доступные параметры шаблона home.photos.html»

Параметр Назначение
mytitle Заголовок блока. Значение по умолчанию "Последние фотографии"
timer Интервал между перелистыванием в милисекундах (5000 = 5 сек). Значение по умолчанию "false" или отключен.
pause Пауза при наведении курсора на слайдер(1 - включена, 0 - отключена). Значение по умолчанию 0.

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

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

{include file="home.photos.html" mytitle="Фотоотчет" timer=7000 pause=1}

home.maintext.html

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

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

{include file="home.maintext.html"}

home.blog.html

home.blog.html - шаблон вывода последних постов.

Таблица «Доступные параметры шаблона home.blog.html»

Параметр Назначение
mytitle Заголовок блока. Значение по умолчанию "Последние новости"
blog_id Идентификатор блога, откуда будут выводиться записи. Значение по умолчанию null (выводить новости из всех блогов).
blog_count Количество записей. Значение по умолчаню 4.

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

Вывести 8 записей из блога с id=2 с заголовком "Статьи по программированию".

{include file="home.blog.html" mytitle="Статьи по программированию" blog_id=2 blog_count=8}

home.productset.html

home.productset.html - шаблон вывода списков товаров.

Таблица «Доступные параметры шаблона home.productset.html»

Параметр Назначение
set Идентификатор списка(promo, bestsellers,...). Значение по умолчанию "promo".
mytitle Заголовок списка. Значение по умолчанию "Промо".
auto Автоматическое перелистывание (значение 1 = включено). Значение по умолчанию "false" (отключено).
pause Интервал между перелистыванием. Значение по умолчанию 4000(4 сек). Для работы необходимо указать параметр auto=1.
move Количество товаров, на которые будет перелистан слайдер. Значение по умолчанию 1. В мобильной версии всегда значение 1.
limit Количество товаров в списке. Значение по умолчанию null (без ограничения).

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

Вывести 20 товаров из списка promo(значение по умолчанию), автопрокручивание 5 товаров с интервалом 5 секунд, заголовок "Товары со скидкой".

{include file="home.productset.html" mytitle="Товары со скидкой" auto=1 pause=5000 move=5 limit=20}

home.services.html

home.services.html - шаблон вывода услуг. Вынесен отдельно для упрощения перемещения элементов главной страницы.

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

{include file="home.services.html"}

home.productslider.html

home.productslider.html - слайдер продуктов.

Таблица «Доступные параметры шаблона home.productslider.html»

Параметр Назначение
set Идентификатор списка(promo, bestsellers,...). Значение по умолчанию "promo".
limit Количество товаров в списке. Значение по умолчанию null (без ограничения).

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

Вывести 5 товаров из списке лучшее предложение (id списка bestsellers).

{include file="home.productslider.html" set="bestsellers" limit=5}

home.bannerslider.html

home.bannerslider.html - слайдер баннеров.

Таблица «Доступные параметры шаблона home.bannerslider.html»

Параметр Назначение
album Идентификатор альбома. Значение по умолчанию берется из настройки темы дизайна.

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

Вывести баннеры из альбома с идентификитором 3.

{include file="home.bannerslider.html" album=3}

home.parallax.html

home.parallax.html - слайдер товаров параллакс.

Таблица «Доступные параметры шаблона home.parallax.html»

Параметр Назначение
set Идентификатор списка(promo, bestsellers,...). Значение по умолчанию "promo".
set_limit Количество товаров в списке. Значение по умолчанию null (без ограничения).

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

Сформировать слайдер параллакс из списка товаров с идентификатором customlist.

{include file="home.parallax.html" set="customlist"}

sidebar.photos.html - шаблон вывода последних фотографий в боковой панели.

Таблица «Доступные параметры шаблона sidebar.photos.html»

Параметр Назначение
mytitle Заголовок блок. Значение по умолчанию Последние фотографии(Latest Photos).
condition Условия выбора фотографий. Значение по умолчанию null(без условия). Пример:
"tag/vacations" - все фотографии с тегом vacations;
"album/12" - все фотографии из альбома с id=12;
"id/1,5,7" - фотографии с id = 1,5,7.
limit Максимальное количество фотографий в выборке. Значение по умолчанию 16.

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

Альбом "Природа"(id=5). Вывести 20 последних фотографий из альбома "Природа" с заголовком "Фотоотчет".

{include file="sidebar.photos.html" condition="album/20" mytitle="Фотоотчет" limit=20}

sidebar.tags.html - шаблон вывода тегов в боковой панели.

Таблица «Доступные параметры шаблона sidebar.tags.html»

Параметр Назначение
mytitle Заголовок блок. Значение по умолчанию Теги(Tags).
limit Максимальное количество тегов в выборке. Значение по умолчанию 10.

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

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

{include file="sidebar.tags.html" limit=20 mytitle="Популярные теги"}

sidebar.pages.html - шаблон вывода информационных страниц в боковой панели.

Таблица «Доступные параметры шаблона sidebar.pages.html»

Параметр Назначение
array Массив, содержащий элементы с полями url и name.
mytitle Заголовок списка. Значение по умолчанию Информация(Information).
hide Параметр элемента для скрытия его из списка.

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

Вывести страницы приложения Магазин с заголовком "FAQ". Страницы с параметром nomenu должны быть скрыты (nomenu=1).

{include file="sidebar.pages.html" array=$wa->shop->pages() mytitle="FAQ" hide="nomenu"}

sidebar.blog.html - шаблон вывода постов в боковой панели.

Таблица «Доступные параметры шаблона sidebar.blog.html»

Параметр Назначение
blog_id Идентификатор блога. Значение по умолчанию null(все блоги).
limit Максимальное количество постов. Значение по умолчанию 4.
mytitle Заголовок блока. Значение по умолчанию Последние новости(Latest posts).

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

Вывести 5 последних новостей из блога Статьи(id=5) с заголовком статьи.

{include file="sidebar.blog.html" blog_id=5 limit=5 mytitle="Статьи"}

1. Общие настройки

1.1. Структура сайта

Структура сайта можно изменить в Приложение «Сайт» Структура. Примерную структуру сайта можно посмотреть на Рис. 1. Структура сайта Shop Script 5 Рис. 1 - Структура сайта

  • Все правила должны заканчивать на символ *.
  • Правило, которое содержит только символ *, должно быть последним в списке.

1.2. Авторизация / регистрация

Для включение авторизации выполните следующую последовательность действий (см. Рис. 2)

  1. Перейти в приложение «Сайт»
  2. Личный кабинет
  3. Настройки авторизации
  4. Включить
  5. Нажать кнопку настроить
  6. Выбрать приложение «Сайт» и нажать Сохранить

Авторизация Shop Script 5 Рис. 2 - Авторизация

1.3. Главное меню

Главное меню формируется из информационных страниц приложения «Сайт». Для добавления пунктов меню выполните последовательность действий (см. Рис. 3)

  1. Перейти в приложение «Сайт»
  2. Страницы
  3. Жмем на рядом с необходимым поселением, заполняем форму и жмем Сохранить

Меню приложений сайт Webasyst Рис. 3 - Главное меню

Меню приложений

Для редактирования меню приложений выполните последовательность действий (см. Рис. 4).

  1. Перейдите в приложение «Сайт»
  2. Настройки
  3. Настроить
  4. Жмем на рядом с необходимым приложением, редактируем и нажимаем Сохранить

Информационные страницы сайт Webasyst Рис. 4 - Меню приложений

1.4. Каталог

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

  1. Перейдите в приложение «Магазин»
  2. Вкладка «Товары»
  3. Жмем на , заполняем форму и нажимаем Сохранить

Добавление категорий Shop Script 5 Рис. 5 - Добавление категории

1.5. Общие настройки темы

Так как тема дизайна приложения «Сайт» является родительской, то для изменения общих(для всех приложений) настроек темы дизайна необходимо выполнить следующие действия (см. Рис. 6).

  1. Перейдите в приложение «Сайт»
  2. Дизайн
  3. Внешний вид

Настройки темы дизайна сайта Webasyst Рис. 6 - Настройки приложения Сайт

Таблица 1. Общие настройки приложений Webasyst

Настройка Назначение Пример
Цветовая гамма Определяет цветовую гамму основных элементов (элементы управления, иконки, вкладки...) в шаблоне
Свой цвет Настройка определяет пользовательский цвет. Для выбора цвета нажмите на «?» правее поля
Примеры цветов: ссылка ссылка
#0000FF
Свой цвет при наведении Настройка определяет пользовательский цвет при наведении на элементы цветовой гаммы. Для выбора цвета нажмите на «?» правее поля
Примеры цветов: ссылка ссылка
#000066
Текстура заднего фона Настройка определяет текстуру заднего фона.

Для работы настройки необходимо

в настройке «Макет» выбрать значение Ограничен

Фоновое изображение Настройка определяет фоновое изображение.

Для работы настройки необходимо

в настройке «Макет» выбрать значение Ограничен

Своё фоновое изображение Настройка позволяет загружать свое фоновое изображение.

Для работы настройки необходимо

в настройке «Макет» выбрать значение Ограничен

Своё фоновое изображение Настройка позволяет загружать свое фоновое изображение.

Для работы настройки необходимо

в настройке «Макет» выбрать значение Ограничен

Цвет фона изображение Настройка определяет цвет фона для пользовательского изображения
Примеры цветов: ссылка ссылка
#FFFFFF
Макет Настройка растягивает сайт на всю ширину или ограничивает по бокам
Логотип компании Настройка позволяет загружать логотип. Достаточно нажать «Выбрать файл» и загрузить логотип и он отобразиться во всех приложениях.
  • Фон логотипа должен быть прозрачным или белым.
  • Максимальная ширина 260 пикселей. При загрузке лого с большим размером, логотип ужмется, сохраняя пропорции.
Слоган компании Выводит слоган Современный интернет-магазин
Адрес страницы
«Фейсбук»,
«ВКонтакте»,
«Google Plus»,
«Твиттер»
Ссылки на социальные сети в подвале сайта

Если очистить поля соц. сетей, то соответствующая иконка исчезнет

https://www.facebook.com/...
http://vk.com/... https://twitter.com/... ttps://plus.google.com/...

1.6. Загрузка файлов

Для загрузки файлов выполните следующие действия (см. рисунок).

  1. Перейдите в приложение «Сайт»
  2. Файл-менеджер
  3. Нажмите на , создайте папку
  4. Перейдите в созданную папку
  5. Нажмите на загрузить файлы

Настройки темы дизайна сайта Webasyst

2.1. Настройка категорий

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

Куда указывать параметры?

Необходимо зайти в настройки категории, см. Рис. 7.

Дополнительные параметры категории Shop Script 5 Рис. 7 - Дополнительные параметры категории

Таблица 2. Возможные дополнительные параметры категории.

Название параметра Описание и возможные значения Пример
col

Для категории 1 уровня указывает ширину выпадающего меню подкатегорий

Для категории 2 уровня указывает ширину данной категории

Возможные значения: 2, 3, ширина 2 и 3 колонки соответственно

col=2
split

Для категории 2 уровня выводит подкатегории в нескольких колонках

Возможные значения: 2, 3, разбивает подкатегории на 2 и 3 колонки соответственно

split=2
icon

Параметр позволяет выводить иконку в каталоге рядом с наименованием категории 1 уровня

icon=wa-data/public/site/cat_icons/1.png
image

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

image=/wa-data/public/site/cat_icons/1.png
fa

Иконка шрифта font-awesome. Классы иконок ссылка

Параметр работает для категорий 3 уровня в каталоге с параметром col или в боковой панели.

fa=fa-mobile

Выведет перед названием категории.

collapse

Параметр для категорий 1 и 2 уровня в боковой панели, без параметра col.

Категория с этим параметром всегда будет раскрыта.

collapse=1

В дополнительных параметрах

каждый параметр прописывается с новой строчки

Рассмотрим пример каталога

В данном примере сначала выводятся подкатегории "Планшеты" в 3 колонки, затем на второй строчке выводятся подкатегории "УСТРОЙСТВА ВВОДА", "МУЛЬТИМЕДИА", "ОРГ. ТЕХНИКА", каждая из которых занимает по 1 колонке

Таблица 3. Пример оформления каталога.

Компьютеры, ноутбуки и планшеты (0 уровень)
ПЛАНШЕТЫ (1 уровень)
Apple iPad
Samsung
EXPLAY

ACER
ASUS
LENOVO

PRESTIGIO
SUPRA
SONY
УСТРОЙСТВА ВВОДА (1 уровень)
Компьютерные мыши
Клавиатуры
Комплекты клавиатура+мышь
Игровые манипуляторы
Коврики для мыши
МУЛЬТИМЕДИА (1 уровень)
Компьютерные колонки
Веб-камеры
Графические планшеты
Наушники
Микрофоны
ОРГ. ТЕХНИКА (1 уровень)
Принтеры
МФУ
Факсы
Бумага
Сканеры
Мониторы
Колонки

Расставим дополнительные параметры:

  • Компьютеры, ноутбуки и планшеты 0 уровень
  • col=3
  • ПЛАНШЕТЫ 1 уровень
  • col=3
  • split=3

2.2. Настройка слайдера

Для того чтобы настроить слайдер, необходимо выполнить следующие действия (см. Рис. 8).

  1. Перейти в приложение «Магазин»
  2. Вкладка «Витрина»
  3. Дизайн
  4. Внешний вид, найти раздел настроек Слайдер

Настройка слайдера в шаблоне Дизайн со вкусом Shop Script 5 Рис. 8 - Настройки слайдера

Типы слайдеров

Таблица 4. Типы слайдеров.

Название слайдера Описание Требования
Слайдер товаров с эффектом параллакса Данный вид слайдера прокручивает товары из списка с идентификатором «promo». У каждого слайда одинаковый фон, который изменяет свое положение в зависимости от номера слайда.
  • Указание дополнительных параметров
  • Товары должны находиться в списке «promo»
Слайдер товаров Данный вид слайдера прокручивает товары из списка с идентификатором «promo». У каждого слайда можно установить свой фон.
  • Указание дополнительных параметров
  • Товары должны находиться в списке «promo»
Слайдер баннеров Данный вид слайдера прокручивает изображения(баннеры) из альбома в приложении «Фото». Идентификатор альбома укажите в соответствующей настройке.
  • Установленное приложение «Фото»
  • Указать идентификатор альбома в настройке
  • Установить настройки в приложении «Фото» «Разрешить создание эскизов произвольных размеров по требованию» и «Максимальный размер эскиза» равным 1920(макет на всю ширину) или 1170(макет ограничен)
  • Ссылку необходимо указывать в описании товара

Таблица 5. Настройки слайдера.

Название настройки Описание Примечания
Автоматическая прокрутка слайдера Включает / отключает автоматическое прокручивание слайдов Только для «слайдер товаров» и «слайдер баннеров»
Время показа слайда (в миллисекундах) Изменяет длительность показа слайда 1000 миллисекунд = 1 секунда
Идентификатор альбома приложения «Фото» для слайдера баннеров Идентификатор альбома указан в адрессной строке браузера

Таблица 6. Дополнительные параметры для товаров из списка «promo».

Название параметра Описание Пример
header Заголовок слайда <i>Сделано для</i><br><i>музыкантов</i>
text Текст слайда <i>Установите GoPro</i><br><i>на гитару, барабаны,</i><br><i>проигрыватели</i>
slider Путь к фоновому изображению
Только для "слайдера товаров"
Как загрузить файл ссылка
wa-data/public/site/slider/bg3.jpg

2.2.0. Смена фона слайдера паралакса

Для смены фона необходимо (см. Рис. 2.2.0):

  1. Перейдите в приложение «Магазин»
  2. Вкладка «Витрина»
  3. Пункт меню «Дизайн»
  4. Раздел «Шаблоны»
  5. Находим файл parallax-slider.css, выбираем его
  6. Меняем url фонового изображения (см. Рис. 2.2.0)

Смена фона слайдера Рис. 2.2.0 - Смена фона слайдера

Доступные изображения

  • 1city1.jpg
  • 2city2.jpg
  • 3city3.jpg
  • 4scifi.jpg
  • 5electronic1.jpg
  • 6electronic2.jpg
  • 7electronic3.jpg
  • 8electronic4.jpg
  • 9technology.jpg
  • 10glow.jpg
  • 11glow2.jpg
  • 12salute.jpg
  • 13wall.jpg
  • 14wall2.jpg
  • 'new_year/new year1.jpg'
  • 'new_year/new year2.jpg'

2.2.1. Настройка слайдеров баннера

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

  1. Перейдите в приложение «Фото»
  2. Выбираем необходимый альбом
  3. Копируем идентификатор альбома из адресной строки браузера

Идентификатор альбома Рис. 2.2.1 - Идентификатор альбома

Далее необходимо указать этот идентификатор в настройках дизайна магазина(см. Рис. 2.2.2)

  1. Перейдите в приложение «Магазин»
  2. Вкладка витрина
  3. Дизайн
  4. Внешний вид
  5. Скроллим вниз до настроек слайдера
  6. Выбираем тип слайдера - слайдер баннеров
  7. Указываем идентификатор

Настройка слайдера баннеров Рис. 2.2.2 - Настройка слайдера баннеров

2.3. Слайдеры списков товаров

Для отображения / скрытия слайдеров товаров необходимо найти в настройках "Отображать «Лучшее предложение»" и "Отображать «Лидеры продаж»" ссылка

Как создать список товаров

Для создания списков выполните следующие действия (см. Рис. 9)

  1. Перейдите в приложение «Магазин»
  2. Вкладка «Товары»
  3. Нажимаем на рядом с заголовком «Списки», заполняем форму и жмем Сохранить

Для «Лучшее предложение» необходимо создать список с ID списка bestsellers

Для «Лидеры продаж» необходимо создать список с ID списка leader

Создание списков товаров Shop-Script 5 Рис. 9 - Создание списков товаров

Как добавить товары в список

Для добавления товаров в список выполните следующие действия (см. Рис. 10)

  1. Перейдите в приложение «Магазин»
  2. Вкладка «Товары»
  3. Выберите необходимые товары(проставьте галочки)
  4. Справа выберите действие «Добавить в список»

Добавления товаров в список Shop-Script 5 Рис. 10 - Добавление товаров в список

2.4. Текст на главной странице

Текст главной страницы редактируется в шаблоне home.html (см. Рис. 11)

Добавления товаров в список Shop-Script 5 Рис. 11 - Редактирование текста на главной странице

2.5. Страница категории

Отображение сортировки

Для отображения сортировки необходимо выполнить следующие действия (см. Рис. 2.5):

  1. Перейдите в приложение «Магазин»
  2. Вкладка «Товары»
  3. Выбираем необходимую категорию
  4. Жмем Настройка категории
  5. Ставим галочку напротив посетители сайта могу выбирать порядок

Сортировка товаров в категории Shop-Script 5 Рис. 2.5. - Сортировка товаров в категории

3. Фото

3.1. Создание альбома

Для создания альбома необходимо выполнить следующие действия (см. Рис. 3.1):

  1. Перейти в приложение «Фото»
  2. Нажимаем на рядом с заголовком "АЛЬБОМЫ"
  3. Вводим название альбома
  4. Нажимаем Создать альбом

Создание альбома webasyst Рис. 3.1 - Создание альбома

3.2. Загрузка фотографий

Для создания альбома необходимо выполнить следующие действия (см. Рис. 3.2):

  1. Перейти в приложение «Фото»
  2. Выбираем необходимый альбом
  3. Нажимаем на " Загрузить фотографии"
  4. Нажимаем Выбрать фотографии

Загрузка фотографий webasyst Рис. 3.2 - Загрузка фотографий

4. Блог

4.1. Создание блогов

Для создания блогов выполните следующие действия (см. Рис. 4.1)

  1. Перейдите в приложение «Блог»
  2. Жмем на рядом с заголовком "Блоги"
  3. Вводим название блога и заполняем необязательные параматры, если это необходимо
  4. Нажимаем Сохранить

Создание блогов webasyst Рис. 4.1 - Создание блогов

Зачем создавать блоги?

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

4.2. Создание поста

Для создания записи в блоге выполните следующие действия (см. Рис. 4.2)

  1. Перейдите в приложение «Блог»
  2. Выбираем необходимый блог
  3. Жмем на Новая запись
  4. Вводим название записи
  5. Заполняем текст
  6. В необходимом месте, после которого будет выводиться кнопка "читать далее", вставляем разрыв

Создание записи в блоге webasyst Рис. 4.2 - Создание записи в блоге

Изображение новостной ленты

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

Создайте папку для изображений (Рис. 4.3)

  1. Перейдите в приложение «Сайт»
  2. Файл-менеджер
  3. Выделяем родительскую папку
  4. Нажимаем на
  5. Вводим название папки
  6. Жмем Создать

Создание папки для файлов webasyst Рис. 4.3 - Создание папки для файлов

Загрузите изображения (Рис. 4.4)

  1. Перейдите в приложение «Сайт»
  2. Файл-менеджер
  3. Выделяем созданную папку
  4. Переносим заготовленную картинку в указанную область
  5. Нажимаем на изображение
  6. Выделяем ссылку
  7. Копируем

Загрузка изображений webasyst Рис. 4.4 - Загрузка изображений

Примечание к изображению

Желательно, чтобы картинки preview были одинаковыми и формата 3х2. Иначе картинки блока новостей на главной Магазина будут разной высоты.

Укажите изображения в посте (Рис. 4.2)

  1. Нажимаем редактировать мета данные
  2. Вводим дополнительный параметр preview=вставляем ссылку на изображение, согласно предыдущему пункту. Значение параметра(preview) должно начинаться с wa-data. Пример: preview=wa-data/public/site/Blog/17.jpg
  3. Жмем Сохранить

Смотрим что получилось

  1. Preview изображения
  2. Место, в котором вставили разрыв
  3. Кнопка читать далее

Блог webasyst Рис. 4.5 - Результат

5. Боковая панель

5.1. Общие настройки

Для изменения настроек отображения боковой панели необходимо (см. Рис.5.1):

  1. Перейдите в приложение «Сайт»
  2. Пункт меню «Дизайн»
  3. Вкладка «Внешний вид»
  4. Находим настройку «Отобразить / скрыть боковую панель» . Ниже находятся настройки отображения отдельных элементов боковой панели
  5. Жмем Сохранить

Боковая панель дизайн со вкусом webasyst Рис. 5.1 - Общие настройки боковой панели

5.2. Виджеты сообществ

Для настройки сообществ необходимо (см. Рис. 5.2.1):

  1. Перейдите в приложение «Сайт»
  2. Пункт меню «Дизайн»
  3. Вкладка «Внешний вид»
  4. Находим настройки Сообщество Вконтакте и Сообщество facebook и указываем необходимые данные.
  5. Жмем Сохранить

Настройка виджетов сообществ дизайн со вкусом webasyst Рис. 5.2.1 - Настройка виджетов сообществ

Как узнать идентификатор сообщества?

Необходимо пройти на страницу виджета. Заполнить поле "Ссылка на страницу", затем в текстовом поле "Код для вставки" скопировать id (см. Рис. 5.2.2)

Идетификтор сообщества вконтакте дизайн со вкусом webasyst Рис. 5.2.2 - Идентификтор сообщества вконтакте

6. Функциональные возможности

6.1. Быстрый просмотр

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

Для включения данной опции необходимо (см. Рис. 6.1):

  1. Перейдите в приложение «Магазин»
  2. Вкладка «Витрина»
  3. Пункт меню «Дизайн»
  4. Вкладка «Внешний вид»
  5. Включить быстрый просмотр товаров
  6. Жмем Сохранить

Быстрый просмотр Рис. 6.1 - Быстрый просмотр

6.2. Скрытие описания категории

Данная опция позволяет скрывать длинное описание категории с кнопкой "Подробнее". Для включения выполните следующие действия:

  1. Перейдите в приложение «Магазин»
  2. Вкладка «Витрина»
  3. Пункт меню «Дизайн»
  4. Вкладка «Внешний вид»
  5. Скрывать длинное описание категории
  6. Жмем Сохранить

6.3. Праздничное оформление

В разделе настроек праздники будут доступны праздничные оформления темы дизайна. На данный момент доступно новогоднее оформление.

  1. Перейдите в приложение «Сайт»
  2. Пункт меню «Дизайн»
  3. Вкладка «Внешний вид»
  4. Использовать новогоднее оформление
  5. Жмем Сохранить

Новогоднее оформление Рис. 6.3 - Новогоднее оформление