Интернет-магазин оптики
О проекте
ОКО — интернет-магазин сети салонов оптики, который, кроме широкого ассортимента товаров, предлагает диагностику зрения и изготовление очков. Изначально клиент обратился к нам за комплексным интернет-маркетингом, неотъемлемым условием которого является хорошо подготовленная площадка. Но за 30 лет существования старый сайт компании изжил себя и остро нуждался в обновлении не только в целях продвижения, но также в целях обновления дизайна и безопасности.
Задача: ожидание и реальность
Первоначальной задачей было полное обновление сайта, а именно версий WordPress и PHP, а также темы и плагинов. Также клиент хотел повысить скорость сайта и реализовать возможность задавать в карточке товара чёткие параметры, что крайне важно при выборе контактных и оптических линз.
На деле мы столкнулись с устаревшей темой WordPress, которая давно не поддерживалась разработчиками. И если плагины можно было спокойно обновить, то сама тема обновлению не подлежала. При первых попытках обновить сайт мы обнаружили много устаревшего кода и функции, не работающие в новой версии языков программирования PHP, JavaScript и Jq.
Таким образом, трудозатраты на исправление ошибок были сопоставимы с созданием нового интернет-магазина, но даже это не гарантировало его нормальную работу. В итоге перед нами стала новая задача — разработать интернет-магазин оптики на WordPress / Woocommerce с нуля.
Навигация интернет-магазина
Главная страница
Главная страница является привычной сокращённой версией всего сайта. Первый экран состоит из логотипа, меню, категорий товаров, навигации поиска, СТА-кнопки и корзины. Для клиентов интернет-магазина есть личный кабинет. Слайдер с баннерами знакомит посетителей сайта с актуальными акциями и выгодными предложениями.
Поскроллив ниже, мы увидим блоки с основными и популярными категориями товаров, которые в свою очередь делятся на подкатегории «Горячие предложения», «Лидеры продаж» и «Акционные товары». Следующий блок посвящён отдельной группе товаров — оправам:
Если пользователь не успел «свернуть» в каталог и долистал страницу до этого места, значит самое время воззвать к доверию пользователей и рассказать о преимуществах интернет-магазина:
Следующий блок приглашает посетителей ознакомиться с ассортиментом солнцезащитных очков. Далее главную страницу дополняет «Блог» с полезными статьями и блок с Instagram-публикациями. А завершающим аккордом страницы становится футер с главной кнопкой, основными услугами, последними новостями и контактами компании:
Каждый раздел каталога оснащён дополнительными фильтрами в зависимости от типа товара. Так, контактные линзы можно сортировать по «Аддидации», «Сроку использования», «Цилиндру» и «Сфере». Линзы для очков можно выбрать по параметрам «Цилиндр», «Сфера», «Покрытие», «Диаметр» и «Тип линзы», а быстро найти нужную оправу поможет сортировка товаров по «Материалу» и «Типу»:
Карточка товара с функцией подбора и комбинации характеристик
Одна из самых важных страниц сайта выглядит аккуратно и при этом содержательно. Благодаря удобной функции подбора покупатель может задать чёткие параметры линз для правого и левого глаза и быстро оформить заказ:
Помимо описания продукта в карточке товара также реализована возможность поделиться ссылкой на товар в социальной сети Facebook.
Карточку также дополняет блок «Похожие товары», который не только повышает вероятность покупки, но и позицию страницы в поиске:
Оптический блог
Ещё один прекрасный инструмент для SEO-продвижения, ведь полезные и содержательные статьи повышают посещаемость сайта, а значит, и его видимость в поисковой выдаче. Кроме того, блог повышает уровень компетентности компании, помогает пользователям найти ответы на вопросы и способен превратить обычных посетителей сайта в покупатели:
Несмотря на готовое решение от WordPress, мы персонализировали сайт под запросы клиента. Кроме запуска интернет-магазина и настройки поставляемых из коробки функций мы дополнительно установили несколько плагинов:
- WR All Export Pro — для массового экспорта данных из программы 1С.
- All Import — для импорта из предоставленной базы данных 1С.
- Yoast SEO — для поисковой оптимизации сайта.
- Платёжный шлюз для LiqPay для Woocommerce — для оплаты товаров через сервис LiqPay.
- Contact Form 7 — для управления контактными формами.
- Markup by Attribute for WooCommerce — для корректировки цен на сайте.
- Facebook for WooCommerce — для синхронизации сайта со страницей Facebook.
- JetElements Plugin for Elementor — для реализации интерактивной Google-карты.
Админка сайта
Выбирая разработку сайта на WordPress, клиент получает простую и удобную в использовании админ-панель. С такой админкой даже самым сложным интернет-магазином управлять будет несложно. Благодаря интуитивно понятному интерфейсу администраторы и контент-менеджеры смогут легко и быстро редактировать описания услуг и характеристики товаров, корректировать цены и добавлять фотографии на сайт:
Комбинирование линз по параметрам
Для посетителей сайта оптики с дефектами зрения очень важна функция выбора контактных линз с разными параметрами для каждого глаза.
В карточках каталога «Контактные линзы» мы реализовали возможность выбрать сразу два изделия, задав параметры сферы и базовой кривизны для левого и правого глаза.
С категорией товаров «Торические линзы» всё немного сложнее: отдельно заданные свойства для каждого глаза насчитывали более 5 тыс. комбинаций, что в сумме выходило 10 тыс. комбинаций на одну карточку. Это сказывалось на загрузке страницы, скорость которой достигала целых 15 секунд. В итоге было принято решение отказаться от комбинирования торических линз по параметрам. Взамен этого мы затеяли задачу на перспективу — разработать собственный плагин для WooCommerce, призванный решать подобные задачи без ущерба для производительности сайта.
Мультиязычность
До встречи с Webnauts сайт «ОКО» функционировал на русском языке. И поскольку 16 июля 2022 года закон о государственном языке коснулся всех интернет-ресурсов, для нашего клиента было важно реализовать сайт на двух языках. Новый закон подразумевает, что все сайты, представляющие украинский бизнес, должны обязательно иметь украинскую версию и загружаться по умолчанию для всех пользователей Украины.
Сказано — сделано: мы осуществили автоматический перевод сайта с помощью плагина GTranslate, и теперь стартовая страница загружается на государственном языке.
Скорость загрузки
Это не только важное требование клиента, но и необходимое условие для нормальной работы любого интернет-магазина, ведь современные пользователи не готовы терпеть загрузку страницы более 4 секунд. Несмотря на то, что тема интернет-магазина и так заточена на производительность, мы дополнительно оптимизировали скорость сайта путём отключения ненужных функций из коробки WoodMart.
Написание статей для блога
Любому сайту нужна оптимизация, а новому — тем паче. Одним из эффективных способов постепенно повысить трафик — это наполнить сайт контентом, отвечающим всем требованиям SEO: полезность, грамотность, уникальность, умеренное использование вхождений и ключевых слов. Именно такие статьи мы подготовили для блога сети магазинов оптики «ОКО». Несмотря на то, что блог носит информационный характер, каждая статья акцентирует внимание на продукции интернет-магазина и помогает конвертировать посетителей в клиенты.
Понравившейся статьёй можно легко поделиться на Facеbook, — такая функция ещё лучше способствует росту посещаемости сайта:
Результат
Соответствовать времени значит соответствовать технологиям. В этом кейсе мы столкнулись с проблемой, когда обновление сайта на WordPress совсем неоправданно и соизмеримо с разработкой нового продукта. В итоге мы создали современный и быстрый интернет-магазин сети оптик с WooCommerce, наполнили его страницы качественным контентом и оснастили товарные карточки удобной функцией подбора и комбинирования параметров.
Комментарии