Сайт-каталог производителя систем безопасности
О проекте и задаче
Украинский производитель систем контроля и управления доступом Trinix обратился к нам с задачей разработать корпоративный сайт-каталог, который впоследствии должен был вырасти до интернет-магазина. Мы получили готовый дизайн и предложили беспроигрышное решение — WordPress + WooCommerce. Этот технологический тандем удачно совмещает контент и коммерцию, в чем мы не раз убедились на собственном опыте. Как мы справились в этот раз, читайте в нашем кейсе.
Вёрстка
В реализации проекта наш фронтенд-разработчик использовал язык:
- гипертекстовой разметки HTML 5, чтобы сформировать каркас сайта;
- CSS, чтобы оформить стили страниц по дизайну макета;
- JavaScript, чтобы «оживить» страницы при любом взаимодействии с пользователем.
Из дополнительных JavaScript-инструментов была применена библиотека scroll-lock, блокирующая скроллинг страниц при открывании любых модальных окон на сайте. Эта библиотека, в отличие от аналогичной библиотеки overflow:hidden, дружит с мобильным браузером Safari на iOS-устройствах iPhone.
Кроме того, в разработке был применен SCSS — синтаксис препроцессора Sass, ускоряющий написание кода на CSS.
Вообще использование технологий, упрощающих жизнь разработчиков, всегда означает экономию времени на проект, а значит — и бюджета клиента.
Поэтому не преминём также упомянуть о Gulp — сборщике веб-проектов, который ускорил разработку на JavaScript благодаря автоматизации рутинных процессов.
Кроссбраузерность
Отображение сайта во всех, даже устаревших браузерах — особенно важное свойство любого интернет-магазина. Для того, чтобы сайт был доступен для пользователей, мы модернизировали JavaScript с помощью транскомпилятора Babel.js, который превращает новый синтаксис в старый стандарт ECMAScript 2015+.
Программинг
WooCommerce
Корпоративный сайт Trinix вскоре планирует перейти в разряд интернет-магазинов, поэтому мы сразу заложили в админку WordPress самый популярный в мире коммерческий плагин WooCommerce. Так что каталог на сайте, который пока несет информативный характер, сможет продавать и масштабироваться, когда клиент этого пожелает.
Итак, перейдем ближе к функциям. Фильтрация товаров на сайте возможна по свойствам в зависимости от их категории (типа, размера, питания устройства и т. п.):
Также мы оснастили сайт удобным поиском. Так, если в соответствующее поле ввести хотя бы 3 символа, сайт предлагает первые возможные результаты:
Карточка товара
Табы «Характеристики», «Описание», «Инструкции» и «Видео» отображаются на сайте при условии заполнения этих блоков контентом.
Мы реализовали возможность автоматического выведения характеристик товара как в превью на странице категории, так и на странице товара справа от фото (и это без необходимости ручного дублирования характеристик в админке):
При заполнении цены товара в админке она автоматически отображается на сайте. Если же цена не указана, то клик на текст «Цену уточняйте» вызывает поп-ап «Задать вопрос»:
Также мы реализовали функцию загрузки инструкций к товару в одноименном табе:
Двусторонняя синхронизация, реализованная разработчиками, позволяет выводить на карточку не только файлы-инструкции, но и статьи «Блога», соответствующие этому товару:
Таб «Видео» содержит ролик из YouTube, встроенный на сайт с помощью iframe:
Интеграция с 1С
С помощью плагина WooCommerce — 1C — Data Exchange мы синхронизировали каталог на сайте с программой 1С. Этот инструмент обеспечивает быстрый обмен данными между бухгалтерской платформой и сайтом, например, выгрузка заказов, загрузка и обновление товаров и цен и т. п.
Дополнительные плагины
Как мы уже отмечали, в основе сайта лежит Woocommerce, однако им функциональность интернет-магазина не ограничивается. Бекенд-разработчики внедрили многие другие плагины, в частности:
- ACF (Advanced Custom Fields) — для добавления полей ввода в административную панель WordPress;
- CF7 (Contact Form 7) — для создания контактных форм;
- Premmerce Product Filter for WooCommerce — для фильтрации товаров;
- WPC Smart Compare for WooCommerce (Premium) — для сравнения товаров;
- Elementor — для размещения и оформления статей;
- Yoast — для SEO-оптимизации сайта.
Для защиты сайта от спама была подключена технология reCaptcha 3 через интеграцию с плагином CF7. Кроме того, разработчики позаботились о возможности добавлять на Google-карту метки с описанием на странице «Контакты».
Фишки интернет-магазина
Небанальное сравнение товаров
Мы реализовали нестандартную для WordPress и WooCommerce функцию сравнения товаров. Эта удобная фича помогает пользователям, которые рассматривают сразу несколько товаров разных категорий (например, аккумуляторы, кабели и охранные приборы). Благодаря горизонтальному фильтру их можно отсортировать в один клик и сравнить между собой в рамках отдельной категории:
Добавить товар в «Сравнение» можно с карточки товара, с категории товара и со слайдеров выведения товаров. При добавлении товара иконка становится активной как в карточке, так и в хедере сайта без перезагрузки страницы.
Блог с нестандартными фильтрами
Блог всё еще остаётся самым действенным инструментом для SEO-продвижения интернет-магазина, ведь чем выше посещаемость сайта, тем больше вероятность получить заказ.
С точки зрения разработки блог сайта Trinix несколько нестандартен как для платформы WordPress. Он имеет более развитый фильтр по сравнению со стандартным фильтром WooCommerce, что позволяет быстро отсортировать статьи по рубрикам в реальном времени:
Кроме того, статьи «Блога» можно легко распространять в соцсетях и мессенджерах:
Читайте также:
Сайт квест-комнат на WordPress с бронированиемРезультаты
Команда Webnauts в который раз выдала успешный интернет-магазин на WordPress: «натянула» готовый дизайн на движок, интегрировала программу 1С и позаботилась о корректном отображении сайта даже в устаревших браузерах. Более того: вышла за рамки платформы и реализовала несколько фишек, несвойственных WooCommerce, а именно функцию сравнения товаров по категориям и удобный фильтр статей «Блога» по рубрикам.
Комментарии