pl

Baza Drov – dostawca drewna i węgla

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

Dystrybutor paliw stałych

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

01 Klient

Baza Drov to firma oferująca swoim klientom paliwo stałe w najlepszych cenach na rynku ukraińskim.

02 Cele i zadania

Przeprojektowanie witryny na podstawie analizy istniejącej witryny i zebranych danych w celu promocji SEO witryny

  1. Strona powinna być utrzymana w kolorach białym, czarnym i brązowym.
  2. Nowa strona powinna zachować dotychczasowy ruch.
  3. Upewnij się, że strona nie straci pozycji.
  4. Wprowadź filtrowanie produktów według przeznaczenia i ceny.
  5. Utwórz kalkulator do obliczania kosztów dostawy.
  6. Strona powinna umożliwiać wybór języka (ukraiński i rosyjski).
  7. Po uruchomieniu strony należy natychmiast wdrożyć wewnętrzną optymalizację SEO.
  8. Wprowadź możliwość zakupu towarów za pośrednictwem koszyka.
  9. W koszyku powinna być możliwość wyboru opcji dostawy (dostawa własna lub naszym transportem), a także płatności (gotówka, płatność kartą).
  10. Zadbaj o wygodne wypełnienie strony informacjami i innymi aspektami z punktu widzenia administracji.

03 Decyzja

Stworzyliśmy ten sklep internetowy za pomocą narzędzia miniShop2, dostępnego w systemie CMS MODx. Podczas prac rozwojowych korzystaliśmy z zewnętrznych usług API, aby zrealizować niektóre zadania.

Projektowanie stron internetowych

Przed rozpoczęciem prac nad projektem strony zapoznaliśmy się z jej strukturą i warunkami zamówienia, które otrzymaliśmy od działu marketingu. Następnie przeanalizowaliśmy wszystkie życzenia klienta i rozpoczęliśmy prace nad projektem strony.

Zabarwienie

Zabarwienie

Czcionki

Open Sans Medium
Open Sans Regular
Oswald Medium
Oswald Regular

Ikony metod wysyłki

Ikona dostawy
Ikona transportu morskiego
Ikona odbioru
Zdjęcia niektórych sekcji
Фото сайту Baza Drov - 1
Фото сайту Baza Drov - 2
Фото сайту Baza Drov - 3
Фото сайту Baza Drov - 4
Strona produktu

Prawdopodobnie najwięcej uwagi podczas pracy nad tą witryną poświęciliśmy stronie pojedynczego produktu i katalogowi produktów. Wygląd tych stron widać na poniższym zdjęciu.

Фото сайту Baza Drov - 1
Фото сайту Baza Drov - 2
Фото сайту Baza Drov - 3
Mapa dostaw

Projekt dla telefonów

W ramach tego projektu stworzyliśmy dwie wersje strony: na laptopy i telefony. Jak strona wygląda na urządzeniach mobilnych, możesz zobaczyć na zdjęciu poniżej.

Фото мобільної версії 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

Tworzenie stron internetowych

Strona posiada nietypowy system filtrowania. Jego wdrożenie wynika z wymagań SEO. Polega on na tym, że filtry takie jak kategorie tarcicy, drewna opałowego według przeznaczenia, węgla według przeznaczenia i brykietów według przeznaczenia przekierowują po kliknięciu na inną, zagnieżdżoną stronę danej kategorii. Dodatkowo, dla danej kategorii towarów wprowadzono zagnieżdżanie według miast i powiatów obwodu kijowskiego.

Мельничук Роман
Мельничук Роман

Full-stack dev.

Animacja witryny

Na stronie znajdują się również animacje. Można je zaobserwować tylko podczas określonych interakcji użytkownika z elementami (na przykład najechania kursorem na przycisk).

Kalkulator dostaw

Sam kalkulator wydaje się prosty na pierwszy rzut oka, ale „pod maską” nie wszystko jest takie proste. Podczas jego opracowywania napotkaliśmy problem polegający na tym, że aby zaoszczędzić na kosztach dostawy i poprawnie je obliczyć, musieliśmy uwzględnić liczbę kostek produktów mieszczących się w danym samochodzie. Dodatkowo, musieliśmy uwzględnić zużycie paliwa danego samochodu i określić odległość dostawy. Aby to zrobić, stworzyliśmy API dla miejscowości w obwodzie kijowskim i, w zależności od wybranej lokalizacji, określamy i podstawiamy odległość do obliczeń.
Фото Baza Drov 1

Kalkulator kosztów wysyłki

Struktura strony

Strona główna, strona pojedynczego produktu i menu witryny mają pewne cechy wyglądu i implementacji, które zmieniają się wraz z adaptacją do urządzenia. Widać to na przykład na zdjęciu, na którym widać, jak zmienia się kolejność elementów na stronie.

