Як реалізувати зручний вибір регіону та країни на сайті

Користувач не може знайти потрібну країну в довгому списку — кидає форму. Ми стикалися з цим десятки разів і знаємо, як зробити вибір країни швидким та інтуїтивним. В цій статті ми розглянемо реалізацію вибору країни на сайті. Для інтернет-магазину з доставкою по всьому світу вибір країни — критичний етап оформлення замовлення. Якщо користувач витрачає більше 5 секунд на пошук своєї країни, він, швидше за все, піде до конкурентів. У нашій практиці оптимальний варіант — searchable dropdown з пошуком, прапорами та автовизначенням по IP. Такий віджет скорочує час вибору на 70% порівняно зі звичайним select і знижує відмови на 15%. Базова реалізація коштує від 250$, що на 40% дешевше за індивідуальну розробку. Автовизначення по IP підвищує конверсію на 20% порівняно з ручним вибором.

Які проблеми вирішуємо

• 200 країн у дропдауні без пошуку — користувач змушений скролити вручну до 30 секунд. Рішення: фільтрований список з пошуком за назвою та кодом країни.
• Немає автовизначення мови/валюти — після вибору країни контент не змінюється. Ми прив'язуємо вибір до завантаження локалізованих даних через API або маппінг.
• Збереження вподобань — без запису в localStorage або cookie користувач знову вибирає країну при кожному візиті. Це збільшує кількість дій на 50% та знижує retention.
• Неадаптованість під мобільні — дрібні елементи, непрацюючий пошук. Робимо компонент touch-friendly з віртуалізацією списку.

Як ми це робимо

На прикладі React 18 + Headless UI Combobox. Реалізуємо кастомний компонент з пошуком, прапорами та динамічним підвантаженням даних. Код нижче — базова версія, у продакшені додаємо дебаунс, віртуалізацію списку та кешування.

import { Combobox } from '@headlessui/react'; import { useState } from 'react'; import { countries } from './countries-data'; // ISO 3166-1 список function CountrySelector({ value, onChange }) { const [query, setQuery] = useState(''); const filtered = query.length < 1 ? countries : countries.filter(c => c.name.toLowerCase().includes(query.toLowerCase()) || c.code.toLowerCase().includes(query.toLowerCase()) ); return ( <Combobox value={value} onChange={onChange}> <Combobox.Input onChange={e => setQuery(e.target.value)} displayValue={c => c?.name ?? ''} placeholder="Виберіть країну" className="country-input" /> <Combobox.Options className="country-dropdown"> {filtered.length === 0 && query.length > 0 ? ( <div className="country-empty">Країну не знайдено</div> ) : ( filtered.map(country => ( <Combobox.Option key={country.code} value={country}> {({ active }) => ( <div className={`country-option ${active ? 'active' : ''}`}> <img src={`/flags/${country.code.toLowerCase()}.svg`} width={20} alt="" aria-hidden /> {country.name} <span className="country-code">{country.code}</span> </div> )} </Combobox.Option> )) )} </Combobox.Options> </Combobox> ); } 

Докладніше про компонент можна прочитати в документації Headless UI Combobox.

Як обрати спосіб вибору країни?

Searchable dropdown у 3-4 рази швидший за звичайний select і є найкращим вибором для інтернаціональних проєктів.

Чому варто використовувати автовизначення по IP?

Передвстановлення країни по IP скорочує кількість дій користувача на один клік. Це особливо важливо на лендінгах з локалізованим контентом — користувач одразу бачить правильну мову та валюту. Реалізація через MaxMind або Torann/GeoIP на Laravel займає пару годин. Приклад бекенду:

// Laravel + Torann/GeoIP або MaxMind public function detectCountry(Request $request): JsonResponse { $geo = geoip()->getLocation($request->ip()); return response()->json([ 'country_code' => $geo->iso_code, 'country_name' => $geo->country, ]); } 

На фронті:

useEffect(() => { fetch('/api/geo/country') .then(r => r.json()) .then(geo => { const detected = countries.find(c => c.code === geo.country_code); if (detected && !value) onChange(detected); // тільки якщо не вибрано вручну }); }, []); 

Зверніть увагу: автоматичне визначення не повинно перезаписувати ручний вибір користувача — використовуйте перевірку !value.

Дані: звідки брати список країн

• Статичний JSON — файл з ISO 3166 (код, назва потрібними мовами, dial-код). Пакет world-countries (~180 KB) або власний полегшений список. Стандарт ISO 3166 гарантує унікальність кодів.
• REST Countries API — https://restcountries.com/v3.1/all — актуальні дані, але зовнішня залежність.
• База на сервері — таблиця countries з перекладами, фільтрація за активними регіонами доставки.

Що входить в роботу

• Готовий компонент з searchable dropdown, прапорами та пошуком
• Автовизначення країни по IP (якщо потрібен бекенд)
• Збереження вибору в localStorage/cookie
• Адаптація під мобільні пристрої
• Інтеграція з існуючою системою i18n
• Документація з інтеграції та підтримка 1 місяць

Терміни: від 1 до 2 робочих днів на базову реалізацію. Вартість розраховується індивідуально — напишіть нам, оцінимо проєкт безкоштовно. Гарантуємо чистий код та відсутність багів.

Наші інженери мають 5+ років досвіду у веб-розробці. Хочете покращити UX вашого сайту? Замовте віджет вибору країни у нас — отримайте готове рішення за 1-2 дні з гарантією якості. Зв'яжіться з нами для консультації.