Темы webasyst: Темы дизайна для Webasyst и Shop-Script

Темы дизайна для Webasyst и Shop-Script

Самые продаваемые (и продающие) темы с отличной технической поддержкой.

• -25%
  Прокачайте магазин Super-темой!

• Всё, что вы хотели. И немного больше

• До 99 баллов Google PageSpeed

• Быстрый интернет-магазин

• Простой, красивый, лаконичный одностраничник

• -20%
  Специальные возможности для больших продаж!

• Jewelry Theme — современная тема дизайна

• Визуальный конструктор главной страницы в коробке!

• -15%
  Адаптивная, функциональная и современная тема.

• -25%
  Прокачайте магазин Super-темой!

• -15%
  Современный сайт и лендинг в одной теме

• -15%
  Современная тема для магазина.

• -25%
  Тема со встроенным конструктором главной страницы!

• -20%
  Специальные возможности для больших продаж!

• -15%
  Топовая тема для интернет-магазина любой тематики.

• -30%
  Готовый интернет-магазин с визуальным редактором

• Тема дизайна для большого интернет-магазина.

• Семейство адаптивных тем дизайна.

• Оптимизирует сайт для смартфонов iOS и Android.

• Семейство адаптивных тем дизайна.

• Простой, красивый, лаконичный одностраничник

• Магазин украшений и подарков с конструктором

• -30%
  Готовый интернет-магазин с визуальным редактором

• Красивая, удобная и функциональная тема дизайна

• Стильный корпоративный сайт и фотогалерея

• Современная тема для блога

• Адаптивная вёртка, настройка цветов, оптимизация..

Темы дизайна — Документация Webasyst

Приложение «Сайт» предоставляет общий редактор шаблонов дизайна для разных приложений: «Сайт», «Блог», «Магазин» и других уже выпущенных и планируемых
к выпуску приложений.

Файлы шаблонов

В Вебасисте предусмотрены два стандартных места для хранения шаблонов дизайна (тем оформления):

1. wa-apps/APP_ID/themes/ — оригинал темы в папке приложения
2. wa-data/public/APP_ID/themes/ — пользовательские изменения темы

В папке приложения (wa-apps/) хранится оригинал темы, куда она устанавливается с помощью приложения «Инсталлер».
При изменении хотя бы одного шаблона с помощью встроенного редактора приложения «Сайт» создается копия оригинала темы в пользовательской папке
wa-data/public/APP_ID/themes/, и с этого момента используется только она (оригинал остается
в папке wa-apps/, но никак больше не изменяется через редактор дизайна).

Для редактирования шаблонов дизайна рекомендуется пользоваться только встроенным редактором дизайна, т. к. в этом случае гарантируется сохранение
изменений в шаблонах дизайна при установке обновлений с помощью «Инсталлера». Если вы редактируете файлы шаблонов, не используя встроенный редактор дизайна
(например, по FTP), то настоятельно рекомендуется редактировать только пользовательскую копию темы в wa-data/, чтобы не
потерять изменения при установке обновлений.

Встроенный редактор дизайна

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

В зависимости от функционала каждое приложение на свое усмотрение предоставляет свой набор обязательных шаблонов дизайна. Например, в приложении
«Сайт» являются обязательными только шаблоны index.html (общая разметка страницы), page.html (вывод содержимого
одной страницы) и error.html (отображение сообщения об ошибке). В приложении «Блог» есть другие обязательные шаблоны:
post.html (отображение одной записи), stream.html (отображение списка записей),
comments.html (комментарии к записи). Разработчик каждого приложения самостоятельно определяет, из каких шаблонов должна
состоять его тема оформления и какие из шаблонов являются обязательными.

С помощью встроенного редактора дизайна владелец сайта имеет возможность редактировать все шаблоны дизайна, может создавать свои шаблоны, подключать их
к основным шаблонам с помощью директивы Smarty {include file="..."}, но не может удалить обязательные файлы шаблонов, чтобы
не нарушить целостность работы приложения.

Структура темы оформления

Тема оформления — это объединенные в одной папке HTML/Smarty-шаблоны, файлы JavaScript, CSS, изображения и файл-манифест
theme.xml.

В файле-манифесте theme.xml должны быть перечислены основные настройки темы (название, версия) и файлы, изменение которых
доступно в редакторе дизайна. Структурная схема XML размещена по адресу
http://www.webasyst.com/wa-content/xml/wa-app-theme.dtd.

Подробнее о структуре темы оформления →.

Настройки темы

Настроить оформление интернет-магазина и сайта очень легко.
Большинство настроек темы задается на странице «Дизайн» –> «Настройки темы» приложения Сайт.
Открыть эту страницу можно также в приложении Магазин на вкладке «Витрина» -> «Дизайн» -> «Настройки темы».
Рассмотрим подробно каждый из пунктов.

• 
  «Цветовая гамма». Задает один из множества вариантов цветового оформления меню навигации, сайдбара, кнопок и других элементов вашего сайта.
• 
  «Цвет фона». Выпадающий список, задающий цвет фона вашего сайта.
• 
  «Рисунок фона». Просто выберите подходящее фоновое изображение.
• 
  «Своё фоновое изображение». Если не один из проедложенных вариантов не подходит для вашей тематики, здесь вы можете загрузить свой фон.
  Рекомендуется использовать светлые бесшовные фоны низкой контрастности.
• 
  «Шрифт логотипа». В этом выпадающем списке вы можете выбрать один из нескольких оригинальных шрифтов для вашего логотипа.
