Baza Drov – постачальник деревини та вугілля

Перейти на сайт

Дистриб'ютор твердопаливних матеріалів

Зображення сайту Baza Drov Зображення сайту Baza Drov

01 Клієнт

Baza Drov – компанія, яка пропонує для своїх клієнтів тверде паливо за найкращими цінами на ринку України

02 Цілі та задачі

Зробити редизайн сайту, виходячи з аналізів по існуючому сайті та зібраного СЯ під SEO-просування сайту

  1. Сайт повинен бути у білому, чорному та коричневому кольорі
  2. Новий сайт, повинен зберегти існуючий трафік
  3. Подбати про те, щоб позиції сайту не втратились
  4. Реалізувати фільтрування продукції за призначенням та ціною.
  5. Створити калькулятор для розрахунку вартості доставки
  6. На сайті повинна бути змога обирати мову(українська та російська)
  7. При запуску сайту, одразу повинна бути реалізована внутрішня SEO оптимізацію
  8. Реалізувати змогу покупки товарів через кошик
  9. У корзині, має бути змога обрати варіант доставки(самостійний вивіз, або нашим транспортом), а також оплати(готівка, оплата на картку)
  10. Подбати про зручне наповнення сайту інформацією та інших моментів з точки зору адміністрування

03 Рішення

Створили ми даний інтернет магазин за допомогою інструменту miniShop2, який є у CMS MODx. Під час розробки звертались до сторонніх API сервісів, для закриття певних поставлених задач.  

Дизайн сайту

Перед початком роботи над дизайном сайту, ми ознайомились з його структурою та з ТЗ, яке отримали з відділу маркетингу. Після чого переглянули усі побажання клієнта та приступили до створення дизайну сайту

Кійко Таня
Кійко Таня

Senior Web Designer | Ui/Ux

Кольори

Шрифти

Open Sans Medium
Open Sans Regular
Oswald Medium
Oswald Regular

Іконки для способів доставки

Іконка доставки
Іконка доставки морем
Іконка самовивізу
Фото деяких секцій
Фото сайту Baza Drov - 1
Фото сайту Baza Drov - 2
Фото сайту Baza Drov - 3
Фото сайту Baza Drov - 4
Сторінка продукту

Мабуть, найбільша увагу у роботі з цим сайтом приділялось сторінці одного продукту та каталогу продуктів. Вигляд цих сторінок зображено на фото нижче

Фото сайту Baza Drov - 1
Фото сайту Baza Drov - 2
Фото сайту Baza Drov - 3
Карта доставки

Дизайн для телефонів

Для цього проекту ми зробили 2 версії дизайну: для ноутбуків та для телефонів. Переглянути як виглядає сайт на мобільних пристроях, можна з фото нижче

Фото мобільної версії Baza Drov 1
Фото мобільної версії Baza Drov 1
Фото мобільної версії Baza Drov 2
Фото мобільної версії Baza Drov 2
Фото мобільної версії Baza Drov 3
Фото мобільної версії Baza Drov 3
Фото мобільної версії Baza Drov 4
Фото мобільної версії Baza Drov 4
Фото мобільної версії Baza Drov 5
Фото мобільної версії Baza Drov 5

Розробка сайту

На сайті присутня не зовсім звична фільтрація. Така її реалізація йде через вимоги сайту з точки зору SEO. Заключається вона в тому, що такі фільтри як категорії пиломатеріалів, дрова за призначення, вугілля за призначенням та брикети за призначенням по кліку перенаправляють нас на іншу вложену сторінку певної категорії. Окрім цього, для певної категорії товарів, збула зроблена вложеність по містах та районах Київської області

Давидов Андрій
Давидов Андрій

Front-end dev.

Анімація сайту

На сайті проведена також певна робота по анімації. Спостерігати її можна лише при окремих взаємодіях користувача з елементами(для прикладу наведенні на кнопку)

Калькулятор доставки

На вигляд сам калькулятор виглядає простим, проте «під капотом», все не так просто. Розробляючи його, ми стикнулись з проблемою, що для заощадження вартості доставки та правильному розрахунку цієї вартості, слід враховувати скільки кубів продукції влазиться у певний автомобіль. Окрім цього слід було врахувати витрати пального певного автомобіля та визначати відстань доставки. Для визначення відстані ми створили API по населених пунктах Київської області та залежно від вибору місця, визначаємо та підставляємо відстань у калькуляцію.
Фото Baza Drov 1

Калькулятор розрахунку вартості доставки

