ProlektSiteBuilder

Описание

Наше дополнение по сборке сайтов, собрало в себе все самые популярные паттерны интерфейса. Мы сверстали их на bootstrap и подключили базовые элементы с использованием fenom. Перед стартом разработки, практически любого проекта, вы можете собрать элементы, которые используются в вашем дизайне и собрать из них заготовку. Заготовка — это сайт-прототип, у которого настроена структура и сделана верстка без UI, вам останется только доделать верстку по вашему дизайн-макету и настроить контент.



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

Сборка

1. Регистрируемся на https://prolekt.ru/, устанавливаем компонент на чистый сайт, в системной настройке mxsb_api_license прописываем лицензию из Prolekt.
   
2. Начало сборки.
   
   1. Указываем название нашей сборки, выбираем тип сайта, на данный момент: визитка, корпоративный, лендинг, интернет-магазин.
   2. Если выбран тип сайта “интернет-магазин” выбираем ещё макет карточки товара.
   3. Сохраняем
В зависимости от выбранного типа сайта, появляется базовая структура шаблона
3. Настройка базового шаблона.
   
   1. Слева в дереве выбираем шаблон Base. Это базовый шаблон, от которого будут наследоваться все остальные шаблоны, в нем мы выбираем шапки, подвал, и модальные окна (пока одно).
   2. В блоке хедер по нажатию на “выбрать чанк” мы выбираем шапки, в зависимости от необходимого результата, указываем top-header, center-header, bottom-header (Потом появится ещё mobile-header и mobile-menu).
   3. В блоке footer выбираем вайрфреймы footer и modals.
4. Дальше настраиваем существующие или добавляем новые шаблоны.
   
   1. Выбираем нужный чанк: дабл клик или пкм -> “выбрать чанк”.
      
      1. Появляется окно с настройками.
         
         1. Новая категория для доп. полей — здесь мы можем выбрать в какой категории буду TV-поля для удобного заполнения. Можно указать свою категорию, или оставить по умолчанию (название чанка). Нужно, например, если несколько одинаковых блоков на странице и для понимания к чему относится это TV-поле.
            
         2. Копировать TV-поля — Если блок дублируется на странице то, чтобы можно было указывать разную информацию, нужно отметить эту галочку.
         3. Название категории и папки для чанка — если хотим чтобы в структуре чанков, чанк попал в определенную папку. Иначе, по умолчанию, чанк попадет в папку с названием шаблона.
            
         4. Название чанка — если нужно изменить название для чанка.
5. Нажимаем “скачать” для установки на другом modx или установить для установки на текущий сайт.
   

Шаблоны

• Base — базовый шаблон, от которого наследуются остальные, в котором прописываются шапки и футер.
• Главная — шаблон для главной страницы.
• О компании — шаблон для страниц о компании. Создает ресурс “О компании”, с этим шаблоном.
• Статья — шаблон конкретной статьи или новости, должна быть дочерней шаблона статьи. Создает несколько демо-статей с этим шаблоном.
• Статьи - шаблон категории статей или новостей, создает ресурс “Статьи”.
• Корзина — шаблон для страницы корзины, создает страницу “Корзина”.
• Каталог — шаблон каталога товаров для интернет-магазина. Создает страницу основного каталога.
• Категория товара — шаблон категорий товара для интернет-магазина. Создает страницу категории товаров.
• Контакты — шаблон для страницы контактов. Создает страницу “Контакты”.
• Доставка и оплата — шаблон под страницы доставки и оплаты. Создает страницу “Доставка и оплата”.
• Пустой шаблон — шаблон под системные ресурсы xml карты сайта и robots.txt, создает эти ресурсы.
• Ошибка 404 — шаблон под страницу 404, создает страницу 404.
• Вопрос-ответ — шаблон под страницу Faq, создает ресурс “Вопрос-ответ”.
• Оформление заказа — шаблон под страницу оформления заказа для интернет-магазина, создает ресурс.
• Политика-конфиденциальности — шаблон под “Политика-конфиденциальности”, создает ресурс под эту страницу.
• Категория/Товар — шаблон страницы товара, создает несколько демо-товаров. Шаблон должен быть дочерним у категории
• Отзывы — шаблон отзывов, создает страницу “Отзывы”.
• Акция - шаблон конкретной акции, должна быть дочерней шаблона “Акции”.
  Создает несколько демо-акций с этим шаблоном.