• 
  «Размер шрифта логотипа». Число, задающее высоту букв шрифта (px).
• 
  «Вертикальный отступ логотипа». Вы можете сдвинуть ваш логотип вверх, указав в этом поле отрицательное число (px).
• 
  «Текст логотипа». Необязательное поле, задающее название вашей компании. Используется для магазинов с несколькими витринами.
• 
  «Цвет логотипа». Вы можете ввести в этом поле значение цвета или просто выбрать нужный цвет из предлагаемой палитры цветов. Для включения палитры нажмите на «кружок» после поля ввода цвета.
• 
  «Логотип». Если у вас есть изображение с логотипом вашей компании, просто загрузите его здесь, и он будет показан в заголовке всех страниц вашего сайта.
• 
  «Ширина изображения логотипа». Графический логотип будет ограничен указанным здесь значением.
• 
  «Слоган». Необязательное поле, задающее слоган вашей компании. Слоган располагается непосредственно под логотипом компании.
• 
  «Текст к телефонному номеру». Необязательное поле, задающее поясняющий текст к телефонному номеру, например: «Есть вопросы? Звоните:».
• 
  «График работы». Необязательное поле. Пример: «Мы работаем с 10:00 до 21:00 Пн.-Пт.».
• 
  «Использовать в главном меню страницы приложения:».
  Вы можете создавать статические страницы, отображаемые в главном меню, либо в приложении Магазин, либо в приложении Сайт.
• 
  «Префикс URL для изображений».
  Необязательное поле, задающее URL папки для загруженных изображений.
  Используется для отображения иконок категорий товаров.
  Рекомендуется создавать папки и загружать в них изображения в приложении Сайт на странице «Файл-менеджер».
  В этом случае URL нужной папки будет выглядеть примерно так: http://ваш-сайт/wa-data/public/site/img или просто /wa-data/public/site/img (эта строка отображается в заголовке страницы).

• 
  «Использовать иконки категорий».
  Если у вас есть набор иконок для категорий верхнего уровня, загрузите их в папку с изображениями и поставьте галочку напротив этого пункта.
  Названия файлов должны соответствовать идентификатору в пункте «Ссылка на витрину» в настройках категории. Допускаются файлы с расширением «.png».
• 
  «Использовать горизонтальное меню категорий».
  При выборе этого пункта меню категорий будет расположено горизонтально под главным меню.
• 
  Тип меню навигации.
  Если вы используете многоуровневое навигационное меню с большим количеством элементов-ссылок, рекомендуется выбрать вариант «Раскрывающееся» или «Полное» меню.
• 
  «Минимальная ширина страницы».
  Необязательное поле, ограничивающее минимальную ширину всех страниц сайта. В случае, если размер окна браузера будет меньше указанной величины, появится полоса прокрутки.
• 
  «Максимальная ширина страницы». Необязательное поле, ограничивающее максимальную ширину всех страниц сайта.
• 
  «Заголовок витрины магазина». Строка внутри тега <h4> Например, «Добро пожаловать!».
• 
  «Текст приветствия для витрины магазина». Краткое описание вашего магазина. Допускаются HTML-теги.
• 
  «Слайдер на витрине интернет-магазина». Для автоматического формирования главного баннера на витрине вашего магазина можно использовать
  фотографии из приложения Фото, последние фото товаров-бестселлеров (в качестве фона баннера) или карточки товаров-бестселлеров
• 
  «Условие выбора фотографий для слайдера». Используется в случае использования фотографий приложения Фото в качестве слайдов баннера.
  Например: «album/1» — фото из альбома 1, «tag/shop» — фото с тегом и «shop» т.д. Подробности см. в документации к приложению Фото.
• 
  «Эффекты слайдера для главного баннера». Доступны 28 эффектов + случайный выбор («random»).
  Вы можете выбрать несколько эффектов, просто разделяя их запятыми, например: topLeftBottomRight, curtainTopLeft, blindCurtainTopLeft.
• 
  «URL ссылки с баннера». Адрес страницы, открывающейся при клике на баннер. Эта настройка действует только при использовании приложения Фото.
  Вы также можете задавать ссылки отдельно для каждой фотографии, просто поместив их в поле «описание» (в приложении Фото).
• 
  «Вид блока «Специальные предложения»». Здесь вы можете включить или выключить слайдер для представленияна на витрине товаров из списка «promo».
• 
  «Вид блока «Хиты продаж»». Выберите «слайдер» или «нормальный» вид для списка «bestsellers».
• 
  «Адрес страницы в Фейсбуке/Твиттере/Google+/Livejornal/Вконтакте/Pinterest».
  Набор необязательных полей, задающих адреса вашей компании в социальных сетях. Если у вас нет своей страницы, оставьте соответствующее поле пустым.
• 
  «Код счетчика посещений». Если вы зарегистрировали счетчик посещений на одном из интернет-ресурсов, вы можете ввести полученный html-код в это поле.
  Счетчик посещений появится в «подвале» вашего сайта.
• 
  «Дополнительные стили». Здесь можно переопределять любые css-стили вашего сайта, не внося никаких правок в шаблоны. В этом случае вы сможете продолжать получать обновления вашей темы.
• 
  «Скрыть блок «Новые фото»», «левую панель», «кнопки социальных сетей», «количество товаров в списке категорий»,
  «блок «Вы недавно смотрели»», «ссылку «написать отзыв» о товаре», «ссылку «Добавить к сравнению»». Бывает полезно для интернет-магазинов определенного профиля.
