وب‌سایت جهانی ایران‌خودرو
گروه صنعتی ایران‌خودرو · خودروساز
- Next.js
- React
- TypeScript
- Leaflet.js
- i18n
- SCSS
- SEO
وب‌سایت بین‌المللی ایران‌خودرو برای مخاطبان فارسی، انگلیسی، عربی و روسی. کاتالوگ محصولات، بروشورهای قابل دانلود، محتوای خبری، فرایند درخواست قطعه‌ی یدکی و نقشه‌ی نمایندگی‌ها در سراسر جهان را در خود دارد.
چالش
سایت عمومی چهارزبانه‌ی ایران‌خودرو با Next.js - صفحه‌های محصول، دانلود کاتالوگ، بلاگ، درخواست قطعه‌ی یدکی و نقشه‌ی جهانی نمایندگی‌ها بر پایه‌ی Leaflet.
چهار زبان در دو جهت نوشتاری مسئله‌ی ترجمه نیست؛ مسئله‌ی چیدمان است. فارسی و عربی راست‌به‌چپ‌اند، انگلیسی و روسی چپ‌به‌راست، و همان کامپوننت‌ها باید بدون دو نسخه شدن stylesheet در هر دو جهت کار کنند. جدا از جهت، خود محتوا هم متقارن نیست - خط تولیدی که در یک بازار فروخته می‌شود ممکن است در بازار دیگر وجود نداشته باشد؛ پس «سایت را ترجمه کن» هرگز مدل درستی نبود. یک نقشه‌ی نمایندگی با پوشش جهانی و کاتالوگی از فایل‌های سنگین PDF هم که اضافه شود، بودجه‌ی کارایی خیلی زود تنگ می‌شود.
کاری که کردم
- چیدمان را با ویژگی‌های منطقی CSS ساختم (inline-start و inline-end به‌جای left و right) تا یک stylesheet واحد هر دو جهت نوشتاری را پوشش دهد.
- محتوا را برای هر زبان جداگانه مدل کردم، نه به شکل ترجمه‌ی یک زبان مرجع؛ تا هر بازار بتواند مجموعه‌ی محصولات متفاوتی داشته باشد، بی‌آنکه با CMS بجنگد.
- صفحه‌های محصول و خبر را با Next.js سمت سرور رندر کردم تا قابل خزش باشند و metadata مخصوص هر زبان داشته باشند - این سایت یک سطح اصلی SEO است، نه اپلیکیشنی پشت صفحه‌ی ورود.
- نقشه‌ی Leaflet را به‌صورت تنبل و فقط در routeهایی که از آن استفاده می‌کنند بارگذاری کردم تا کتابخانه‌ی نقشه برای بیشتر بازدیدکنندگان در باندل نباشد.
- فایل‌های PDF کاتالوگ را به شکل دانلود مستقیم و ایستا نگه داشتم، نه اینکه از مسیر اپلیکیشن عبور کنند.
ویژگی‌های کلیدی
- چهار زبان - فارسی، انگلیسی، عربی و روسی - در هر دو جهت راست‌به‌چپ و چپ‌به‌راست.
- نقشه‌ی نمایندگی‌ها با Leaflet.js و پوشش جهانی.
- صفحه‌های محصول با کاتالوگ قابل دانلود و فرایند درخواست قطعه‌ی یدکی.
- metadata سئو برای هر زبان و محتوای رندرشده در سمت سرور.
نتیجه
یک کدبیس چهار بازار با محتوای واقعاً متفاوت را سرویس می‌دهد، و افزودن زبان پنجم یک کار محتوایی است، نه یک کار مهندسی.