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

Потрапляючи на сайт, перше, що бачить користувач, — великий клікабельний банер з пропозиціями інтернет магазину. Якщо клікнути по ньому, юзера переносить у відповідну категорію. Це реалізовано слайдером, в якому клієнт вносить посилання куди користувача буде переносити. Структура сайту:

• Хедер. В лівому верхньому куті розташовано кнопку з номером центру обслуговування клієнтів. Це зручна опція, якщо користувач переглядає сторінку з телефона або планшета, оскільки можна миттєво зателефонувати. Ми це  зробили через активну кнопку, тобто, коли користувач нажимає на телефон, автоматично відкривається програма дзвінка . В правому верхньому куті ми реалізували кнопки, які ведуть на сторінки «Оплата», «Доставка», «Обмін та повернення», «Контакти». Клікнувши, користувач перейде у відповідний розділ. Також на ньому розташовані логотип компанії, випадаюче меню «Каталог товарів», «Пошук», кнопки «Особистий кабінет», «Збережені товари», «Порівняння», «Кошик». 
• Про компанію. В цьому розділі описано цінності, місію та підхід компанії. Під кожен короткий опис наші розробники створили окремий блок. Над трьома блоками розташовано клікабельні кнопки з посиланнями на соцмережі.
• Нові пропозиції. В цьому блоці відображаються найновіші моделі популярних гаджетів, в адмін панелі цієї секції є повний список товарів, клієнт просто обирає товари які хоче мати в цій секції. Замовник може самостійно змінювати порядок відображення товарів.
• Гарячі пропозиції. Користувачам запропонована оригінальна техніка за спеціальними цінами. 
• Популярні товари. Показуються позиції, яким користувачі віддають перевагу найбільше. Ми реалізували цей блок по аналогії з секцією «Нові пропозиції».
• Футер. Виконаний в чорному кольорі та містить набір пунктів. Тут вказані контактна інформація, посилання на соціальні мережі, способи оплати, каталог з переліком категорій, кнопки, які ведуть на сторінки «Оплата», «Доставка», «Обмін та повернення», «Контакти», «Угода користувача».

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

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

В розділі «Контакти» передбачено інтеграцію Google Maps. Наші розробники реалізували її через фрейм. Якщо користувач захоче відвідати фізичний магазин, він легко прокладе собі шлях. В нижній частині сайту інтегровано чат-бот та кнопку замовлення зворотнього дзвінка. Ми використали чат «Binotel», вставивши скрипт від сервісу.

Інтернет-магазин — це складна система, адже він має бути зручним та зрозумілим для користувача. Саме тому ми реалізували такі фічі:

• Фільтрація категорії. Ця функція реалізована за допомогою технології AJAX. Якщо, наприклад, користувач заходить в категорію «iPhone», він може вказати бажані характеристики — колір, модель, об’єм пам’яті тощо. 
• Пошук товарів. Якщо користувач вже чітко знає, яку техніку та модель він бажає придбати, її легко знайти через пошук. Функцію реалізовано за допомогою технології AJAX та плагіна FiboSearch – AJAX Search for WooCommerce.
• Функції сторінки продукту. Ми реалізували купівлю в кредит та купівлю в один клік. Такі функції впроваджено за допомогою PHP, JS та сторонніх скриптів банкінгу. Крім цього, ми реалізували кнопку «Повідомити про наявність», якщо товар тимчасово відсутній на складі. Завдяки цьому потенційний лід може повернутись пізніше і зробити покупку.
• Інтеграція різних способів оплати. Розрахуватись за купівлю легко онлайн банківською карткою, за допомогою сервісів Apple Pay, Google Pay, Plata by mono.
• Інтеграція служби доставки. Завдяки цьому користувач може купити товари з доставкою до дверей, відділення чи поштомату.

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