• 
  «Скрыть заголовки при оформлении заказа». По умолчанию заголовки и «подвал» страницы оформления заказа скрыты, чтобы не отвлекать внимание покупателя.
• 
  «Сервисное объявление для витрины магазина». Бывают ситуации, когда нужно показать покупателям хорошо заметное объявление, например, информацию о временной приостановке продаж.
  Вы можете ввести текст такого объявления в это поле.
• 
  «Открывать товары в новой вкладке». Если вы хотите, чтобы страницы категорий оставались открытыми, поставьте эту галочку.
• 
  «Расположение блока фильтров». Фильтры товаров по характеристикам можно показавыть либо в левой панели, либо на странице категории товаров.
• 
  «AJAX-фильтры товаров по характеристикам». По умолчанию, результаты поиска товаров в категории обновляются автоматически при изменении условий поиска в фильтре.
• 
  «Дополнительный текст для страницы печати». В это поле можно добавить, например, адрес вашей компании, и он появится в карточке товара при распечатке.
• 
  «Защита от копирования». Включение этой опции затруднит копирование текстовой и графической информации с вашего сайта.

Верхнее горизонтальное меню сайта.

Верхней горизонтальный блок навигации отображает ссылки на основные разделы вашего сайта и состоит из двух частей:

1. Установленные вами приложения (например, «Магазин», «Блог», «Фото» и т.д.).
2. Основные страницы приложения «Cайт» (например, «О компании», «Доставка и оплата», «Контакты» и т.д.).

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

Слайдер.

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

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

Для использования фотографий нужно:

1. Установить бесплатное приложение «Фото» и создать альбом с любым названием.

2. Загрузить слайды для баннера в созданный альбом. Рекомендуется использовать изображения одинакового размера.
«Приватный доступ» устанавливать не нужно.

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

3. Узнайте идентификатор созданного альбома. Это последняя цифра в адресной строке браузера при просмотре альбома, например:

ваш_сайт.ru/webasyst/photos/#/album/1/

Здесь идентификатор альбома = 1. По умолчанию, баннер использует именно этот идентификатор.
Если вы разместили ваши изображения в другом альбоме, просто измените значение поля «Условие выбора фотографий для слайдера».

Правый сайдбар.

Опционально тема «Фаворит» поддерживает трехколоночную верстку. Для размещения на вашем сайте правого сайдбара просто создайте блок «shop.right_sidebar» в разделе «Сайт» -> «Блоки».

Заключение.

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

Удачи!

Super тема дизайна

Super-возможности: максимум функционала всего за 8 399 ₽

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

Вместе с Super-темой доплачивать не нужно!

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

В дополнение к теме вы получаете 12 плагинов*, общей стоимостью 6 286 ₽.
* – вы получаете не сами плагины, а функции, которые они выполняют.

Список функций, заменяющих плагины:

• 
  Функция предпросмотра корзины
  
  Цена плагина – 539 ₽. В Super-теме – бесплатно!
• 
  Функция быстрого редактирования товаров и страниц
  
  Цена плагина – 359 ₽. В Super-теме – бесплатно!
• 
  Микроразметка Schema.org
  
  Цена плагина – 499 ₽. В Super-теме – бесплатно!




• 
  Группа Вконтакте
  
  Цена плагина – 299 ₽. В Super-теме – бесплатно!
• 
  Блок «поделиться»
  
  Цена плагина – 359 ₽. В Super-теме – бесплатно!
• 
  Список пожеланий
  
  Цена плагина – 499 ₽. В Super-теме – бесплатно!
• 
  Быстрый просмотр товара
  
  Цена плагина – 499 ₽. В Super-теме – бесплатно!
• 
  Плиточная галерея
  
  Слайдер фото в карточках товара на страницах категорий.
  
  Цена плагина – 599 ₽. В Super-теме – бесплатно!
• 
  Изображения для Блога
  
  Изображения для Блога добавляются через дополнительные параметры.
  
  Цена плагина – 359 ₽. В Super-теме – бесплатно!
• 
  Уведомление об использовании персональных данных
  
  Цена плагина – 299 ₽. В Super-теме – бесплатно!
• 
  Отзывы покупателей на главной
  
  Цена плагина – 359 ₽. В Super-теме – бесплатно!
• 
  Живой поиск товаров
  
  Цена плагина – 299 ₽. В Super-теме – бесплатно!
• 
  Верхний продающий баннер
  
  Цена плагина – 719 ₽. В Super-теме – бесплатно!

ИТОГО за плагины: 5 687 ₽
Столько вы экономите на плагинах, покупая Super-тему!

Super-тема – это значит:

установил – настроил – пользуйся — не плати лишнего!

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

Купить тему!

Создание собственной темы дизайна для Shop-Script — Webasyst

В этой статье описаны основы создания собственной темы дизайна для общего понимания — без подробного описания процесса разработки. Удобнее всего начать создание собственной темы — скопировать исходный код существующей темы, например, «Дефолт 3.0», и доработать его так, как вам нужно.

Тема дизайна для Shop-Script должна содержать следующий набор основных шаблонов витрины:

• index.html (общая структура страниц витрины)





• home.html (шаблон главной страницы витрины)





• category.html (шаблон страниц с информацией о категории товаров)





• product.html (шаблон страницы с информацией об одном товаре)





• cart.html (шаблон страницы «Корзина»)





• error.html (шаблон для отображения сообщений об ошибках, например, «Страница не найдена»)

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

• checkout.html





