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

Блоки

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

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

site.contacts - блок телефонов в шапке сайта (столбец 1)
site.contacts2 - блок телефонов в шапке сайта (столбец 2)
site.footer - блок контактной информации в подвале сайта
site.copyright - блок копирайта
shop.about - блок текст «О компании» на главной странице магазина
head - блок для вывода кода в разделе <head></head>
body_after - блок для вывода кода перед закрывающим </body>

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

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

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

site.contacts

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

{* КОД ДЛЯ ШАПКИ 1 *}
{* произвольный текст *}
<li>24/7 Поддержка</li>
{if $wa->shop}
    {* телефон из настроек *}
    <li><a href="tel:+79999999">{$wa->shop->settings("phone")}</a></li>
{/if}

{* КОД ДЛЯ ШАПОК 2-4 *}
{if $wh = $wa->shop->settings("workhours")}
    <li class="fs-13em">
        <span class="fw-7">{$wh.days_from_to}</span>{if $wh.hours_from && $wh.hours_to} {$wh.hours_from}—{$wh.hours_to}{/if}
    </li>
{/if}
<li class="fs-13em"><a href="mailto:{$wa->shop->settings('email')}">{$wa->shop->settings('email')}</a></li>

site.contacts2

site.contacts2 выводит телефоны в шапке 2,3,4 сайта во втором столбце. Пример стандартного кода блока site.contacts2 приведен ниже:

{* ТЕЛЕФОН ИЗ НАСТРОЕК *}
{if $wa->shop}
    <li class="fs-20em fw-7"><a href="tel:{$wa->shop->settings('phone')|regex_replace:'/[^0-9\+]/':''}">{$wa->shop->settings("phone")}</a></li>
{/if}
<li class="fs-12em">Бесплатный звонок с 8:00 до 22:00</li>

site.footer

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

{if $wa->shop}
    <li class="text-nowrap"><i class="mi mi-phone"></i> {$wa->shop->settings("phone")}</li>
    <li class="text-nowrap"><i class="mi mi-email"></i> <a href="mailto:{$wa->shop->settings('email')}">{$wa->shop->settings("email")}</a></li>
    {if $wh = $wa->shop->settings("workhours")}
        <li>
            <i class="mi mi-access-time"></i>
            {$wh.days_from_to}{if $wh.hours_from && $wh.hours_to} {$wh.hours_from}—{$wh.hours_to}{/if}
        </li>
    {/if}
{/if}
<li><br>Москва, ТРЦ Парк хаус,</li>
<li>Автозаводское шоссе, 6</li>

site.copyright

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

© {$wa->accountName()}, {time()|wa_datetime:"Y"}. Все права защищены. <a href="#">Политика конфиденциальности</a>

shop.about

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

<h1>{$wa->shop->settings('name')}</h1>
<div class="xAboutTag gray">Слоган</div>
<hr>
<p>{$wa->shop->settings('name')} - это креативное агенство, которая давно зарекомендовала себя как надежного разработчика тем дизайна. Мы обладаем большим количеством опыта в создании интернет-магазинов на базе PHP-фреймворка Webasyst. Мы разрабатываем только качественные продукты.</p>
<p>Спасибо что выбрали нас!</p>
<a href="#">Далее</a>

shop.primary_nav

shop.primary_nav выводит код в навигации шапок 2, 4 рядом с категориями с параметром primary=1. Пример кода блока shop.primary_nav приведен ниже:

<li>
    <a href="#ссылка">Пункт меню</a>
</li>
<li class="dropdown">
    <a href="#ссылка">Выпадающий список</a>
    <ul class="dropdown-menu">
        <li><a href="#ссылка">Пукнт 1</a></li>
        <li><a href="#ссылка">Пукнт 2</a></li>
        <li><a href="#ссылка">Пукнт 3</a></li>
        <li class="dropdown-submenu">
            <a href="#ссылка">Пукнт 4</a>
            <ul class="dropdown-menu">
                <li><a href="#ссылка">Пукнт 4_1</a></li>
                <li><a href="#ссылка">Пукнт 4_2</a></li>
                <li><a href="#ссылка">Пукнт 4_3</a></li>
                <li><a href="#ссылка">Пукнт 4_4</a></li>
            </ul>
        </li>
    </ul>
</li>

head

head выводит код в разделе <head></head>. Блок можно использовать для вывода своих стилей и скриптов. Пример кода блока head приведен ниже:

<style>
    /* свои CSS стили */
</style>
<script>
    /* свой javascript */
</script>

body_after

body_after выводит код перед закрывающим тегом </body>. Блок можно использовать для вывода счетчиков. Пример кода блока body_after приведен ниже:

{literal}код счетчика{/literal}

body_before

body_after выводит код после открывающего тега <body>. Блок можно использовать для вывода информации до вывода остального макета. Пример кода блока body_before приведен ниже:

