Новая версия Адаптивного сайта производственной фирмы (АСПФ 3.0.)
21 мая 2021
Автор: Компания «Цитрус»
Добрый день! Объявление от Цитрус. Мы выпустили новое решение - АСПФ 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 клик.
Наши работы - начните пополнять ваше портфолио фотографиями и описанием, чтобы рассказать о своих компетенциях, утвердить покупателей в выборе компании на основе выполненных работ. Перелинковка позволит в карточке работы указать использованную продукцию и виды работ из каталога сайта.
АСПФ 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 клик.
Наши работы - начните пополнять ваше портфолио фотографиями и описанием, чтобы рассказать о своих компетенциях, утвердить покупателей в выборе компании на основе выполненных работ. Перелинковка позволит в карточке работы указать использованную продукцию и виды работ из каталога сайта.
Статья полезна для