• checkout.contactinfo.html





• checkout.shipping.html





• checkout.payment.html





• checkout.confirmation.html





• checkout.success.html





• checkout.error.html

1. Формирование структуры темы дизайна

Новую тему дизайна необходимо создавать в виде папки с произвольным именем на вашем компьютере. В ходе создания темы в эту папку будут сохраняться отдельные HTML-шаблоны и другие необходимые файлы (CSS, JavaScript + обязательный файл-манифест theme.xml).

Тема дизайна витрины может формироваться отдельно — только для Shop-Script, либо в составе семейства тем оформления, имеющих сходные оформительские элементы и предназначенные для использования в нескольких разных приложениях Webasyst с целью создания общего внешнего вида для разных фронтендов в пределах одного сайта. Подробнее о разработке семейств тем дизайна читайте в статье «Родительские темы дизайна».

2. Содержание основных шаблонов

index.html

Шаблон index.html формирует основную структуру страниц витрины с помощью элементов <DOCTYPE>, <html>, <head> и <body>.

Внутри элемента <head> обычно подключаются CSS-стили и JavaScript-файлы.

Внутри элемента <body> могут формироваться основное навигационное меню (например, с помощью метода {$wa->apps()}, как это сделано в теме дизайна «Дефолт»), боковые панели, нижняя панель («футер») и тому подобные структурные блоки страницы, общие для всех страниц витрины.

Важно: для отображения динамически формируемой информации на витрине (в центральной части страницы) необходимо добавить в шаблон index.html переменную {$content}. В случае отсутствия этой переменной все страницы витрины окажутся одинаковыми, т. к. на них не будет отображаться динамически формируемое содержимое: списки товаров на главной странице, информация о конкретном товаре, списки товаров в категориях и т. п.

home.html

К шаблону home.html, предназначенному для отображения основной (обычно центральной) части главной страницы специальные требования не предъявляются — он может содержать списки товаров, ссылки на отдельные категории товаров, разнообразные рекламные тексты, видео-ролики и другие подобные материалы.

category.html

Свойства категории

Шаблон category.html предназначен для отображения содержимого категории товаров.

Описание, наименование, список подкатегорий, META-теги, URL страницы, количество товаров и другие свойства категории содержатся в переменной {$category} в виде элементов ассоциативного массива. Это значит, что для отображения, например, наименования категории необходимо добавить в шаблон category.html переменную {$category.name|escape} (модификатор |escape необходим для правильного отображения на витрине различных специальных символов, которые могут содержаться в названиях категорий, например, часто встречающегося символа «&»).

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

Для формирования списка товаров следует использовать переменную {$products}, которая содержит массив элементов с информацией о товарах в этой категории. Для считывания отдельных элементов массива обычно используется цикл Smarty {foreach}…{/foreach}.

Совет: код для отображения списка товаров, используемый в шаблоне category.html, может быть использован и на других страница витрины, например, на странице с результатами поиска, поэтому удобно вынести этот код в отдельный шаблон, назвав его, например, product-list.html. Подключить такой дополнительный шаблон в шаблоне category.html можно с помощью Smarty-функции {include}:

{include file='product-list.html'}

В теме дизайна «Дефолт» для этой же цели используются 2 разных шаблона: list-table.html и list-thumbs.html ­— для формирования списков товаров с разным оформлением в разных местах витрины.

Фильтры

Другим ключевым элементом страниц категорий является фильтр товаров — веб-форма для поиска товаров в категории по указанным значениям характеристик. Список характеристик, выбранных для фильтрации в конкретной категории, содержится в переменной {$filters}. Для простоты разработки собственной темы дизайна рекомендуем скопировать из шаблона category.html темы «Дефолт» фрагмент кода, обозначенный комментарием <!— filtering by product features —>, в котором используется переменная {$filters}.

product.html

Шаблон product.html используется для формирования основного содержимого страницы товара. Обычно на этой странице отображаются наименование, описание, характеристики товара и кнопка «В корзину».

Информация о товаре содержится в виде экземпляра класса shopProduct в переменной {$product}.

Исходный код класса shopProduct находится в файле wa-apps/shop/lib/classes/shopProduct.class.php.

Например, по аналогии с категориями, наименование товара можно отобразить на витрине с помощью конструкции {$product.name|escape}.

О том, как разместить изображения товара в шаблоне витрины, читайте в статье «Эскизы изображений».

Помимо отображения информации о товаре, важной функцией страницы товара является возможность добавить товар в корзину, чтобы затем перейти к оформлению заказа. Форма добавления товара в корзину может быть создана в виде тега <form>, данные которой должны отправляться методом POST на URL, возвращаемый конструкцией {$wa->getUrl(‘/frontendCart/add’)}.

Артикулы, услуги, информация о складских остатках, рекомендуемые товары

Эти элементы страницы товара требуют сравнительно сложного программирования с использованием Smarty и JavaScript, поэтому для первоначального ознакомления их реализацию будет полезно посмотреть в шаблоне product.html темы «Дефолт» и затем модифицировать нужным образом для адаптации к вашей собственной теме дизайна.

cart.html

Шаблон cart.html используется для отображения страницы со списком товаров, добавленных в корзину. Как правило, на такой странице можно изменить количество заказанных единиц товаров, удалить отдельные товары из корзины либо сразу перейти к оформлению заказа.

Информация о текущей покупательской корзине содержится в переменной {$cart} в виде ассоциативного массива со следующими элементами:

• items — список товаров, добавленных в корзину





