كيف يمكن تحويل لغة الموقع في laravel

لتمكين تغيير اللغة من الايقونة، عليك باستخدام الجافاسكريبت،  من خلال استخدام Ajax لإرسال طلب إلى الخادم لتحديث لغة الموقع عند النقر على الايقونة.

وإذا أردت استخدام الكود الخاص بك،  فعليك بإجراء التعديلات التالية في نفس الملف كمثال:

1- استخدم الصفة data-lang لتعيين اللغة الحالية للمستخدم على الايقونة:

@foreach (LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
    <a rel="alternate" hreflang="{{ $localeCode }}" class="language_icon" data-lang="{{ $localeCode }}"
        href="{{ LaravelLocalization::getLocalizedURL($localeCode, null, [], true) }}">
        <i class="fa fa-language" style="font-size: 48px"></i>
    </a>
@endforeach

2- استخدم jQuery أو جافاسكريبت لتحديث اللغة على الايقونة عند النقر عليها:

كود jQuery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $(".language_icon").click(function (e) {
            e.preventDefault();
            var lang = $(this).attr("data-lang");
            $.ajax({
                url: "{{ route('locale.change') }}",
                type: "POST",
                dataType: "json",
                data: { lang: lang, _token: "{{ csrf_token() }}" },
                success: function (data) {
                    if (data.success) {
                        $(".language_icon").attr("data-lang", data.locale);
                        $(".language_icon i").removeClass().addClass(data.icon);
                    }
                },
            });
        });
    });
</script>

كود جافاسكريبت

<script>
  async function changeLanguage(lang) {
    try {
      const response = await fetch("{{ route('locale.change') }}", {
        method: "POST",
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        body: `lang=${lang}&_token={{ csrf_token() }}`
      });
      const data = await response.json();
      if (data.success) {
        const languageIcons = document.getElementsByClassName("language_icon");
        for (let i = 0; i < languageIcons.length; i++) {
          languageIcons[i].setAttribute("data-lang", data.locale);
          const languageIcon = languageIcons[i].getElementsByTagName("i")[0];
          languageIcon.classList.remove();
          languageIcon.classList.add(data.icon);
        }
      }
    } catch (error) {
      console.error(error);
    }
  }
</script>

3- تعريف المسار المستخدم في الطلب ajax في ملف routes/web.php:

Route::post('locale/change', [App\Http\Controllers\LocaleController::class, 'changeLocale'])->name('locale.change');

4- إنشاء دالة changeLocale() في LocaleController لتحديث اللغة وإرجاع الرد على الطلب ajax:

public function changeLocale(Request $request)
{
    $locale = $request->lang;
    if (in_array($locale, LaravelLocalization::getSupportedLocalesKeys())) {
        session()->put('locale', $locale);
    }
    $data = [
        'success' => true,
        'locale' => $locale,
        'icon' => $locale == 'ar' ? 'fa fa-language fa-flip-horizontal' : 'fa fa-language'
    ];
    return response()->json($data);
}

بعد ذلك، يمكنك تخصيص الأيقونة بناءً على اللغة المختارة بواسطة المستخدم وإجراء أي تغييرات أخرى تريدها في التطبيق.

 سأقدم لك حلاً بإزالة الجزء المتعلق بـ @foreach؛ سنستخدم طريقة أخرى للتبديل بين اللغتين.

إنشاء دالة JavaScript للتحكم في تبديل اللغة وإعادة توجيه المستخدم إلى الرابط المقابل للغة المطلوبة.

الكود الجديد:

//head

@if (App::getLocale() == 'en')
    <link href="{{ asset('css1/rtl.css') }}" rel="stylesheet">
@else
    <link href="{{ asset('css1/ltr.css') }}" rel="stylesheet">
@endif
//body

<a id="toggleLanguage" href="#" class="language_icon">
    <i class="fa fa-language" style="font-size: 48px"></i>
</a>

<script>
    document.getElementById('toggleLanguage').addEventListener('click', function(e) {
        e.preventDefault();
        let currentLocale = '{{ App::getLocale() }}';
        let newLocale = currentLocale === 'en' ? 'ar' : 'en';
        let newUrl = '{{ LaravelLocalization::getLocalizedURL(newLocale, null, [], true) }}';
        window.location.href = newUrl;
    });
</script>

في هذا الكود، قمنا بإضافة معرف id للرابط الخاص بالأيقونة وإزالة السمة hreflang والسمة href، حيث سنقوم بتعيين الرابط من دالة JavaScript. ثم قمنا بإنشاء دالة تستمع لحدث النقر على الرابط. عند النقر، تقوم بتحديد اللغة الجديدة التي نريد التبديل إليها بناءً على اللغة الحالية، وتعيين الرابط المقابل للغة الجديدة، وأخيراً إعادة توجيه المستخدم إلى هذا الرابط.

بهذا الحل، يمكن للمستخدمين تبديل اللغة بالضغط على الأيقونة نفسها.