Новая версия Адаптивного сайта производственной фирмы (АСПФ 3.0.)

Добрый день! Объявление от Цитрус. Мы выпустили новое решение - АСПФ 3.0, в статье расскажем об используемых технологиях и инструментах при создании решения.



АСПФ 3.0 - это готовое решение для производственных компаний с акцентом на товары, услуги и специальные предложения. Это новый переосмысленный дизайн. Сайт отлично отображается на всех устройствах - широкоформатных экранах и мобильных.

При сборке решения использовались следующие технологии:

— Фреймворк Tailwind CSS (и вместе с ним Utility-first подход)
— Элементы БЭМ
— SASS и PostCSS
— Autoprefixer
— Битриксовые расширения CoreJS 2.0

Из инструментов:

— Gulp для сборки стилей шаблона (есть небольшая инструкция и все конфиги для сборки: можно кастомизировать шаблон и проводить сборку измененного шаблона)
— PurgeCSS в составе tailwind для сокращения размера собранных файлов
— @bitrix/cli для транспиляции ES6+ в js шаблонов и экстеншенов модуля




Почему Tailwind CSS?
При выборе фреймворка мы опирались на  результаты опроса разработчиков по поводу используемых технологий, интереса, удовлетворенности использования и узнаваемости. С результатами опроса вы можете ознакомиться в источнике: stateofcss.com


Для АСПФ 3.0., как и других наших решений подготовлена полноценная инструкция, в которой вы найдете всю необходимую информацию для работы с сайтом.


А теперь подробнее о сайте и его разделах.


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


Раздел компания  - визитная карточка организации - история и подход к работе, отзывы и сертификаты, список партнеров и предложение для сотрудничества. Коммуникации с клиентами через форму вопрос-ответ.
Планируйте акции компании, запускайте их в соответствующем разделе компании и транслируйте акции клиентам в каталог продукции и карточки услуг при заказе товара.
 
Каталог продукции с умным фильтром - простая навигация по каталогу, с возможностью поиска товара по характеристикам. Три вида представления каталога:

• карточки товаров
• список товаров
• табличная форма
  

Настраивайте представление каталога товара в зависимости от типа продукции и продавайте больше, делая акцент на самом важном - изображении, кратком описании или представленном ассортименте.

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

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

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

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