Блоки

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

В шаблоне «Material design» определены следующие блоки:

  • site.styles - блок для вставки стилей в разделе &lp;head>
  • site.phones - блок телефонов в шапке сайта
  • site.footer_phones - блок контактной информации в подвале сайта
  • site.counters - блок для вывода счетчиков в подвале сайта
  • site.copyright - блок копирайта
  • shop.about - блок текст «О компании» на главной странице магазина

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

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

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

site.phones

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

<ul>
    {if $wa->shop}
        <!-- почта -->
        <li><a href="mailto:{$wa->shop->settings('email')}"><i class="material-icons">mail</i>{$wa->shop->settings('email')}</a></li>

        <!-- телефон -->
        <li><a href="tel:{$wa->shop->settings('phone')}"><i class="material-icons">phone</i>{$wa->shop->settings('phone')}</a></li>

        <!-- рабочее время -->
        {if $wh = $wa->shop->settings('workhours')}
        <li>
            {$wh.days_from_to}{if $wh.hours_from && $wh.hours_to} {$wh.hours_from}—{$wh.hours_to}{/if}
        </li>
        {/if}
    {/if}

    <!-- скайп -->
    <li><a href="skype:tdmitriiv?add"><i class="fa fa-skype fa-fw"></i>tdmitriiv</a></li>

    <!-- обратная связь -->
    <li>
        <a href="#feedbackModal" data-toggle="modal">
            <i class="material-icons">{$theme_settings.icon_feedback|default:'feedback'}</i> Обратная связь
        </a>
    </li>
</ul>


В некоторых шапках(1,2) контакты выводятся в одну строку. Для этого необходимо к элементку <ul> добавить класс list-inline:

<ul class="list-inline">
//контакты
</ul>

В шапках 5, 6, 11, 13 контакты выводятся в 2 столбца. Для этого необходимо разместить контакты в двух списках <ul>

<ul>
//контакты
</ul>
<ul>
//контакты
</ul>

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

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

site.counters

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

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

site.copyright

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

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

site.styles

site.styles предназначен для размещения информации в теге <head>. Пример возможного кода блока site.styles приведен ниже:

<style>
/*дополнительные стили*/
.footer { background-image: url(myimg.jpg); }
</style>

shop.about

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

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

shop.phones

shop.phones Выводит контакты в шапке оформления заказа. Пример стандартного кода блока shop.phones приведен ниже:

{if $wa->shop}
    <li><a href="mailto:{$wa->shop->settings('email')}"><i class="material-icons">mail</i>{$wa->shop->settings('email')}</a></li>
    <li><a href="tel:{$wa->shop->settings('phone')}"><i class="material-icons">phone</i>{$wa->shop->settings('phone')}</a></li>
    {if $wh = $wa->shop->settings('workhours')}
    <li>
    {$wh.days_from_to}{if $wh.hours_from && $wh.hours_to} {$wh.hours_from}—{$wh.hours_to}{/if}
    </li>
    {/if}
{/if}
<li><a href="skype:tdmitriiv?add"><i class="fa fa-skype fa-fw"></i>tdmitriiv</a></li>

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

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

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

Структура сайта Shop Script 6
  • Все правила должны заканчиваться на символ *.
  • Правило, которое содержит только символ *, должно быть последним в списке.

Авторизация

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

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

Авторизация Shop Script 6

Меню страниц

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

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

Меню приложений сайт Webasyst

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

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

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

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

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

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

Информационные страницы сайт Webasyst

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

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

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

Добавление категорий Shop Script 6

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

Параметр Описание и возможные значения Пример
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
fa
Мегаменю
Боковое меню(при клике)

Для категории 3 уровня выводит иконку рядом с названием. Иконка по умолчанию . Полный перечень иконок можно посмотреть тут font awesome

fa=fa-camera
badge
Боковое меню

Текст наклейки категории в каталоге. Параметры badge и badgeclass необходимо использовать вместе.

badge=sale
badgeclass
Боковое меню

Класс оформления наклейки. Возможные варианты:

  • new
  • blue
  • red
  • green
  • sea
  • orange
  • yellow
  • purple
  • aqua
  • brown
  • dblue
  • lgreen
  • light
  • dark
badgeclass=new

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

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

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

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

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

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

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

Форма обратной связи

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

<a href="#feedbackModal" data-toggle="modal">Обратная связь</a>
Можно убрать страницу «Обратная связь» из меню страниц, добавив дополнительный параметр nomenu=1

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

Вконтакте

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

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

Идентификатор группы вконтакте

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

Идентификатор группы вконтакте

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

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

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

Facebook

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

Twitter

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

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

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

Идентификатор группы вконтакте

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

Instagram

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

Для того чтобы узнать идентификатор пользователя необходимо пройти по ссылке 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.3. доступны следующие слайдеры:

  • Слайдер баннеров
  • Слайдер продуктов 1
  • Слайдер продуктов 2
  • Слайдер продуктов 3

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

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

  • Включена боковая панель на главной странице - изменять значение не требуется
  • Макет ограничен - изменить на значение 1170
  • Макет по умолчанию - изменить на значение 1920

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

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

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

  1. Перейти в приложение «Магазин»
  2. На вкладке «Товары» найти необходимый товар
  3. У товара выбрать вкладку «Товары»
  4. Загрузить фон
  5. Разместить фон последним в списке и указать в описании slider
Фон слайдера продуктов

Таймер

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

Идентификатор товара

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

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

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

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

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

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

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

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

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

Категория

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

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

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

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

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

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

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

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

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

Изображение категории, выводится у подкатегорий на странице категории (Куда загрузить изображение?)

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

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

album=5

Фото

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

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

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

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

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

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

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

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

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

Блог

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

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

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

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

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

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

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

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

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

footer.list.html

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

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

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

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

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

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

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

{$myarray = [
    0 => [ "name" => "Элемент 1", "url" => "Ссылка 1" ],
    1 => [ "name" => "Элемент 2", "url" => "Ссылка 2" ]
]}
{include file="footer.list.html" array=$myarray mytitle="Мои ссылки" ulclass="fs-13"}

home.productset.html

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

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

Параметр Назначение
set Идентификатор списка. Например: promo, bestsellers
mytitle Заголовок списка. По умолчанию Промо.
auto Автоматическое перелистывание (значение true = включено). Если указать число, то изменится интервал(1000 = 1сек). Значение по умолчанию берется из настроек темы.
limit Количество товаров в списке. Значение по умолчанию null (без ограничения).
noscript Отключает слайдер и просто выводит список.

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

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

{include file="home.productset.html" set="sale2016" mytitle="Распродажа 2016" limit=10 inline}

home.productset-tabs.html

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

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

Параметр Назначение
sets Массив с ключами id и name.

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

Вывести первый список с идентификатором sale2016 и заголовком "Распродажа 2016", второй список с идентификатором new2017 и заголовком "Новинки".

{$sets = [
    0 => ["name" => "Распродажа 2016", "id" => "sale2016"],
    1 => ["name" => "Новинки", "id" => "new2017"]
]}
{include file="home.productset-tabs.html" sets=$sets inline}