Структура сторінок

Головна сторінка, сторінка одного товару а також меню сайту мають певні особливості у зовнішньому вигляді та реалізації під час адаптації під пристрої. Для прикладу це можна спостерігати на фото, з яких видно як змінюється послідовність розміщення елементів на сторінці.

Покупка в 1 клік

Згідно наших напрацювань та досвіду, ми вирішили створити кнопку для «покупки в 1 клік» і не помились, вона дійсно працює. Більшість замовлень, які отримує клієнт з сайту, здійснюються саме через неї.

Міні корзина

Для зручності користування сайтом, а саме товарами які є у корзині, було прийнято рішення створити міні корзину сайту. Це дає змогу користувачу легко зрозуміти, що знаходиться у корзині(без її відвідування) та змінити кількість товару, або видалити не потрібний

Back-end

Найцікавішим етапом розробки бекенду – було створення калькулятора вартості доставки дров. А також реалізація пошуку населених пунктів київської області із автодоповненням. При пошуку було використано технологію пошуку по JSON файлі за допомогою PHP+Ajax, що знизило нагрузки на сервер.
Зінчук Сергій
Зінчук Сергій

Senior Web dev.

Робота з адмінкою

На початку роботи, було прийнято рішення для розробки інтернет магазину, а не сайту каталогу. Це робилось для того, щоб клієнт з легкістю зміг все оформити на сайті, що заощаджує час і клієнту і менеджеру.

Мультимовність

Сайт було розроблено на 2 мовах: українській та російській. Оскільки перед початком розробки було зібрано семантичне ядро, в якому була видна необхідність саме цих 2 мов для просування в регіоні.

Функціонал для SEO

Під час розробки відразу було проведено внутрішню SEO оптимізацію сайту. Що було зроблено:

  • Впроваджено мікророзмітку для: карточки товару, FAQ, хлібних крошок та іншого;
  • Розроблено динамічний sitemap.xml з впровадженими вимогами для мультимовних сайтів;
  • Передбачено можливість формування кастомного меню в категорії товарів (для перелінкови та UI/UX);
  • Можливість створення цільових сторінок під міста та райони.

Також було враховано багато інших моментів, корисних при SEO.

Міні корзина

Для зручності користування сайтом, а саме товарами які є у корзині, було прийнято рішення створити міні корзину сайту. Це дає змогу користувачу легко зрозуміти, що знаходиться у корзині(без її відвідування) та змінити кількість товару, або видалити не потрібний.
Фото Baza Drov 1

Синхронізація цін у прайс-листах

Усі ціни у розділі прайс-листів автоматично підтягуються із товарів категорії. Для налаштувань синхронізації потрібно лише вказати ідентифікатор категорії.
Фото Baza Drov 1

Можливість змін одиниць вимірювань

Для товару була передбачена можливість зміни одиниць вимірювань. Оскільки для прикладу дрова вимірюються в м3 а вугілля в тонах і так далі.

Інтеграція Telegram API

Дані з усіх форм, калькулятора та при оформлені замовлення відправляються в Telegram. Що зменшує час на обробку клієнта зі сторони менеджера по продажам.
Фото Baza Drov 1

04 Технології та інструменти

jQuery
Modx Revolution
Gulp
Figma
MySQL
PHP
LESS
Telegram API

05 Результат

В результаті нашої роботи, клієнт отримав повністю функціонуючий сайт з усіма його побажаннями згідно функціоналу. При переносі на основний домен ми зуміли зберегти позиції сайту та не втратити місячний трафік. Після завершення передали усі доступи для клієнта та дали доступ в адмін панельку для SEO-спеціалістів з нашої агенції, оскільки після нашої роботи вони приступили до просування сайту

Давидов Андрій
Давидов Андрій

Front-end dev.

06 Слова клієнта про проект

Замовляв тут розробку інтернет магазину та його просування. Інтернет магазин вже готовий, все супер. По просуванню ще працюємо, вже є перші результати. Але думаю все буде добре і по SEO, тому можете спокійно звертатись сюди за сайтами та маркетингом.

Атвор відгуку: Сергій
Сергій

Засновник

Вразились цим проектом?
Оцініть його!

Інші проекти

Картинка AgentGo - 1

SaaS продукт

AgentGo

Картинка Królestwo Pierożka - 1

Виробник заморожених напівфабрикатів

Królestwo Pierożka

Зробимо інтернет-магазин з маркетинговою структурою

При замовленні двох і більше послуг у нас діє система знижок