• total — общая сумма цен заказанных единиц товаров с учетом выбранных артикулов и вариантов услуг





• count — общее количество заказанных единиц товаров

Добавление функций автоматического пересчета стоимости заказа после изменения количества заказанных единиц и выбора вариантов услуг для отдельных товаров, а также обновления содержимого корзины при удалении товаров без перезагрузи страницы требует использования сравнительного большого объема JavaScript-кода. Поэтому при создании собственной темы дизайна предлагаем в качестве основы использовать реализацию страницы корзины из темы «Дефолт» и при необходимости ее доработать.

error.html

Если при запросе страницы витрины возникает ошибка (например, «Страница не найдена» или «Внутренняя ошибка сервера»), то для отображения информации об этом используется шаблон error.html. Переменные, доступные в этом шаблоне:

• $error_message — сообщение об ошибке, генерируемое магазином





• $error_code — код ответа сервера, например, 404 или 500

3. Поддержка плагинов

Базовые темы дизайна Shop-Script (например, тема «Дефолт») имеют встроенную поддержку плагинов. Эта поддержка заключается в том, что в шаблонах темы дизайна присутствуют специальные вставки (хуки), которые позволяют автоматически добавлять на витрину магазина дополнительное содержимое (например, список брендов товарной продукции и т. п.). Пример хука в шаблоне product.html:

<!-- plugin hook: 'frontend_product.menu' -->
{* @event frontend_product.%plugin_id%.menu *}
{foreach $frontend_product as $_}{$_.menu}{/foreach}

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

4. CSS- и JavaScript-файлы

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

Подключение общих файлов фреймворка

Общие CSS- и JavaScript-файлы фреймворка находятся в директориях wa-content/css/ и wa-content/js/ соответственно. Для того чтобы подключить их в шаблоне темы дизайна, следует указывать URL этих директорий с учетом URL, по которому установлен фреймворк. Сделать это можно с помощью переменной {$wa_url}:

<link href="{$wa_url}wa-content/css/wa/wa-1.0.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{$wa_url}wa-content/js/jquery-plugins/jquery.cookie.js"></script>

Подключение собственных файлов темы

Для подключения собственных CSS- и JavaScript-файлов темы необходимо в шаблонах указывать URL директории с файлами темы дизайна. Для этого рекомендуется использовать переменную {$wa_theme_url}:

<link href="{$wa_theme_url}style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{$wa_theme_url}script.js"></script>

Подключаемые в таком примере файлы style.css и script.js следует добавить в папку со всеми остальными шаблонами темы.

5. Создание файла-манифеста

Для того чтобы Shop-Script воспринимал набор созданных шаблонов как составные части определенной темы дизайна, необходимо указать все файлы созданной вами темы в специальном файле-манифесте theme.xml. Пример файла-манифеста и описание его элементов смотрите в статье «Интеграция с приложением «Сайт»».

Важно: идентификатор (id) вашей темы дизайна, указанный в файле-манифесте theme.xml, не должен совпадать с идентификаторами других тем, установленных в магазине!

6. Загрузка на сервер

Перед загрузкой файлов темы на сервер их необходимо вместе с файлом-манифестом запаковать в архив формата TAR.GZ. Упаковать нужно только файлы — без папки, в которой вы их создавали на вашем компьютере! Имя файла-архива не имеет значения. Архив необходимо добавить по ссылке «Загрузить тему» в разделе «Витрина».

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

Родительские и дочерние темы дизайна — Документация Webasyst

Разделы сайта, сформированные разными приложениями, используют отдельные темы дизайна, потому что каждая тема относится только к своему приложению. Например, на страницах «Сайта» используется одна тема дизайна, а на страницах «Блога» — другая.

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

• Скопировать код дизайна из темы одного приложения в файлы темы другого приложения. Этот подход — самый простой в начале, но трудоемкий при выпуске обновлений для темы дизайна, потому что один и тот же обновленный код придется копировать из одной темы в другую.
• Хранить общие фрагменты дизайна в одной теме и подключать их при необходимости в других темах. Этот подход позволяет избежать лишней работы и ошибок при копировании. Нужно только сразу указать, какие файлы хранятся в основной (родительской) теме дизайна, и как другие темы (дочерние) должны должны использовать эти файлы.

Отличия родительской и дочерних тем

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

Дочерняя тема дизайна использует некоторые файлы родительской темы. Например, CSS-стили или шаблоны общих элементов: заголовок, боковые панели, подвал сайта.

В файле theme.xml дочерней темы должно быть следующее:

• Атрибут parent_theme_id элемента theme с ID родительской темы и ее приложения в формате app_id:theme_id.

  Пример для темы приложения «Фото», которая является дочерней по отношению к родительской теме «Сайта»:

  <theme vendor="123456" author="ThemeDeveloper" app="photos" parent_theme_id="site:mytheme" version="1.0.0">

• (необязательно) Атрибут parent="1" для тех файлов, которые должны обязательно подключаться в дочерней теме из родительской темы дизайна. Пример для файла index.html, который есть только в родительской теме и подключается дочерней темой:

  <file path="index.html" parent="1">
  </file>

  Такие файлы пользователь бекенда может редактировать в редакторе дизайна обоих приложений: и родительской, и дочерней тем дизайна.

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

Переменные Smarty для подключения файлов

Файлы родительской и дочерней тем дизайна можно подключать в коде HTML-шаблонов с помощью переменных. Переменные можно использовать только в HTML-файлах — в других файлах их значения недоступны.

