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

Блоки

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

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

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

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

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

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

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 приведен ниже.

{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 приведен ниже:

© {$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 приведен ниже:

<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>

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

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

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

Структура сайта Shop Script 6

Авторизация

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

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

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

Меню страниц

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

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

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

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

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

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

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

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

  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
primary
Шапка 2, 4

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

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

primary=1
multicolumn
Шапка 2, 4

Указывается для категории первого уровня. Изменяет колиство колонок в выпадающем меню.

Принимает значения от 2 до 4. По умолчанию: 2

multicolumn=3
пример использования
endcol
Шапка 2, 4

Указывается для категории второго уровня. Определяет после какой категории, будет перенос на следующую колонку.

endcol=1

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

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

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

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

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

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

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

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

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

Вконтакте

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

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

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

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

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

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

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

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

Facebook

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

Twitter

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

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

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

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

После создания виджета, перейдите на страницу виджета и в адресной строке браузера скопируйте идентификатор после 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 Необходим для превью видео Слайдер продуктов (Видео)

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

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

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

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

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

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

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

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

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

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

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

Категория

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

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

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

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

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

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

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

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

Параметр Описание и возможные значения Пример
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 => "Доставлен" ]
]}

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

Фото

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

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

  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

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

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}