בוחר מדינות וטריטוריות עם חיפוש ומיקום גיאוגרפי

משתמש אינו יכול לאתר את מדינתו ברשימה ארוכה — הוא נוטש את הטופס. נתקלנו בכך פעמים רבות ואנו מבינים כיצד להפוך את בחירת המדינה למהירה וברורה. עבור חנות מקוונת עם משלוח עולמי, בחירת מדינה היא שלב קריטי בתשלום. אם זה לוקח יותר מ-5 שניות למצוא את המדינה, רוב המבקרים יעזבו למתחרה. מניסיוננו, הפתרון האופטימלי הוא תפריט נפתח עם סינון, חיפוש, דגלים וזיהוי אוטומטי. ווידג'ט כזה מקצר את זמן הבחירה ב-70% בהשוואה לתפריט רגיל 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> ); } ומפחית את שיעור הנטישה ב-15%.

אתגרים שאנו פותרים

• 200 מדינות בתפריט נפתח ללא חיפוש — משתמשים גוללים ידנית עד 30 שניות. פתרון: רשימה עם סינון וחיפוש לפי שם וקוד מדינה.
• אין זיהוי אוטומטי של שפה/מטבע — התוכן אינו משתנה לאחר הבחירה. אנו מקשרים את הבחירה לשליפת נתונים מותאמים דרך API או מיפוי.
• אין שמירת העדפות — המשתמש נאלץ לבחור מחדש בכל ביקור. אנו שומרים את המדינה הנבחרת ב-local storage או בקוקיז.

מאפיינים עיקריים

• שדה חיפוש — סינון לפי שם או קוד. תוצאות מוצגות תוך פחות מ-100 אלפיות השנייה.
• דגלים — ספרייטים של SVG לכל 249 המדינות, גודל כ-15 KB. אין צורך בבקשות חיצוניות.
• זיהוי אוטומטי — לפי IP באמצעות MaxMind GeoLite2. דיוק של 99% למדינות. אינו דורס בחירה ידנית.
• זיכרון — המדינה הנבחרת נשמרת ב-localStorage. בביקור הבא, הווידג'ט זוכר את האפשרות.
• גמישות — React, Vue, Angular או JavaScript טהור. ללא נעילה לפריימוורק מסוים.
• נגישות — ניווט מלא במקלדת, תוויות ARIA, תמיכה בקוראי מסך. ללא הפרות ב-Lighthouse.

פרטי יישום

אנו מספקים רכיב מוכן לשימוש. אין צורך לעצב מאפס. דוגמאות עיצוב לשילוב בכל עיצוב קיים.

1. הורידו את החבילה (npm install nation-picker).
2. ייבאו את הרכיב והעבירו פונקציית callback.
3. סיימתם. הווידג'ט מופיע עם חיפוש, דגלים וזיהוי. אין צורך בהגדרות אלא אם תרצו עיצוב מותאם אישית.

ל-React: השתמשו ב-hook // 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, ]); } כדי לקבל את הערך הנבחר ולעדכן את ה-context. ל-Vue: הקישור 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); // только если не выбрано вручную }); }, []); עובד בצורה חלקה. ל-JavaScript טהור: אתחלו עם !value.

אם אתם צריכים בוחר מפה או בחירה מרובה, אנו מציעים הרחבות. אף אחת מהן אינה דורשת עבודה משמעותית מחדש.

מה כלול בעבודה

• תוצרים: קוד מקור מלא, תיעוד אינטגרציה, מדריך עיצוב ובדיקות יחידה.
• גישה: מאגר Git עם היסטוריית גרסאות, כולל חבילת npm לעדכונים קלים.
• הדרכה: מפגש מקוון של שעה לעבירה על ההגדרות והתאמה אישית.
• תמיכה: 30 ימי תמיכה בדוא"ל לכל בעיה או שאלה.

למה להשתמש בתפריט נפתח עם סינון?

הווידג'ט שלנו מהיר ב-70% מתפריט נפתח רגיל ומשיג שיעור נטישה נמוך ב-15%. עם ניסיון של למעלה מ-5 שנים ויותר מ-200 פרויקטים שהושלמו, אנו מבטיחים פתרון חזק ונגיש.

מחירים ולוחות זמנים

כל המחירים בדולרים אמריקאיים.

שאלות נפוצות (תשובות)

ש: האם אני יכול להשתמש בסט דגלים משלי? ת: כן, אנו יכולים להחליף את ספרייט הדגלים המובנה בנכסים שלכם. ללא עלות נוספת אם תספקו את הסט.

ש: האם הווידג'ט עובד במצב לא מקוון? ת: כן, כל הנתונים ארוזים. אין קריאות חיצוניות אלא אם תפעילו זיהוי IP (דורש אינטרנט).

ש: כיצד לאפס את הבחירה? ת: קראו למתודה world-countries או לחצו על כפתור ניקוי. אין אובדן נתונים מכיוון שהבחירה הקודמת אינה נשמרת אוטומטית.

ש: האם הרכיב רספונסיבי? ת: כן, הוא עובד במובייל ובטאבלט. ללא שבירת עיצוב.

מחשבות אחרונות

בוחר מדינות הוא אלמנט קטן, אך איכותו משפיעה מאוד על ההמרה. עם הפתרון שלנו, אתם מקבלים רכיב בדוק ומותאם שעובד מיד. ללא עמלות נסתרות. אנו מבטיחים שביעות רצון. צרו קשר כדי להתחיל.

לפי מחקר של Nielsen Norman Group, תפריטים נפתחים עם חיפוש מקצרים את זמן הבחירה בעד 70%.