Cách Build Multi-Language Store trên Haravan cho Thị Trường Lào/Campuchia: Xử Lý Vấn Đề Encoding Tiếng Thái

Tổng Quan Thị Trường và Yêu Cầu Kỹ Thuật

Theo báo cáo Google Tempo 2024, thị trường thương mại điện tử Đông Nam Á đạt doanh thu $128.5 tỷ năm 2024, dự kiến tăng lên $172.3 tỷ vào 2025 với tốc độ tăng trưởng kép 21.3%/năm. Trong đó, Lào và Campuchia ghi nhận mức tăng trưởng ấn tượng 34.7% và 42.1% nhờ tỷ lệ thâm nhập Internet lần lượt là 78% và 82% (Cục TMĐT Việt Nam, 2024). Tuy nhiên, việc triển khai đa ngôn ngữ gặp thách thức kỹ thuật nghiêm trọng từ hệ thống encoding, đặc biệt khi xử lý tiếng Thái (UTF-8 không đầy đủ) ảnh hưởng trực tiếp đến hiển thị tiếng Lào và Khmer.

⚠️ Lưu ý quan trọng: Haravan mặc định sử dụng UTF-8 nhưng thiếu hỗ trợ Normalization Form C (NFC) cho tiếng Thái, dẫn đến lỗi hiển thị “a 9” thay vì “ส” khi kết hợp dấu (ví dụ: “สัมพันธ์” thành “s ัมพันธ์”). Điều này gây mất uy tín thương hiệu khi mở rộng sang Lào/Campuchia do các ngôn ngữ này sử dụng hệ chữ tương đồng.

Thống kê từ Shopify Commerce Trends 2025 cho thấy 68.3% doanh nghiệp Đông Nam Á gặp lỗi encoding trong 6 tháng đầu triển khai đa ngôn ngữ, làm giảm 22.5% tỷ lệ chuyển đổi. Bài viết này hướng dẫn quy trình build hệ thống đa ngôn ngữ từ A-Z, tập trung giải quyết vấn đề encoding với các bước triển khai có thể thực thi ngay.

Vấn Đề Kỹ Thuật: Encoding Tiếng Thái và Ảnh Hưởng Đến Thị Trường Lào/Campuchia

Hệ chữ Thái (Lao/Cambodia) sử dụng Unicode Block U+0E00–U+0E7F nhưng yêu cầu tuân thủ chuẩn Unicode 15.0 để xử lý kết hợp ký tự (combining characters). Haravan mặc định dùng UTF-8 nhưng thiếu 2 thành phần cốt lõi:

1. Chuẩn NFC (Normalization Form C): Gộp ký tự cơ sở và dấu thành 1 unit (ví dụ: “ส” + “ั” = “สั”)
2. Font support đầy đủ: Các font mặc định không chứa glyphs cho tiếng Lào (U+0E80–U+0EFF)

Khi không xử lý đúng, hệ thống sẽ hiển thị:
– “ສີ່” (tiếng Lào) thành “ສ ີ ່”
– “ភាសាខ្មែរ” (tiếng Khmer) thành “ភ ា ស ា ខ ្ ម ែ រ”

Hậu quả thực tế:
– Tỷ lệ giỏ hàng abandon tăng 17.2% do lỗi hiển thị trên mobile (Gartner, 2024)
– Thời gian load trang tăng 350ms khi dùng font fallback

So Sánh Giải Pháp Xử Lý Đa Ngôn Ngữ

Kết luận lựa chọn: Kết hợp Haravan (frontend) + Medusa (backend) + Cloudflare Workers (encoding normalization) tối ưu chi phí và đáp ứng yêu cầu kỹ thuật.

Thiết Kế Giải Pháp: Xử Lý Encoding qua 3 Lớp

Lớp 1: Cloudflare Workers – Xử lý trước khi đến Haravan

// cloudflare-worker-encoding.js
export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    if (url.pathname.startsWith('/lao') || url.pathname.startsWith('/kh')) {
      const response = await fetch(request);
      const html = await response.text();
      // Áp dụng NFC normalization cho tiếng Thái/Lào/Khmer
      const normalized = html.replace(/([\u0E00-\u0E7F\u0E80-\u0EFF\u1780-\u17FF]+)/g, 
        (match) => match.normalize('NFC')
      );
      return new Response(normalized, {
        status: response.status,
        headers: { ...response.headers, "Content-Type": "text/html; charset=utf-8" }
      });
    }
    return fetch(request);
  }
}

Lớp 2: Medusa Plugin – Quản lý ngôn ngữ

// medusa-plugin-haravan-multilingual/src/services/language.ts
import { MedusaError } from "@medusajs/utils"
import { EntityManager } from "typeorm"

class LanguageService {
  constructor({ manager }) {
    this.manager_ = manager
  }

  async validateLocale(locale) {
    const validLocales = ["th", "lo", "km", "vi"]
    if (!validLocales.includes(locale)) {
      throw new MedusaError(
        MedusaError.Types.INVALID_DATA,
        `Locale ${locale} not supported. Use: ${validLocales.join(", ")}`
      )
    }
    return locale
  }
}

export default LanguageService

Lớp 3: Nginx Configuration – Đảm bảo charset

# nginx-encoding.conf
server {
  listen 443 ssl;
  server_name store.la store.kh;

  ssl_certificate /etc/nginx/ssl/wildcard_haravan.pem;
  ssl_certificate_key /etc/nginx/ssl/wildcard_haravan.key;

  location / {
    proxy_pass https://haravan-store.myshopify.com;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-Proto $scheme;

    # Force UTF-8 encoding
    charset utf-8;
    charset_types *;

    # Add Vary header for cache
    add_header Vary Accept-Language;
  }
}

Các Bước Triển Khai: 8 Phase Chi Tiết

Phase 1: Khảo sát kỹ thuật (Tuần 1-3)

Mục tiêu: Xác định scope xử lý encoding và tích hợp hệ thống
Người chịu trách nhiệm: Solution Architect + Dev Lead

Phase 2: Thiết lập môi trường (Tuần 4-7)

Mục tiêu: Cấu hình Medusa và Cloudflare Workers
Người chịu trách nhiệm: DevOps + Backend Dev