• Акции - шаблон списка акций, создает ресурс “Акции”.
• Услуга — шаблон конкретной акции, должна быть дочерней шаблона “Услуги”. Создает несколько демо-услуг с этим шаблоном.
• Список услуг — шаблон списка услуг, создает ресурс “Услуги”.
• Текстовая — шаблон обычной текстовой страницы, создает ресурс текстовой страницы.

Чанки

• advantages-lists — используется для описания преимуществ вашей компании или товара для вывода на различных страницах.
• article — блоки вывода превью статей для вывода на различных страницах.
• bottom-header — нижний элемент шапки. Используется для обеспечения удобной навигации по сайту.
• call-to-action — секции призыва к действию для вывода на различных страницах.
• cart — секции для корзины или для страницы оформления заказа.
• catalog-type — секции для вывода товаров в категориях, использует компонент mSearch2, который нужно будет установить отдельно.
• category — секции для вывода товаров на различных страницах
• center-header — центральный элемент шапки. Вывод основных элементов шапки: лого, поиск, кнопки звонка, избранного, корзины etc.
• comment — секции вывода комментариев для вывода на различных страницах.
• contact — секции вывода контактной информации для вывода на различных страницах или на странице контактов.
• content — секция для размещения разнообразного информационного контента: текстов, картинок, таблиц и прайс-листов для вывода на различных страницах.
• cover — данная секция является первым баннером на странице и предназначена для размещения наиболее важной информации. Здесь можно использовать текстовые блоки, графические элементы, а также разместить кнопку для перехода в нужный раздел. Кроме того, этот блок может содержать список категорий товаров, товары дня, форму заявки или галерею. Обычно находится в начале страницы, сразу после шапки сайта. Он может использоваться на главной странице, в категориях, на страницах товаров, в статьях, новостях и т.д.
• error — для страниц 404.
• faq — для размещения блоков “вопрос-ответ” на различных страницах или для шаблона faq.
• footer — для подвалов.
• gallery — для вывода различных слайдеров на различных страницах.
• landing-header — шапки для лендингов.
• logos — для вывода логотипов компаний, например партнеров или клиентов.
• modals — для создания всплывающих форм.
• product-page — для страниц товаров.
• product-page-element — для страниц товаров доп. элементы.
• product-promo — для вывода секций с товарами на различных страницах.
• slide — это как cover только нет
• stock — для вывода различных акций на разных страницах.
• tariff — для вывода различных тарифов и прайсов на разных страницах.
• team — для вывода секции с командой на разных страницах.
• title — выбор основного заголовка и хлебных крошек для страниц.
• top-header — верхние уровни шапки.
• video — вывод вашего видео на разных страницах.

Результат

Установка рекомендуется на голый modx. После установки сборки:

1. Переименовать htaccess.
2. Нужно зайти в системные настройки, выбрать раздел sitelayout и заполнить базовые системные настройки шаблона.
   Настройки начинающиеся на “content”, в системной настройке нужно указать соответствующий id нужной страницы. Например,
   
   • content_politic_page указываем id страницы политики, после указания в подвале (если предусмотрено) и в формах появится ссылка на политику
   • content_reviews_page указываем id основной страницы отзывов.
   Настройки начинающиеся на show в системной настройке нужно указать 1 для включения функций в карточках товаров:
   
   • show_product_comments — показывать комментарии в карточке.
   • show_product_comparsion — сравнение.
   • show_product_favorite — избранное.
   • show_product_options — опции.
3. Зайти в пакеты — client-config.
   Тут множество настроек в зависимости от типа сайта и выбранных вайрфреймов: пункты меню, карты, копирайт, почта, время работы, соцсети, и т.д.
   
4. При необходимости убрать html из страниц нужно зайти в содержимое — типы содержимого и в HTML поставить /
   
5. Зайти/создать ресурсы прописать необходимые alias и заполнить контент и TV-поля.
   
6. Настройка стилей — стили генерируются из scss файлов assets/template/site/sass с помощью компонента SASS. Собираются при каждом открытии страницы, когда авторизован в админке. Отключается в компоненте SASS.