Zakup jednym kliknięciem

Bazując na naszym doświadczeniu i wiedzy, postanowiliśmy stworzyć przycisk „zakup jednym kliknięciem” i mieliśmy rację – to naprawdę działa. Większość zamówień, które klienci otrzymują za pośrednictwem strony, jest składana właśnie za jej pośrednictwem.

Mini koszyk

Dla wygody korzystania ze strony, a konkretnie z produktów w koszyku, postanowiono stworzyć mini-koszyk. Pozwala to użytkownikowi łatwo zorientować się, co znajduje się w koszyku (bez konieczności odwiedzania go) i zmienić ilość produktu lub usunąć niepotrzebne.

Back-end

Najciekawszym etapem rozwoju back-endu było stworzenie kalkulatora kosztów dostawy drewna opałowego, a także wdrożenie wyszukiwania miejscowości w obwodzie kijowskim z funkcją autouzupełniania. Wyszukiwarka korzystała z technologii wyszukiwania plików JSON z wykorzystaniem PHP i Ajax, co zmniejszyło obciążenie serwera.
Косик Дмитро
Косик Дмитро

Front-end dev.

Współpraca z administratorem

Na początku prac podjęto decyzję o stworzeniu sklepu internetowego, a nie strony katalogowej. Miało to na celu umożliwienie klientowi łatwego zorganizowania wszystkiego na stronie, co oszczędza czas zarówno klientowi, jak i managerowi.

Wielojęzyczność

Strona została stworzona w dwóch językach: ukraińskim i rosyjskim. Przed rozpoczęciem prac stworzono rdzeń semantyczny, który wyraźnie wskazywał na potrzebę korzystania z tych dwóch języków w celu promocji regionu.

Funkcjonalność dla SEO

W trakcie rozwoju natychmiast przeprowadzono wewnętrzną optymalizację SEO strony. Co zostało zrobione:

  • Mikro-znaczniki wprowadzono dla: karty produktu, FAQ, ścieżki nawigacyjnej i innych;
  • Opracowano dynamiczny plik sitemap.xml uwzględniający wymagania dotyczące witryn wielojęzycznych;
  • Możliwe jest utworzenie własnego menu w kategorii produktów (w celu ponownego łączenia i UI/UX);
  • Możliwość tworzenia landing page’y dla miast i dzielnic.

Pod uwagę wzięto również wiele innych punktów przydatnych z punktu widzenia SEO.

Mini koszyk

Dla wygody korzystania ze strony, a konkretnie z produktów w koszyku, postanowiliśmy stworzyć minikoszyk. Pozwala on użytkownikowi łatwo zorientować się, co znajduje się w koszyku (bez konieczności odwiedzania go), a także zmienić ilość produktu lub usunąć niechciany.
Фото Baza Drov 1

Synchronizacja cen w cennikach

Wszystkie ceny w sekcji cennika są automatycznie pobierane z produktów w danej kategorii. Aby skonfigurować synchronizację, wystarczy podać identyfikator kategorii.
Фото Baza Drov 1

Możliwość zmiany jednostek miary

Produkt został wyposażony w możliwość zmiany jednostek miary. Na przykład drewno opałowe mierzy się w m3, węgiel w tonach itd.

Integracja z API Telegramu

Dane ze wszystkich formularzy, kalkulatora i podczas składania zamówienia są przesyłane do Telegrama. Skraca to czas obsługi klienta przez kierownika sprzedaży.
Фото Baza Drov 1

04 Technologie i narzędzia

jQuery
Modx Revolution
Gulp
Figma
MySQL
PHP
LESS
Telegram API

05 Wynik

W efekcie naszych prac klient otrzymał w pełni funkcjonalną stronę, spełniającą wszystkie jego oczekiwania i funkcjonalności. Przenosząc stronę na domenę główną, udało nam się utrzymać jej pozycję i nie stracić miesięcznego ruchu. Po zakończeniu prac przenieśliśmy wszystkie uprawnienia na klienta i udostępniliśmy panel administracyjny specjalistom SEO z naszej agencji, którzy po naszej pracy zaczęli promować stronę.

Мельничук Роман
Мельничук Роман

Full-stack dev.

06 Słowa klienta o projekcie

Zleciłem tu stworzenie sklepu internetowego i jego promocję. Sklep jest już gotowy, wszystko działa świetnie. Nadal pracujemy nad promocją, mamy już pierwsze efekty. Myślę jednak, że pod względem SEO wszystko będzie w porządku, więc śmiało możesz się z nami skontaktować w sprawie stron internetowych i marketingu.

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

Założyciel

Czy ten projekt zrobił na Tobie wrażenie?
Oceń go

Inne projekty

Stwórzmy sklep internetowy ze strukturą marketingową

Przy zamówieniu dwóch lub więcej usług obowiązuje system rabatowy