Услуги

  • Сайты
  • Контент
  • Продвижение
  • Битрикс24
  • Приложения
Все услуги Оплата
Битрикс24
Все услуги Оплата

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Сайт-каталог производителя систем безопасности

О проекте и задаче

Украинский производитель систем контроля и управления доступом Trinix обратился к нам с задачей разработать корпоративный сайт-каталог, который впоследствии должен был вырасти до интернет-магазина. Мы получили готовый дизайн и предложили беспроигрышное решение — WordPress + WooCommerce. Этот технологический тандем удачно совмещает контент и коммерцию, в чем мы не раз убедились на собственном опыте. Как мы справились в этот раз, читайте в нашем кейсе.

Banner

Вёрстка

В реализации проекта наш фронтенд-разработчик использовал язык:

  • гипертекстовой разметки 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 символа, сайт предлагает первые возможные результаты:

Banner

Карточка товара

Табы «Характеристики», «Описание», «Инструкции» и «Видео» отображаются на сайте при условии заполнения этих блоков контентом.

Мы реализовали возможность автоматического выведения характеристик товара как в превью на странице категории, так и на странице товара справа от фото (и это без необходимости ручного дублирования характеристик в админке):

01

/ 02

При заполнении цены товара в админке она автоматически отображается на сайте. Если же цена не указана, то клик на текст «Цену уточняйте» вызывает поп-ап «Задать вопрос»:

Также мы реализовали функцию загрузки инструкций к товару в одноименном табе:

Двусторонняя синхронизация, реализованная разработчиками, позволяет выводить на карточку не только файлы-инструкции, но и статьи «Блога», соответствующие этому товару:

Таб «Видео» содержит ролик из 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, что позволяет быстро отсортировать статьи по рубрикам в реальном времени:

Кроме того, статьи «Блога» можно легко распространять в соцсетях и мессенджерах:

Результаты

Команда Webnauts в который раз выдала успешный интернет-магазин на WordPress: «натянула» готовый дизайн на движок, интегрировала программу 1С и позаботилась о корректном отображении сайта даже в устаревших браузерах. Более того: вышла за рамки платформы и реализовала несколько фишек, несвойственных WooCommerce, а именно функцию сравнения товаров по категориям и удобный фильтр статей «Блога» по рубрикам.

Комментарии

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Нужен интернет-магазин на WordPress или любой другой платформе?

Более опытной команды не найти! Расскажите о своей бизнес-идее и начнем реализовывать её уже сегодня.

Над проектом работали

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x