Если тема дизайна сброшена до оригинального состояния, то перечисленные здесь переменные указывают на директорию wa-apps/[app_id]/themes/[theme_id]/ или ее URL.

Если пользователь сохранил настройки темы дизайна или если тема загружена вручную в виде архива через редактор дизайна, то переменные указывают на директорию wa-data/public/apps/[app_id]/themes/[theme_id]/ или ее URL.

Подключение файлов JavaScript, CSS и шрифтов

Эти переменные возвращают URL директории темы, поэтому с их помощью можно подключать только файлы, доступные при обращении через браузер, например, CSS- или JS-файлы.

$wa_theme_url

Относительный URL директории той темы, к которой относится текущий HTML-файл. Если подключен CDN, то переменная содержит абсоютный URL CDN-копии темы дизайна.

Если дочерняя тема использует файл родительской темы с помощью атрибута parent="1", то переменная в этом файле содержит URL директории родительской темы.

В собственных файлах дочерней темы переменная содержит URL дочерней темы.

В файлах родительской темы переменная содержит URL родительской темы.

Пример

<link href="{$wa_theme_url}extra.css" rel="stylesheet" type="text/css">

$wa_real_theme_url

Относительный URL директории той темы, к которой относится текущий HTML-файл — как $wa_theme_url. Всегда содержит URL директории темы на сервере, где установлен Webasyst — без учета настройки CDN.

Пример

<link href="{$wa_real_theme_url}extra.css" rel="stylesheet" type="text/css">

$wa_active_theme_url

Относительный URL директории темы дизайна, которая использует текущий HTML-файл на странице сайта.

Если дочерняя тема использует файл родительской темы с помощью атрибута parent="1", то переменная в этом файле содержит URL темы поселения текущей страницы сайта: родительской либо дочерней.

В собственных файлах дочерней темы переменная содержит URL дочерней темы.

В файлах родительской темы переменная содержит URL родительской темы.

Пример

<link href="{$wa_active_theme_url}extra.css" rel="stylesheet" type="text/css">

$wa_parent_theme_url

Относительный URL родительской темы дизайна.

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

Пример

<link href="{$wa_parent_theme_url}mytheme.css" rel="stylesheet" type="text/css">

Подключение HTML-файлов

$wa_active_theme_path

Полный путь к директории темы дизайна, которая использует текущий HTML-файл на странице сайта.

Если текущий HTML-файл подключен к дочерней теме с помощью атрибута parent="1", переменная в этом файле содержит путь к директории темы поселения текущей страницы сайта: родительской либо дочерней.

Пример

{include file="`$wa_active_theme_path`/sidebar.html"}

$wa_parent_theme_path

Полный путь к директории родительской темы дизайна.

Имеет смысл только в файлах дочерней темы для подключения файлов родительской темы дизайна.

Пример

{include file="`$wa_parent_theme_path`/home.html"}

Выбор темы дизайна / Тема дизайна «Тема №8 «Элит»»

Как выбрать тему дизайна для Shop-Script. Несколько советов.

Выбор подходящего шаблона для вашего интернет-магазина – не такая простая задача, как может показаться на первый взгляд.
Владельцы магазинов хотят, чтобы их витрина была красивой и не похожей на другие, и, в то же время, была удобной и привычной покупателям, «заставляя» их заходить еще и еще.
Чтобы выполнить эти противоречивые требования, можно следовать нескольким простым правилам:

1. Выбирайте ту тему дизайна, которая, по вашему мнению, больше подходит для тематики вашего интернет-магазина.
Представьте, как она будет смотреться именно с вашими товарами.

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

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

4. Очень важна скорость загрузки сайта. Если ваша витрина не загрузится в течении примерно 2-х секунд, посетитель, скорее всего, уйдет.
Отказ негативно влияет на позиции в поиске, а ушедший клиент несет убыток для бизнеса. Кроме того, скорость загрузки может учитываться в ранжировании поисковиками.
Поэтому рекомендуется выбирать «легкие» шаблоны, не перегруженные лишними запросами и «тяжелой» графикой.

Оценить скорость загрузки можно не только по личным впечатлениям, но и с помощью специальных инструментов, например,
Pingdom Website Speed Test:

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

Заключение

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

Темы оформления — документация Webasyst

Приложение «Сайт» является обычным редактором дизайна для нескольких других (уже выпущенных или разрабатываемых) приложений: «Сайт», «Блог», «Магазин».

Шаблоны дизайна

В Вебасисте есть два стандартных места для хранения файлов шаблонов (тем) дизайна:

1. wa-apps / APP_ID / themes / — файлы темы оригинального дизайна внутри папки приложения
2. wa-data / public / APP_ID / themes / — пользовательские изменения дизайна, применяемые пользователями приложения

В папке приложения ( wa-apps / ) хранятся исходные файлы темы, куда они копируются, когда тема установлена ​​в установщике.Когда какой-либо файл шаблона изменяется с помощью встроенного редактора сайта, в папке пользователя создается копия исходной темы.
wa-data / public / APP_ID / themes / , и только эта копия будет использоваться после этого (исходная тема остается в папке
wa-apps / и никогда больше не изменяется редактором дизайна).

Мы рекомендуем использовать только встроенный редактор для изменения шаблонов дизайна, потому что в этом случае все ваши изменения будут гарантированно сохранены при установке обновлений.
с помощью установщика.Если вы предпочитаете редактировать шаблоны непосредственно в файлах (например, через FTP) без использования редактора дизайна, мы настоятельно рекомендуем вам изменить
только пользовательская копия, расположенная внутри wa-data / , чтобы не потерять ваши изменения после следующего обновления программного обеспечения.

