Как сделать тему для webasyst
Создавайте темы дизайна для Webasyst и Shop-Script 5 и зарабатывайте!
За первые три месяца работы независимые разработчики и дизайнеры, которые продают свои разработки в магазине Webasyst, заработали 3 016 789 рублей. Из них сумма продаж тем дизайна для Shop-Script 5 составила более половины — 1 671 248 рублей, причем 75% этой суммы обеспечили всего две наиболее популярные темы дизайна (более 1 250 000 рублей) из 13 тем, опубликованных на тот момент!
Хорошо продаются качественные и внимательно проработанные темы дизайна. Опыт показывает, что имея всего лишь один добротный продукт, можно зарабатывать на порядок (!) больше, чем имея десятки посредственных. Это касается и тем дизайна, и плагинов, и приложений, но в темах дизайна спрос на качественные продукты проявляется особенно явно.
Популярность тем дизайна обусловлена большим и пока ненасыщенным спросом. Каждый день на основе Shop-Script 5 открываются несколько интернет-магазинов, и каждому необходимо выразительное и индивидуальное оформление витрины. Магазины открываются совершенно разной тематики: одежда, обувь, автозапчасти, техника, косметика, подарки, медтехника, продукты питания и многие многие другие категории (посмотрите многообразие категорий на Яндекс.Маркете). В данный момент многие категории только ожидают появления специализированных тем дизайна.
У дизайнеров, которые разрабатывают и публикуют темы дизайна сейчас, есть преимущество перед теми, кто присоединится позже: возрастет конкуренция, а значит будет сложнее пробиться в топ магазина. Посмотрите опыт развития тем дизайна для WordPress, Joomla, Drupal и других систем. По сравнению с ними Webasyst находится в начале своего пути развития и сейчас только набирает темпы роста. Не упустите момент и шанс оказаться в числе первых дизайнеров!
Создавайте качественные темы дизайна — покупатели не заставят себя ждать!
Требования к темам дизайна
Темы дизайна разрабатываются на основе HTML / Smarty / JS / CSS. Посмотрите документацию:
В качестве примера рекомендуется посмотреть темы дизайна CUSTOM, Clear, Sidebar. Любую из этих тем дизайна удобно взять за основу при разработке своей темы дизайна.
Универсальные темы дизайна
Универсальная тема дизайна — это семейство тем дизайна (несколько тем дизайна), разработанных для разных приложений (Shop-Script 5, Блог, Фото и других), одна из которых объявлена родительской и содержит базовый CSS и общий макет, на основе которых строятся все темы семейства.
Создание универсальных тем дизайна — хороший способ получить доступ к максимально широкой аудитории пользователей Вебасиста. Сейчас основной интерес наших покупателей направлен на Shop-Script 5, поэтому большинство тем дизайна создаются именно для него. Другие приложения (Блог, Фото, Сайт) в данный момент менее популярны, но количество новых пользователей этих приложений также уверенно растет. Универсальные темы дизайна удобны для пользователей, так как позволяют купить единую тему дизайна и использовать ее впоследствии, каким бы образом не развивался сайт и какие бы новые разделы (блог, фотогалерея, форум и т.д.) не появлялись на сайте.
Для дизайнера это дополнительная аудитория покупателей. Например, если в рамках универсальной темы дизайна для Shop-Script 5 создать тему дизайна для приложения «Блог», дизайнер автоматически получает аудиторию покупателей, которые не покупали Shop-Script 5, а используют в Вебасисте только приложение «Блог». (В этой связи рекомендуется основной темой дизайна в семействе делать тему для приложения «Сайт», так как оно установлено в базовой установке фреймворка и будет у всех пользователей, в том числе которые не покупали Shop-Script 5 — в этом случае вы получаете максимальный охват аудитории.)
Локализация тем дизайна
В шаблонах дизайна используйте ключи локализации вместо явного текста на русском языке. Это позволит вам опубликовать вашу тему дизайна в магазине Webasyst для англоговорящей аудитории. Сейчас мы начинаем активную работу над продвижением Вебасиста вне рунета, и вы сможете автоматически получить доступ к покупателям со всего мира.
Посмотрите базовые темы дизайна (Дефолт, CUSTOM, Clear и другие) для примера использования ключей локализации.
Темы дизайна в магазине Webasyst
В данный момент все темы дизайна публикуются в разделе магазина по приложениям: www.webasyst.ru/store/themes/
Публиковать свои продукты может каждый разработчик и дизайнер. Регистрация бесплатная.
С увеличением количества тем дизайна мы будем вводить инструменты для удобного подбора тем дизайна. Помимо фильтра по приложениям (который поддерживается сейчас) будут введены фильтры по цветовым гаммам приложения и категориям сайтов, для которых предназначены темы. Скоро появится топ-чарты для тем дизайна.
О самых интересных и качественно выполненных темах дизайна мы будем рассказывать в блоге, добавлять их в демо-версию Вебасиста.
Не упустите шанс начать зарабатывать вместе с Webasyst и Shop-Script 5!
11 комментариев
Отлично!
Скоро мы тоже планируем загрузить тему(шаблон) на детскую тематику.
Бета версия дизайна https://www.dropbox.com/s/7g50de5ecbaewry/1jpg.jpg
Недавно была размещена новая тема, но ее быстро удалили из магазина. В чем была причина? Многообещающий был дизайн то.
Здравствуйте! Вопрос не в тему, НО почему служба поддержки не отвечает больше месяца (отправлял два запроса). Уважаемый Владимир Тупоршин-мл. почему техподдержка не отвечает? Мой e-mail alta_sever @ mail.ru
Посмотрите в Центре заказчика — возможно, вам уже давно ответили, но вы по какой-то причине не получили (или получили в папку о спамом) уведомления об ответах.
И уточните номера ваших запросов, на которые вам не ответили — проверим.
А какие нынче два самых популярных шаблона? Если не сикрет 🙂
купить просто проблемы есть
Добрый день
подскажите как загрузить тему дизайна на ваш сайта.
Необходимо зарегистрироваться как разработчик https://www.webasyst.ru/platform/store/.
Проверить что тема соответсвует всем требованиям и отправить её на проверку через Центр заказчика раздел Разработчик.
Webasyst — это CMS нового поколения, совмещающая в себе инструменты для управления сайтом и интернет-магазином с полезными приложениями для совместной работы с коллегами и взаимодействия с клиентами. Единый центр управления бизнесом через интернет.
Платформа
Магазин Webasyst
Помощь
Мы получаем и обрабатываем персональные данные посетителей сайта в соответствии с Политикой обработки персональных данных. Отправка персональных данных с помощью любой страницы сайта подразумевает согласие со всеми пунктами Политики.
Темы дизайна
Приложение «Сайт» предоставляет общий редактор шаблонов дизайна для разных приложений: «Сайт», «Блог», «Магазин» и других уже выпущенных и планируемых к выпуску приложений.
Файлы шаблонов
В Вебасисте предусмотрены два стандартных места для хранения шаблонов дизайна (тем оформления):
Встроенный редактор дизайна
Бекенд и фронтенд Вебасиста работают на основе шаблонизатора Smarty, поэтому в содержимом шаблонов можно использовать весь инструментарий Smarty. В нижнем правом углу редактора находится шпаргалка со списком конструкций и переменных, которые можно использовать в текущем шаблоне.
В зависимости от функционала каждое приложение на свое усмотрение предоставляет свой набор обязательных шаблонов дизайна. Например, в приложении «Сайт» являются обязательными только шаблоны index.html (общая разметка страницы), page.html (вывод содержимого одной страницы) и error.html (отображение сообщения об ошибке). В приложении «Блог» есть другие обязательные шаблоны: post.html (отображение одной записи), stream.html (отображение списка записей), comments.html (комментарии к записи). Разработчик каждого приложения самостоятельно определяет, из каких шаблонов должна состоять его тема оформления и какие из шаблонов являются обязательными.
С помощью встроенного редактора дизайна владелец сайта имеет возможность редактировать все шаблоны дизайна, может создавать свои шаблоны, подключать их к основным шаблонам с помощью директивы Smarty
Структура темы оформления
В файле-манифесте theme.xml должны быть перечислены основные настройки темы (название, версия) и файлы, изменение которых доступно в редакторе дизайна. Структурная схема XML размещена по адресу http://www.webasyst.com/wa-content/xml/wa-app-theme.dtd.
Webasyst — это CMS нового поколения, совмещающая в себе инструменты для управления сайтом и интернет-магазином с полезными приложениями для совместной работы с коллегами и взаимодействия с клиентами. Единый центр управления бизнесом через интернет.
Платформа
Магазин Webasyst
Помощь
Мы получаем и обрабатываем персональные данные посетителей сайта в соответствии с Политикой обработки персональных данных. Отправка персональных данных с помощью любой страницы сайта подразумевает согласие со всеми пунктами Политики.
Шаблоны
В качестве шаблонизатора по умолчанию фреймворк использует Smarty 3. Об использовании других движков шаблонов см. ниже.
Разработчик приложения технически не ограничен в возможностях дизайна и верстки интерфейса. Обязательным для соблюдения условием является только расположение и название файла шаблона. Подробнее об именовании файлов шаблонов см. в разделе «Правила и рекомендации по именованию».
Использование Smarty
Для упрощения разработки фреймворк предоставляет ряд переменных и хелперов, доступных в шаблоне.
Переменные
Локализация
Пример
Использование альтернативных шаблонизаторов
Используемый по умолчанию шаблонизатор Smarty 3 можно заменить на любой альтернативный движок шаблонов.
Для использования другого движка шаблонов необходимо реализовать и подключить (через конфигурационный файл) класс-адаптер, обеспечивающий взаимодействие фреймворка и шаблонизатора.
Подключение шаблонов на чистом PHP
В состав фреймворка включен адаптер для использования в качестве шаблонов обычных PHP-файлов.
Внимание: в настоящий момент этот адаптер реализован в упрощенном виде в демонстрационных целях и не предназначен для использования в проектах с высокой нагрузкой.
Для того чтобы в вашем приложение вместо Smarty использовались шаблоны на чистом PHP, достаточно создать конфигурационный файл wa-apps/
Если файл factories.php уже существует в приложении, в него необходимо добавить соответствующую строку.
Создание адаптера для подключения альтернативного шаблонизатора
Любое разрабатываемое приложение можно настроить на использование привычного разработчику шаблонизатора. Для этого необходимо в конфигурационном файле приложения wa-apps/
По умолчанию в качестве значения параметра view используется waSmarty3View (адаптер для Smarty 3).
В качестве класса адаптера можно определить свой класс (его необходимо наследовать от системного класса waView ), разместить его в файле с соответствующим именем (см. раздел «Правила и рекомендации по именованию») в любом месте внутри подкаталога lib/ приложения и реализовать в нём все необходимые функции.
Реализация адаптера для подключения шаблонизатора на примере класса waPHPView :
Webasyst — это CMS нового поколения, совмещающая в себе инструменты для управления сайтом и интернет-магазином с полезными приложениями для совместной работы с коллегами и взаимодействия с клиентами. Единый центр управления бизнесом через интернет.
Платформа
Магазин Webasyst
Помощь
Мы получаем и обрабатываем персональные данные посетителей сайта в соответствии с Политикой обработки персональных данных. Отправка персональных данных с помощью любой страницы сайта подразумевает согласие со всеми пунктами Политики.
Создание собственной темы дизайна для Shop-Script
В этой статье описаны основы создания собственной темы дизайна для общего понимания — без подробного описания процесса разработки. Удобнее всего начать создание собственной темы — скопировать исходный код существующей темы, например, «Дефолт 3.0», и доработать его так, как вам нужно.
Тема дизайна для Shop-Script должна содержать следующий набор основных шаблонов витрины:
Поскольку работа интернет-магазина предполагает оформление заказа со указанием адресных данных, выбора способа доставки и оплаты, тема дизайна также должна содержать шаблоны соответствующих страниц. Для упрощения разработки вашей собственной темы дизайна можно полностью скопировать следующие шаблоны страниц оформления заказа из темы «Дефолт» (впоследствии их можно модифицировать по своему усмотрению):
1. Формирование структуры темы дизайна
Новую тему дизайна необходимо создавать в виде папки с произвольным именем на вашем компьютере. В ходе создания темы в эту папку будут сохраняться отдельные HTML-шаблоны и другие необходимые файлы (CSS, JavaScript + обязательный файл-манифест theme.xml).
Тема дизайна витрины может формироваться отдельно — только для Shop-Script, либо в составе семейства тем оформления, имеющих сходные оформительские элементы и предназначенные для использования в нескольких разных приложениях Webasyst с целью создания общего внешнего вида для разных фронтендов в пределах одного сайта. Подробнее о разработке семейств тем дизайна читайте в статье «Родительские темы дизайна».
2. Содержание основных шаблонов
index.html
Внутри элемента обычно подключаются CSS-стили и JavaScript-файлы.
Внутри элемента могут формироваться основное навигационное меню (например, с помощью метода <$wa->apps()>, как это сделано в теме дизайна «Дефолт»), боковые панели, нижняя панель («футер») и тому подобные структурные блоки страницы, общие для всех страниц витрины.
Важно: для отображения динамически формируемой информации на витрине (в центральной части страницы) необходимо добавить в шаблон index.html переменную <$content>. В случае отсутствия этой переменной все страницы витрины окажутся одинаковыми, т. к. на них не будет отображаться динамически формируемое содержимое: списки товаров на главной странице, информация о конкретном товаре, списки товаров в категориях и т. п.
home.html
К шаблону home.html, предназначенному для отображения основной (обычно центральной) части главной страницы специальные требования не предъявляются — он может содержать списки товаров, ссылки на отдельные категории товаров, разнообразные рекламные тексты, видео-ролики и другие подобные материалы.
category.html
Свойства категории
Шаблон category.html предназначен для отображения содержимого категории товаров.
Описание, наименование, список подкатегорий, META-теги, URL страницы, количество товаров и другие свойства категории содержатся в переменной <$category>в виде элементов ассоциативного массива. Это значит, что для отображения, например, наименования категории необходимо добавить в шаблон category.html переменную <$category.name|escape>(модификатор |escape необходим для правильного отображения на витрине различных специальных символов, которые могут содержаться в названиях категорий, например, часто встречающегося символа «&»).
Списки товаров
Совет: код для отображения списка товаров, используемый в шаблоне category.html, может быть использован и на других страница витрины, например, на странице с результатами поиска, поэтому удобно вынести этот код в отдельный шаблон, назвав его, например, product-list.html. Подключить такой дополнительный шаблон в шаблоне category.html можно с помощью Smarty-функции
:
В теме дизайна «Дефолт» для этой же цели используются 2 разных шаблона: list-table.html и list-thumbs.html — для формирования списков товаров с разным оформлением в разных местах витрины.
Фильтры
product.html
Шаблон product.html используется для формирования основного содержимого страницы товара. Обычно на этой странице отображаются наименование, описание, характеристики товара и кнопка «В корзину».
Информация о товаре содержится в виде экземпляра класса shopProduct в переменной <$product>.
Исходный код класса shopProduct находится в файле wa-apps/shop/lib/classes/shopProduct.class.php.
Например, по аналогии с категориями, наименование товара можно отобразить на витрине с помощью конструкции <$product.name|escape>.
О том, как разместить изображения товара в шаблоне витрины, читайте в статье «Эскизы изображений».
Помимо отображения информации о товаре, важной функцией страницы товара является возможность добавить товар в корзину, чтобы затем перейти к оформлению заказа. Форма добавления товара в корзину может быть создана в виде тега
Webasyst — это CMS нового поколения, совмещающая в себе инструменты для управления сайтом и интернет-магазином с полезными приложениями для совместной работы с коллегами и взаимодействия с клиентами. Единый центр управления бизнесом через интернет.
Платформа
Магазин Webasyst
Помощь
Мы получаем и обрабатываем персональные данные посетителей сайта в соответствии с Политикой обработки персональных данных. Отправка персональных данных с помощью любой страницы сайта подразумевает согласие со всеми пунктами Политики.
Как изменить дизайн сайта
Чтобы изменить дизайн сайта, нужно выбрать другую тему дизайна или изменить существующую тему. Тема дизайна — это набор HTML-, CSS- и других файлов, формирующих внешний вид сайта.
Способ 1. Выбрать другую тему дизайна
Выбрать другую тему дизайна можно в настройках правил маршрутизации в разделе «Структура» приложения «Сайт». Правила маршрутизации соответствуют разным разделам сайта, которые работают при помощи разных приложений Вебасиста.
Многие темы дизайна поддерживают сразу несколько приложений, поэтому для разделов разных приложений можно выбрать темы дизайна с одинаковыми названиями. Такие темы дизайна с одинаковыми названиями выглядят похожим образом и называются семействами.
Способ 2. Изменить существующую тему дизайна
Тему дизайна можно изменять самостоятельно: с помощью настроек или редактируя исходный код файлов.
Настройки темы дизайна доступны в секции «Оформление». У каждой темы дизайна свой набор настроек, с их помощью можно редактировать надписи на главной странице, изменять цветовую гамму, выбрать другой тип главного меню, включить или отключить автоматическую загрузку длинных списков и т. д.
Если доступных настроек недостаточно, вносите изменения в исходный код файлов темы (HTML и CSS) в секции «Шаблоны».
Будьте внимательны при при изменении исходного кода файлов, чтобы случайно не испортить работу вашего сайта. Изменения лучше предварительно проверять на копии сайта, установленной на другом веб-сервере или на вашем компьютере.
16 комментариев
Если в программировании и HTML нет понимания совсем! можно ли самому создать сайт по своим хотелкам? думал это конструктор для всех, но для большинства изменений нужно менять коды.. а без этого никак?
Это зависит от сложности ваших хотелок относительно устройства Вебасиста. Какие-то хотелки можно реализовать без знания HTML, другие нельзя. Нужно рассматривать конкретные хотелки. Конструкторов «для всех» не бывает. В любом конструкторе есть свой порог вхождения — где-то он выше, где-то ниже. Высота этого порога связана и с тем, какие хотелки можно реализовать относительно просто.
Доброго дня! Хотим приобрести Вебасист. Интересует пару моментов: как вообще удалить картинки с сайта (чтобы даже картинки по умолчанию не отображались), удалить кнопку «купить» и поставить оповещение о наличии товара на страницу с товарами. За ранее спасибо.
Всё это индивидуально для каждой темы дизайна. Поэтому выясняйте, пожалуйста, подробности перед покупкой темы дизайна у его разработчика.
Необходимо сделать 2 шаблона для карточки товара, как это сделать
На сайте уже есть много товаров, и они выводятся по обычному шаблону
Эта задача сильно индивидуальна для каждой темы дизайна. Чтобы получить квалифицированную помощь, предлагаю вам обратиться к партнёрам Webasyst. Или задайте вопрос в в общем хабе поддержки, чтобы получить помощь от большего числа пользователей Webasyst.
Как внести изменения в дизайн сайта если в шаблоне нет файла css?
Редактируйте те файлы, которые есть в теме дизайна. Если нужно, создавайте новые файлы с помощью редактора дизайна и сохраняйте в них ваш CSS-код, чтобы не мешать его вместе с кодом HTML и Smarty.
Возможно, в вашей теме дизайна есть CSS-файл, но его не видно в списке файлов в левой колонке. Так бывает, если разработчик темы дизайна забыл добавить имя такого файла в XML-манифест темы — файл theme.xml. Если вы знаете имя «невидимого» CSS-файла, то откройте любой видимый файл и в адресной строке браузера замените его имя на имя нужного вам CSS-файла. Если файл с таким именем есть в папке темы, от он откроется и будет доступен для редактирования.
Добрый день. Можете ли подсказать каким образом можно добавить телефон и время работы в шапку сайта в теме Дефолт? Вроде бы объем работы должен быть небольшим, чтобы нанимать специалиста по програмированию. Можете ли дать какой-то участок кода, который нужно только вставить в шаблон для корректного отображения данной информации? В общем это важный фактор для повышения конверсии, а почему-то разработчики темы Дефолт этого до сих пор не сделали.