<div class="container-fluid text-center">Текст блока</div>

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

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

Структуру сайта можно изменить в «Сайт» → Структура. Примерную структуру сайта можно посмотреть на следующем рисунке:.

Авторизация

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

Перейти в приложение «Сайт»
Личный кабинет
Настройки авторизации
Включить

Меню страниц

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

Перейти в приложение «Магазин» или «Сайт» в зависимости от настроек темы
Страницы
Жмем на + рядом с необходимым поселением, заполняем форму и жмем Сохранить

Для скрытия страницы из меню, необходимо добавить дополнительный параметр в настройках страницы:

Выбираем необходимую страницу
Жмем «Настройки страницы»
В поле Дополнительные параметры страницы
```
hidden=1
```
Жмем Сохранить

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

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

Для редактирования меню приложений выполните последовательность действий:

Перейдите в приложение «Сайт»
Настройки
Настроить
Редактируем
Жмем Сохранить

Меню категорий

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

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

Параметры категории для навигации

Параметр	Описание и возможные значения	Пример
col Мегаменю	Параметр необходим для оформления «Мегаменю». Для категории 1 уровня создает «Мегаменю» из дочерних элементов. Достаточно указать col=1, на ширину это не повлияет. Для категории 2 уровня задает ширину блока. Параметр меняет свое значение от 1 до 12. Значение по умолчанию 3. Рекомендуемые значение: 3 - 25% 4 - 33% 6 - 50% 12 - 100%	col=3
split Мегаменю	Для категории 2 уровня, разбивает дочерние элементы на несколько колонок. К примеру, есть категори 2 уровня Марка авто, у нее 12 подкатегорий с марками авто(Лада, Тойота, БМВ...) 3 уровня. Задача: вывести категорию Марка авто в 3 колонки, т.е. по 4 подкатегории в каждой Для категории Марка авто необходимо указать параметры split=3 (3 колонки), занимающие col=4 (треть пространства).	col=4 split=3
primary Шапка 2, 4	Для категории 1 уровня выводит их дополнительно рядом с каталогом товара в навигации. Параметр может быть использован для того, чтобы выделить определенные категории.	primary=1
multicolumn Шапка 2, 4	Указывается для категории первого уровня. Изменяет колиство колонок в выпадающем меню. Принимает значения от 2 до 4. По умолчанию: 2	multicolumn=3 пример использования
endcol Шапка 2, 4	Указывается для категории второго уровня. Определяет после какой категории, будет перенос на следующую колонку.	endcol=1

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

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

Перейдите в приложение «Сайт»
Файл-менеджер
Нажмите на загрузить файлы

Обратная связь