Встроенный редактор дизайна

Бэкэнд и интерфейс

Webasyst используют механизм обработки шаблонов Smarty; поэтому вы можете использовать все функции Smarty в дизайне
шаблоны. В правом нижнем углу окна редактора дизайна вы найдете шпаргалку со списком структур и переменных, которые вы можете использовать в
текущий шаблон.

В зависимости от конкретной функциональности каждое приложение имеет собственный набор обязательных шаблонов дизайна. Например, в приложении «Сайт» такие обязательные файлы шаблонов
это только index.html (общий макет страницы), page.html (одна страница) и error.html
(сообщение об ошибке). В приложении Блог есть и другие обязательные шаблоны: post.html (одиночный пост),
stream.html (список сообщений), comments.html (список комментариев к сообщению).Разработчик каждого приложения может решить,
из каких шаблонов должна состоять тема дизайна и какие шаблоны являются обязательными.

Используя встроенный редактор дизайна, владелец сайта может редактировать все шаблоны, создавать новые шаблоны, связывать их с базовыми шаблонами с помощью функции Smarty.
{include file = "..."} , но не может удалить обязательные файлы шаблонов и, таким образом, нарушить нормальную работу приложения.

Структура темы дизайна

Тема дизайна — это комбинация шаблона HTML / Smarty, JavaScript, CSS и файлов изображений, а также темы файла манифеста .xml хранится
в одной папке.

Файл манифеста theme.xml содержит основные настройки темы (название и версия) и список файлов, которые должны быть доступны через
редактор дизайна. Соответствующий файл DTD, определяющий его структуру XML, доступен по адресу
http://www.webasyst.com/wa-content/xml/wa-app-theme.dtd.

Подробнее о структуре темы дизайна →.

Статистика и ошибки Webasyst Dummy-Theme

17

ЗВЕЗД

12

ЧАСЫ

8

ВИЛКИ

3

ВОПРОСЫ

Обзор Wwebasyst 2021 — Не платите, пока не прочтете это

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

Webasyst — это универсальная веб-платформа, которая объединяет систему CRM (маркетинг взаимоотношений с клиентами), инструменты управления проектами и корпоративную интранет со стандартной CMS (системой управления контентом) и интернет-магазином. Их основной аргумент заключается в том, что все эти инструменты можно легко установить и настроить для совместной работы, чтобы компаниям не приходилось тратить время на поиск и освоение нескольких новых систем, чтобы начать работу.Их магазин тем предлагает здоровый выбор как бесплатных, так и платных тем, с помощью которых можно настроить свой веб-сайт. Кроме того, вы можете вручную изменить логотипы, цвета, шрифты и т. Д. Через встроенную панель дизайна. Если вам нужно больше функций, чем то, что уже было предварительно установлено и настроено, их интернет-магазин приложений содержит более 500+ готовых приложений, которые можно установить одним щелчком мыши. Пользователи, разбирающиеся в коде, также имеют возможность разрабатывать свои собственные приложения на платформе PHP с открытым исходным кодом.

У них разумные цены на предлагаемые функции. С рекомендуемым планом Pro для растущего бизнеса клиенты Webasyst могут разместить до пяти доменов, неограниченное количество пользователей, автоматическую маркетинговую рассылку, неограниченное количество продуктов в электронном магазине, мобильное приложение для управления магазином, отчеты о продажах, показатели сайта, ускорение скорости сайта. , а также функции A / B-тестирования. В отличие от этого, план для начинающих включает только один домен, одного пользователя, автоматическую маркетинговую рассылку и 200 товаров в электронном магазине.Пользователи, которые приобретают годовой план вместо ежемесячного продления, получают дополнительную скидку на свои тарифы.

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

WebAsyst Pages Manual

Webasyst Hosting: лучший веб-хостинг Webasyst

Вот лишь некоторые из множества способов, которыми решения A2 Hosting сделают вашу жизнь проще …

Всего лишь 1-секундная задержка загрузки страницы влияет на ваш показатель отказов , SEO-рейтинг , ваш коэффициент конверсии , и, в конечном счете, вашу прибыль! Вам не придется ни о чем беспокоиться, если вы выберете хостинг A2 и нашу невероятно быструю платформу SwiftServer! Это потому, что ваши сайты размещаются на наших серверах с оптимизированной скоростью с вашим выбором местоположения сервера, бесплатными твердотельными накопителями, веб-сервером LiteSpeed ​​и нашей опцией Turbo Server до в 20 раз быстрее, что ведет к повышению производительности веб-сайта! Наши серверы Turbo теперь оснащены серверами AMD EPYC с накопителями NVMEe с:

• Производительность ЦП выше на 40%
• В 2 раза быстрее до первого байта
• Может обрабатывать в 9 раз больше трафика
• Скорость чтения / записи в 3 раза выше

Настройте программу Webasyst одним щелчком мыши с помощью Softaculous на панели управления.Наладить и запустить ваш сайт не может быть проще и быстрее! Вы автоматически получите электронное письмо с уведомлением о выходе новой версии Webasyst. Вы сможете войти в свою панель управления и обновить установленный Webasyst одним щелчком мыши, так что вы получите новейшие функции и самые безопасные настройки !

