Інтернет-магазин електротоварів з їх імпортом через API
Інтернет-магазини — один із важливих та масштабних напрямів діяльності нашої компанії. Ми займаємось їх розробкою, запуском, просуванням та адмініструванням. І хоча за роки роботи у нас виробилися чіткі алгоритми розробки, ми завжди раді нестандартним завданням клієнта. Сьогодні цей випадок.
До нас звернувся клієнт з наступним завданням: розробити зручний інтернет-магазин електротоварів, каталог якого регулярно оновлюватиметься API з каталогу постачальника. API — програмний інтерфейс, що у ролі посередника: він дозволяє сервісам взаємодіяти, отримуючи доступом і обмінюючись даними.
Давайте подивимося, що вийшло зовні і як усе працює зсередини.
Дизайн
Сайт зустрічає нас стильним та функціональним дизайном. Стримані тони, акційні банери, товари з якісними фото, що рекомендуються, — кожен з елементів сприяє якнайшвидшому переходу відвідувача до пропонованої продукції.
Сторінка з товаром надає максимум інформації: починаючи фотографіями з описом, закінчуючи докладними технічними характеристиками та прикріпленими інструкціями у форматі pdf. У якій би частині сторінки ви не знаходилися, ви завжди можете відразу ж оформити замовлення завдяки зафіксованому праворуч блоку з короткою інформацією, ціною та кнопкою покупки.
Навігація
Оскільки загальна кількість позицій у магазині сягає 15 тисяч, потрібно допомогти покупцеві знайти потрібний йому товар. Для цього було розроблено зручний багаторівневий каталог. Перейти в нього можна із шапки сайту або бічного «гамбургер-меню». Оскільки деякі категорії налічують понад 1000 товарів, вони додатково розбиті на підкатегорії. Кожна з них супроводжується лічильником кількості товарів усередині та наочною фотографією.
Окремо варто відзначити сторінки брендів, які допомагають знайти продукцію конкретного виробника. Крім логотипу та опису бренду, тут розташовується перелік всіх наявних товарів зі зручною фільтрацією по групі товарів.
Пошук
Якщо відвідувач шукає щось конкретне, він може скористатися пошуком, розташованим у шапці поряд з логотипом. Пошук працює по AJAX: без перезавантаження сторінки він виводить товари, що запитуються, разом із зображеннями та цінами. Відвідувач може відразу перейти до потрібного товару без зайвого екрану з переліком результатів.
Можна навіть не вводити руками назву потрібного товару, а просто натиснути на мікрофон у полі введення та вимовити – через пару секунд усі доступні варіанти відобразяться зручним списком.
Під час тестування пошуку ми виявили, що ресурсів хостингу недостатньо. Через брак оперативної пам’яті результати завантажувалися надто довго, а іноді й зовсім були відсутні. Наші програмісти оптимізували цей процес, досягнувши швидкої та ефективної роботи сайту у поточному серверному оточенні.
Імпорт товарів через API
Магазин RPЕЛЕКТРО пропонує своїм покупцям широкий асортимент електротехнічної продукції. Проте пропоновані товари були заведені в 1С і утримувалися в excel-файлі. Як уже згадувалося раніше, особливість цього випадку полягає в тому, що весь асортимент замовнику необхідно було імпортувати з сайту постачальника за допомогою API.
Тому ми написали скрипт, який виконує це завдання: звертаючись до API постачальника, він забирає інформацію про товар і коректно імпортує її на сайт. Скрипт забирає максимальну кількість даних: назва, артикул, опис, технічні характеристики, фотографії, ціни, актуальні залишки… Також на сайт повністю переноситься структура каталогу постачальника.
Крім початкового вивантаження, надалі цей скрипт використовувався для регулярного оновлення каталогу. У процесі розробки довелося врахувати багато деталей. Наприклад, для оптимізації продуктивності скрипт не імпортує відразу всю базу даних із 15 000 товарів, а працює за розкладом окремими ітераціями, не призводячи до зависання.
Визначення розташування та мультирегіональність
Оскільки компанія має три філії в різних містах, ми зробили сайт мультирегіональним. Під час першого відвідування користувача автоматично визначається місцезнаходження та визначається яка з філій магазину найближча до нього. Для кожного з варіантів було створено окремі піддомени.
Візуально та функціонально відмінностей між ними немає, різниця лише у наповненні:
- контакти та адреси змінюються на актуальні;
- товари з актуальною наявністю для конкретного регіону;
- персоналізований розрахунок та конфігурація доставки.
Також важливий той факт, що піддомени для окремих міст позитивно впливають на просування кожного з регіональних сайтів. Впроваджена мультирегіональність дозволяє робити окремі шаблони метатегів для кожного регіону. Разом із заміною контенту це відкриває широкі можливості для просування сайту у локальній видачі Google та Яндекс.
Адаптивність