Для работы формы обратной связи необходимо в приложении с адресом /*(В большинстве случаев это Магазин) создать страницу с адресом feedback и содержимым блока, который у вас есть по умолчанию в приложении Сайт {$wa->block("site.send_email_form")}

Перейдите к страницам корневого приложения Сайт → Страницы или Магазин → Витрина → Страницы
Создайте страницу с адресом feedback и содержимым {$wa->block("site.send_email_form")}

Социальные сети

Вконтакте

Для вывода виджета требуется указать идентификатор сообщества в настройках темы раздел 1.5

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

Далее скопируйте идентификатор группы из адресной строки браузера

Одноклассники

Для вывода виджета требуется указать идентификатор сообщества в настройках темы раздел 1.7

Зайдите на свою группу в одноклассниках
В меню слева выберите пункт "Изменить настройки"
Далее увидите текст "ID этой группы в одноклассниках" и номер ID группы

Facebook

Для вывода виджета требуется указать ссылку на страницу (не ~~группу~~) сообщества в настройках темы раздел 1.6

Twitter

Для вывода виджета требуется указать Имя пользователя и Идентификатор виджета Twitter в разделе 1.8

Чтобы узнать Идентификатор виджета необходимо:

Перейти в настройки twitter'а
Виджеты
Создать

После создания виджета, перейдите на страницу виджета и в адресной строке браузера скопируйте идентификатор после widgets/.

Instagram

Для вывода виджета требуется указать идентификатор пользователя, CLIENT ID и access token в настройках темы раздел 1.9

Для того чтобы узнать идентификатор пользователя необходимо пройти по ссылке https://smashballoon.com/instagram-feed/find-instagram-user-id/, заполнить форму и нажать get instagram user id.

Чтобы получить access token перейдите по ссылке http://instagram.pixelunion.net/ и нажмите Generate Access Token.

Далее перейдите по ссылке http://instagram.com/developer/, чтобы зарегистрировать плагин в инстаграме как приложение и предоставить ему доступ к вашим фотографиям. Нажмите на кнопку «Register Your Application».

Поле «Application Name» нужно только для вашего удобства, поэтому вы можете ввести туда адрес сайта, на который собираетесь выгружать фотографии вашего аккаунта. Например, materialdesign.pro .

В поле «Description» можете ввести любой текст.

В поле «Website» введите адрес вашего сайта. В поле «Valid redirect URIs» вставьте строку http://instagram.com/ваш_логин?modal=true, где вместо ваш_логин вам, соответственно, нужно ввести ваш логин в инстаграме.

Далее жмём на кнопку «Register» и, если всё правильно сделали, получаем сообщение об успешной регистрации, из которого берем CLIENT ID

Магазин

Слайдер

В настройках темы раздел 2.4. доступны следующие слайдеры:

Слайдер баннеров
Слайдер продуктов
Слайдер продуктов (Видео)
Слайдер продуктов 3
Слайдер продуктов 4

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

Слайдер выводит изображения из альбома приложения «Фото». В настройках темы раздел 2.4 необходимо указать Идентификатор альбома (Как узнать?). Также в «Фото» → Настройки необходимо изменить значение Максимальный размер эскиза, в соответствии с следующими требованиями:

Боковая панель отключена - изменить на значение 1400
Боковая панель включена - изменить на значение 1050

Слайдер продуктов

Слайдер продуктов выводит товары из списка товаров (Как добавить?). В настройках темы раздел 2.4 необходимо указать Выборка продуктов.

У слайдеров продуктов используются различные изображения (фон, картинка товара, дополнительная картинка). Для того чтобы слайдер определял данные изображения от прочих изображений товара необходимо в описании картинок товара указывать описание. В таблице указаны, какие описания необходимы:

Описание изображения	Назначение	Типы слайдеров
image	Необходим для вывода изображения товара	Слайдер продуктов Слайдер продуктов 3 Слайдер продуктов 4
bg	Необходим для заливки фона	Слайдер продуктов Слайдер продуктов (Видео) Слайдер продуктов 4
video	Необходим для превью видео	Слайдер продуктов (Видео)

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

Перейти в приложение «Магазин»
На вкладке «Товары» найти необходимый товар
У товара выбрать вкладку «Изображения»
Загрузить изображение
Указать соответствующее описание (image, video, bg)

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

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

слайдер продуктов
слайдер списков товаров
информационная страница (Как вывести?)

Добавления списка

Для создания списка выполните:

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

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

Если Тип выбран Список, то в список товаров необходимо вручную добавить товары. Для это выполните следующие действия:

Перейдите в приложение «Магазин»
Вкладка «Товары»
Выберите необходимые товары, проставьте
Справа выберите действие «Добавить в список»

Категория

Настройки страницы категорий находятся в разделе раздел 2.6 и раздел 2.7.

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

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

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

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

Перейдите в приложение «Магазин»
Вкладка «Товары»
Выбираем необходимую категорию
Жмем Настройка категории
Разрешить фильтрацию товаров

Параметры категории

Параметр	Описание и возможные значения	Пример
image	Изображение категории, выводится у подкатегорий на странице категории (Куда загрузить изображение?)	image=/wa-data/public/site/cat_icons/1.png

Страница заказа

На странице заказа выводится текущий статус заказа в виде шагов. Данный код работает для стандартного набора статусов. Чтобы добавить или удалить статус необходимо в шаблоне order/status.html изменить массив {$states}

Пример с 4 статусам Новый, Обработан, Оплачен, Доставлен:

{$states = [
    [ order => 0, id => "new", title => "Новый" ],
    [ order => 1, id => "processing", title => "Обработан" ],
    [ order => 2, id => "paid", title => "Оплачен" ],
    [ order => 3, id => "shipped", title => "Доставлен" ]
]}

Добавить статусы можно в Магазин - Настройки - Статусы заказов

Фото

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

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

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

Идентификатор альбома

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

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

Загрузка фотография

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

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

Блог

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

Для создания блогов выполните следующие действия:

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

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

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

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

Для создания записи в блоге выполните следующие действия

Перейдите в приложение «Блог»;
Выбираем необходимый блог;
Жмем на + Новая запись;
Вводим название записи;
Заполняем текст;
В необходимом месте, после которого будет выводиться кнопка "читать далее", вставляем разрыв;
Переходим в метаданные;
В поле Дополнительные параметры указываем изображение поста(Куда загрузить изображение?);
```
preview=/wa-data/public/site/Blog/1.jpg
```
Жмем сохранить и опубликовываем запись.

Вспомогательные шаблоны

layout/footerlist.html

layout/footerlist.html - вывод списков ссылок в подвале. Шаблон выводится в index.html

Таблица «Доступные параметры шаблона layout/footerlist.html

Параметр	Назначение
array	Массив, содержащий элементы с полями url и name. Возможные значения: $wa->shop-pages() $wa->site-pages() $wa->photos-pages() $wa->blog-pages() $wa->apps()
mytitle	Заголовок списка. По умолчанию пусто.
hide	Параметр элемента для скрытия его из списка. Пример: "hide=nofooter", у страниц, в которых прописан дополнительный параметр nofooter=1 , будут скрыты.
sm	Ширина списка на маленьких и средних экранах. Принимает значения от 1 до 12. По умолчанию 6 (половина пространства).
xs	Ширина списка на телефоне(портретное положение). Принимает значения от 1 до 12. По умолчанию 6 (половина пространства).

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

Вывести страницы приложения Сайт и скрыть страницы с доп. параметром nofooter.

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

Пример с выводом своего массива

{$myarray = [
    0 => [ "name" => "Элемент 1", "url" => "Ссылка 1" ],
    1 => [ "name" => "Элемент 2", "url" => "Ссылка 2" ]
]}
{include file="layout/footerlist.html" array=$myarray mytitle="Мои ссылки"}

home/productset.html

home/productset.html - вывод списка товаров.

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

Параметр	Назначение
condition	Условие выбора товаров. Например: tag/new - Товары с тегом new category/12 - Товары категории с id=12 id/1,5,7 - Товары с идентификаторами 1, 5, 7 set/promo - Товары из списка promo
mytitle	Заголовок списка. По умолчанию Промо.
auto	Автоматическое перелистывание (значение true = включено). Если указать число, то изменится интервал(1000 = 1сек). Значение по умолчанию берется из настроек темы.
interval	Интервал смены слайдов. Значение по умолчанию null.
limit	Количество товаров в списке. Значение по умолчанию null (без ограничения).
noscript	Отключает слайдер и просто выводит список.

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

Вывести 10 товаров из списка с идентификатором sale2017 и заголовком "Распродажа 2017".

{include file="home/productset.html" condition="set/sale2017" mytitle="Распродажа 2017" limit=10 inline}

home/productmini.html

home/productmini.html - вывод списка товаров.

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

Параметр	Назначение
condition	Условие выбора товаров. Например: tag/new - Товары с тегом new category/12 - Товары категории с id=12 id/1,5,7 - Товары с идентификаторами 1, 5, 7 set/promo - Товары из списка promo
mytitle	Заголовок списка. По умолчанию Промо.
auto	Автоматическое перелистывание (значение true = включено). Если указать число, то изменится интервал(1000 = 1сек). Значение по умолчанию берется из настроек темы.
interval	Интервал смены слайдов. Значение по умолчанию null.
limit	Количество товаров в списке. Значение по умолчанию null (без ограничения).
noscript	Отключает слайдер и просто выводит список.
bg	Фоновый цвет. Пример bg="#f2f8fd"
image	Фоновое изображение. Пример image="Путь к картинке"

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

Вывести 15 товаров из списка с идентификатором sales и заголовком "Распродажа" с фоновым цветом #df3a42.

{include file="home/productmini.html" condition="set/sales" mytitle="Распродажа" limit=15 bg="#df3a42" inline}

home/categories.html

home/categories.html - вывод списка категорий.

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

Параметр	Назначение
id	Идентификатор родительской категории. По умолчанию 0.
auto	Автоматическое перелистывание (значение true = включено). Если указать число, то изменится интервал(1000 = 1сек). Значение по умолчанию берется из настроек темы.
interval	Интервал смены слайдов. Значение по умолчанию null.
limit	Количество товаров в списке. Значение по умолчанию null (без ограничения).
noscript	Отключает слайдер и просто выводит список.
bg	Фоновый цвет. Пример bg="#f2f8fd"
image	Фоновое изображение. Пример image="Путь к картинке"
color	Цвет наименования списка. Пример color="#fff" (белый цвет)

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

Вывести 8 подкатегорий из категории Марки авто (предположим id=10) с фоновым изображением (/wa-data/public/shop/themes/dsvpro/img/catsbg.jpg) и желтым цветом наименования (#ffe93b).

{include file="home/categories.html" id="10" limit=8 color="#ffe93b" image="/wa-data/public/shop/themes/dsvpro/img/catsbg.jpg" inline}

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

В разработке...

Блоки

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

site.contacts

site.contacts2

site.footer

site.copyright

shop.about

shop.primary_nav

head

body_after

body_before

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

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

Авторизация

Меню страниц

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

Меню категорий

Параметры категории для навигации

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

Обратная связь

Социальные сети

Вконтакте

Одноклассники

Facebook

Twitter

Instagram

Магазин

Слайдер

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

Слайдер продуктов

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

Добавления списка

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

Категория

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

Фильтрация товаров

Параметры категории

Страница заказа

Фото

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

Идентификатор альбома

Загрузка фотография

Блог

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

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

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

Вспомогательные шаблоны

layout/footerlist.html

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

Пример с выводом своего массива

home/productset.html

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

home/productmini.html

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

home/categories.html

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