Ежедневно во всем мире взламываются в среднем 30 000 сайтов. Наши вечные меры безопасности помогут вам не стать следующей жертвой ! Вот почему ваша учетная запись включает бесплатную защиту HackScan Protection , чтобы помочь заблокировать взломы, прежде чем они могут нанести ущерб вашему сайту.KernelCare предлагает обновления ядра без перезагрузки, защиту от перебора, двойной брандмауэр и ряд других функций безопасности, которые помогут защитить ваш сайт при выборе хостинга A2. Наш Reinformed распределенный отказ в обслуживании ( DDoS ) Protection даже повышает вероятность того, что ваш сайт останется в сети даже во время самых изощренных распределенных атак типа «отказ в обслуживании».

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

PHP 5.6, 7.1, 7.2, 7.3, 7.4 или 8.0 (выберите свою версию) MySQL 5.6 / MariaDB PostgreSQL 9.6 Python 3.4 PERL 5.10 Apache 2.4 Node.js 12 FTP / SFTP Бесплатный доступ к SSH SSL и бесплатный SSL

Услуги веб-дизайна | Профессиональная студия веб-дизайна и дизайна RAmonka предлагает уникальные и индивидуальные веб-темы и шаблоны

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

Здесь вы можете заказать разработку другого сайта : интернет-магазины и каталоги, корпоративные и индивидуальные веб-страницы, порталы и веб-визитки — все это и многое другое нам по плечу!

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

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

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

Но только в мирных целях 🙂 И именно для того, чтобы разметить ранее созданный веб-дизайн. После html-кодировки вместо красивых картинок в наших руках статичные странички будущего сайта — это как первый запах торта на кухне.

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

По правде говоря, текст и товары появились не волшебным образом, а контент-менеджерами, копирайтерами и журналистами . А пользователи находят ваш сайт через продвижение и продвижение, которыми манипулируют наши SEO-специалисты . Не в последнюю очередь на этой фиесте имеет место администратор , который следит за порядком, как администратор в отеле, а «уборщик» (техподдержка , ) ему помогает.

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

Как переводить темы — ThemeIsle Docs

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

1. Загрузите и установите плагин Polylang
2. Добавление языков
3. Перевести посты / страницы
4. Перевести встроенные разделы темы
5. Перевести меню
6. Перевести виджеты
7. Перевести нединамические строки
8. Чемодан «Детская тема»
9. Показать / скрыть раздел в зависимости от языка в Hestia Pro
10. Перевод логотипов в Hestia Pro

1.Скачайте и установите плагин Polylang

2. Добавление языков

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

Панель управления-> Языки-> Языки, Добавить новый.

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

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

3. Перевести посты / страницы

Сообщения можно перевести в Личном кабинете-> Сообщения. Просто локализуйте желаемый пост и нажмите на знак плюса, соответствующий желаемому языку, рядом с названием поста.
Таким образом было создано новое сообщение с теми же атрибутами, поэтому вам просто нужно добавить сюда контент.

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

Те же шаги можно выполнить для перевода страниц.

4. Перевести тему встроенных разделов / титульную

Действия, описанные в этом разделе, применимы к следующим темам ThemeIsle: Hestia Pro, Zelle Pro, ShopIsle Pro. Тот же подход должен работать для перевода строк Настройщика любой темы.

Следующие темы, Hestia Pro, Zelle Pro, ShopIsle Pro, имеют разделы на главной странице, которые можно редактировать только в настройщике (Панель инструментов-> Внешний вид-> Настроить).Следовательно, вы не можете создать новую страницу, как это делали бы для обычных страниц.

Все эти строки можно перевести в Dashboard-> Languages-> Strings translations. Если определенной строки там нет, вы можете попробовать изменить ее и сохранить изменения в настройщике.

Изображение, установленное в настройщике, также можно перевести здесь, установив другой URL-адрес изображения для другого языка. Такой URL-адрес изображения можно найти в Dashboard-> Media Library.

Тот же подход можно использовать для перевода контактной формы. Просто создайте новый для другого языка и переведите шорткод.

В случае, если первая страница темы работает с опцией Статическая страница, обязательно выберите страницу, которая существует на всех языках, в качестве главной страницы.
Hestia Pro так работает.

Меню можно перевести в Dashboard-> Appearance-> Menus.

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

Добавление переключателя языка в меню

Чтобы добавить переключатель языка в меню, вы должны включить его в параметрах экрана, добавить его в меню и настроить, как он должен работать (в виде раскрывающегося списка, с отображением названия языка или просто флагов).

6.Перевести виджеты

7. Преобразование нединамических строк

Нединамическая строка — это строка, которую нельзя редактировать в настройках темы.

Для получения дополнительной информации обратитесь к этому руководству.

8. Кейс «Детская тема»

Если вы используете дочернюю тему, например Orfeo Pro, которая является дочерней темой Hestia Pro, может потребоваться дополнительный шаг.

Скопируйте файл wpml-config.xml из папки родительской темы (в данном случае Hestia Pro) в папку дочерней темы (в данном случае Orfeo Pro).

В начале файла вы увидите строку, аналогичную следующей

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

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

9. Показать / скрыть раздел в зависимости от языка в Hestia Pro

В Hestia Pro разделы главной страницы могут быть показаны или скрыты с помощью параметра, доступного в Настройщике, пример ниже.

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

Если вы уже используете один, добавьте этот файл в папку дочерней темы.

После этого вы можете перевести значение опции «показать / скрыть» следующим образом.

• 1 — значит правда
• 0 — значит ложь

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

10. Перевод логотипов в Hestia Pro

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