كيفية إنشاء متجر متعدد اللغات في يوكان مع كود ترجمة جاهز للنسخ
إعلان استضافة مواقع رقم 1 عالمياً بثمن رخيص احصل على تخفيضات كبيرة وابدأ مشروعك الآن! احصل على العرض أصبح إنشاء متجر متعدد اللغات في يوكان خطوة مهمة لأي صاحب متجر إلكتروني يريد الوصول إلى عملاء من أسواق مختلفة، خصوصًا إذا كان يستهدف المغرب أو الدول العربية أو فرنسا أو الزوار الناطقين باللغة الإنجليزية. فالمتجر الذي […]
اقرأ الدليل خطوة بخطوة
أصبح إنشاء متجر متعدد اللغات في يوكان خطوة مهمة لأي صاحب متجر إلكتروني يريد الوصول إلى عملاء من أسواق مختلفة، خصوصًا إذا كان يستهدف المغرب أو الدول العربية أو فرنسا أو الزوار الناطقين باللغة الإنجليزية. فالمتجر الذي يظهر للزائر بلغته يمنح تجربة استخدام أفضل، ويجعل العميل يفهم وصف المنتجات، أزرار الشراء، التصنيفات، سياسة الشحن، وطريقة الدفع دون تعقيد.
منصة YouCan تقدم نفسها كمنصة تجارة إلكترونية متكاملة تتيح للتجار إنشاء وإدارة متاجرهم بسهولة، مع أدوات تساعدهم على البيع وإدارة العمل التجاري عبر الإنترنت. (youcan.shop) لذلك، إذا كنت تملك متجرًا على يوكان وتريد جعله متاحًا بالعربية والفرنسية والإنجليزية، فيمكنك إضافة محدد لغة بسيط يظهر بجانب القائمة الرئيسية في الحاسوب وداخل القائمة الجانبية في الهاتف.
في هذا المقال ستتعرف على كيفية إنشاء متجر متعدد اللغات في يوكان باستخدام كود جاهز، مع شرح طريقة عمل إضافة الترجمة، وفصل كود CSS عن كود JavaScript، حتى يستطيع الزائر أو صاحب المتجر نسخه بسهولة ووضعه داخل المتجر.
لماذا تحتاج إلى متجر متعدد اللغات في يوكان؟
عندما يكون متجرك باللغة العربية فقط، فأنت تخاطب شريحة محددة من العملاء. لكن إذا أضفت الفرنسية والإنجليزية، فأنت توسع جمهورك بشكل كبير. في السوق المغربي مثلًا، كثير من العملاء يتصفحون المحتوى بالعربية أو الفرنسية، بينما قد تحتاج الإنجليزية إذا كنت تستهدف عملاء أجانب أو تريد إظهار متجرك بشكل أكثر احترافية.
إنشاء متجر متعدد اللغات في YouCan يساعدك على:
زيادة ثقة الزائر في المتجر، تحسين تجربة المستخدم، تقليل الأسئلة المتكررة حول المنتجات، رفع احتمالية إتمام الطلب، توسيع استهدافك الإعلاني، وتحسين قابلية المتجر للفهم لدى عملاء من لغات مختلفة.
لكن يجب أن نفرق بين نوعين من الترجمة. النوع الأول هو الترجمة التلقائية السريعة باستخدام Google Translate أو أدوات مشابهة، وهذا مناسب لمن يريد حلًا سريعًا وسهل التركيب. والنوع الثاني هو الترجمة الاحترافية اليدوية، حيث يتم إنشاء محتوى مخصص لكل لغة مع وصف منتجات وعناوين وصفحات محسنة للسيو. الترجمة اليدوية أفضل للسيو على المدى الطويل، لكن الترجمة التلقائية عملية جدًا كبداية.
هل يمكن ترجمة متجر يوكان تلقائيًا؟
نعم، يمكن إضافة زر ترجمة تلقائية إلى متجر يوكان باستخدام JavaScript وCSS. الفكرة بسيطة: نضيف عنصرًا مخفيًا خاصًا بـ Google Translate، ثم ننشئ زرًا أنيقًا بجانب القائمة الرئيسية يسمح للزائر باختيار اللغة. عند اختيار الفرنسية أو الإنجليزية، يتم تحويل محتوى الصفحة إلى اللغة المطلوبة. وعند اختيار العربية، يعود المتجر إلى لغته الأصلية.
وتعتمد أمثلة كثيرة على استخدام عنصر google.translate.TranslateElement لدمج Google Translate داخل صفحات الويب، مع إمكانية تخصيص طريقة عرض الزر أو إخفاء الواجهة الافتراضية وعرض واجهة مخصصة بدلًا منها. (GeeksforGeeks)
في حالة متجرك، اللغة الأصلية هي العربية، لأن كود الموقع يحتوي على:
<html dir="rtl" lang="ar">
وهذا يعني أن العربية ليست لغة يجب ترجمة المتجر إليها، بل هي اللغة الأساسية. لهذا السبب، عند الضغط على العربية داخل محدد اللغة، يجب حذف كوكي Google Translate وإعادة الصفحة إلى وضعها الأصلي، بدل محاولة ترجمتها إلى العربية مرة أخرى. هذا مهم جدًا لتجنب مشكلة شائعة، وهي أن المستخدم يختار العربية لكن الصفحة تبقى مترجمة إلى الإنجليزية أو تتحول بشكل غير صحيح.
أين يظهر زر تغيير اللغة في متجر يوكان؟
الكود التالي مصمم ليضيف محدد اللغة في مكانين:
في نسخة الكمبيوتر يظهر بجانب القائمة الرئيسية، أي بجانب روابط مثل الرئيسية، التصنيفات، المنتجات، أو أي عناصر موجودة في الهيدر.
في نسخة الهاتف يظهر داخل القائمة الجانبية التي تظهر عند الضغط على زر القائمة.
هذا يجعل الزر واضحًا للزائر ولا يزعج تصميم المتجر. كما أن التصميم متجاوب، ويظهر بشكل أنيق على الهاتف والحاسوب.
اللغات التي يدعمها الكود
الكود الحالي يدعم ثلاث لغات:
العربية: وهي اللغة الأصلية للمتجر.
الفرنسية: مناسبة للأسواق المغربية والفرنكوفونية.
الإنجليزية: مناسبة للزوار الدوليين أو المتاجر ذات الطابع العالمي.
يمكن لاحقًا إضافة لغات أخرى مثل الإسبانية أو الألمانية أو الإيطالية، لكن الأفضل أن تبدأ باللغات التي يحتاجها جمهورك فعلًا. كثرة اللغات دون حاجة قد تشتت الزائر وتؤثر على تجربة الاستخدام.
إقرا أيضا: طريقة إنشاء متجر إلكتروني في يوكان Youcan Shop في 2026
كود CSS الخاص بتصميم إضافة الترجمة
انسخ هذا الكود وضعه داخل خانة CSS أو داخل وسم <style> في المتجر:
<style>
.store-language-switcher {
position: relative;
display: inline-flex;
align-items: center;
margin-inline-start: 15px;
z-index: 9999;
font-family: inherit;
}
.store-language-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: #ffffff;
color: #000000;
border: 1px solid #e5e5e5;
border-radius: 999px;
padding: 7px 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.store-language-btn:hover {
border-color: var(--primary-color, #4A90E2);
}
.store-language-menu {
position: absolute;
top: calc(100% + 8px);
inset-inline-end: 0;
min-width: 150px;
background: #ffffff;
border: 1px solid #eeeeee;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
overflow: hidden;
display: none;
}
.store-language-switcher.active .store-language-menu {
display: block;
}
.store-language-option {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 10px 13px;
color: #000000;
background: #ffffff;
border: 0;
cursor: pointer;
font-size: 14px;
text-align: start;
}
.store-language-option:hover,
.store-language-option.active {
background: #f5f8ff;
color: var(--primary-color, #4A90E2);
font-weight: 700;
}
.mobile-language-wrapper {
padding: 12px 0;
}
.mobile-language-wrapper .store-language-switcher {
margin: 0;
width: 100%;
display: block;
}
.mobile-language-wrapper .store-language-btn {
width: 100%;
justify-content: space-between;
border-radius: 10px;
}
.mobile-language-wrapper .store-language-menu {
position: static;
margin-top: 8px;
width: 100%;
}
.goog-te-banner-frame,
.goog-te-gadget,
.goog-logo-link,
.goog-te-balloon-frame,
#goog-gt-tt {
display: none !important;
}
body {
top: 0 !important;
}
.skiptranslate {
display: none !important;
}
@media (max-width: 768px) {
.desktop-language-wrapper {
display: none !important;
}
}
[dir] button, [dir] input[type=submit] { padding: 10px 7px 7px 10px; } </style>
شرح وظيفة كود CSS
هذا الكود مسؤول فقط عن شكل إضافة الترجمة. فهو لا يترجم المتجر، بل يجعل زر اللغة يظهر بشكل احترافي ومنسق.
الكلاس .store-language-switcher يحدد مكان صندوق اختيار اللغة ويجعله قابلًا للظهور بجانب القائمة الرئيسية.
الكلاس .store-language-btn يصمم الزر الرئيسي الذي يظهر عليه رمز الكرة الأرضية واختصار اللغة مثل AR أو FR أو EN.
الكلاس .store-language-menu يصمم القائمة المنسدلة التي تحتوي على العربية والفرنسية والإنجليزية.
الكلاس .store-language-option يصمم كل خيار داخل القائمة.
أما جزء الموبايل مثل .mobile-language-wrapper فهو يجعل زر اللغة مناسبًا للقائمة الجانبية في الهاتف.
والجزء الخاص بـ .goog-te-banner-frame و .skiptranslate يخفي بعض العناصر الافتراضية الخاصة بـ Google Translate حتى لا تظهر واجهة غير جميلة فوق المتجر.
كود JavaScript الخاص بتشغيل الترجمة
قبل استخدام كود JavaScript، أضف هذا العنصر في الصفحة، ويفضل قبل كود JavaScript مباشرة:
<div id=”google_translate_element” style=”display:none;”></div>
ثم انسخ كود JavaScript التالي:
<script>
(function () {
const languages = {
ar: {
label: "العربية",
short: "AR",
dir: "rtl",
htmlLang: "ar"
},
fr: {
label: "Français",
short: "FR",
dir: "ltr",
htmlLang: "fr"
},
en: {
label: "English",
short: "EN",
dir: "ltr",
htmlLang: "en"
}
};
const originalLanguage = "ar";
const pageLanguage = document.documentElement.lang
? document.documentElement.lang.slice(0, 2).toLowerCase()
: originalLanguage;
const supportedDefault = languages[pageLanguage] ? pageLanguage : originalLanguage;
const savedLanguage = localStorage.getItem("store_selected_language") || supportedDefault;
function getCurrentLanguage() {
return localStorage.getItem("store_selected_language") || supportedDefault;
}
function setHtmlDirection(lang) {
const config = languages[lang] || languages.ar;
document.documentElement.setAttribute("lang", config.htmlLang);
document.documentElement.setAttribute("dir", config.dir);
if (document.body) {
document.body.setAttribute("dir", config.dir);
}
}
function deleteGoogleTranslateCookie() {
const hostname = location.hostname;
const rootDomain = hostname.split(".").slice(-2).join(".");
const domains = [
"",
hostname,
"." + hostname,
rootDomain,
"." + rootDomain
];
domains.forEach(function (domain) {
let cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;";
if (domain) {
cookie += " domain=" + domain + ";";
}
document.cookie = cookie;
});
}
function setGoogleTranslateCookie(lang) {
const hostname = location.hostname;
const rootDomain = hostname.split(".").slice(-2).join(".");
const cookieValue = "/" + originalLanguage + "/" + lang;
document.cookie = "googtrans=" + cookieValue + "; path=/;";
document.cookie = "googtrans=" + cookieValue + "; path=/; domain=" + hostname + ";";
document.cookie = "googtrans=" + cookieValue + "; path=/; domain=." + hostname + ";";
document.cookie = "googtrans=" + cookieValue + "; path=/; domain=" + rootDomain + ";";
document.cookie = "googtrans=" + cookieValue + "; path=/; domain=." + rootDomain + ";";
}
function createSwitcher(extraClass) {
const current = getCurrentLanguage();
const wrapper = document.createElement("div");
wrapper.className = "store-language-switcher " + (extraClass || "");
wrapper.innerHTML = `
<button class="store-language-btn" type="button" aria-label="تغيير اللغة">
<span>🌐</span>
<span class="current-language-label">${languages[current].short}</span>
<span>▾</span>
</button>
<div class="store-language-menu">
${Object.keys(languages).map(function (code) {
return `
<button
type="button"
class="store-language-option ${code === current ? "active" : ""}"
data-lang="${code}">
<span>${languages[code].label}</span>
<span>${languages[code].short}</span>
</button>
`;
}).join("")}
</div>
`;
wrapper.querySelector(".store-language-btn").addEventListener("click", function (event) {
event.stopPropagation();
wrapper.classList.toggle("active");
});
wrapper.querySelectorAll(".store-language-option").forEach(function (button) {
button.addEventListener("click", function () {
const selectedLanguage = this.getAttribute("data-lang");
changeLanguage(selectedLanguage);
});
});
document.addEventListener("click", function () {
wrapper.classList.remove("active");
});
return wrapper;
}
function updateSwitcherLabels(lang) {
document.querySelectorAll(".current-language-label").forEach(function (label) {
label.textContent = languages[lang].short;
});
document.querySelectorAll(".store-language-option").forEach(function (option) {
option.classList.remove("active");
if (option.getAttribute("data-lang") === lang) {
option.classList.add("active");
}
});
}
function insertLanguageSwitcher() {
const desktopMenu = document.querySelector(".desktop-bar .header-list");
const mobileMenu = document.querySelector(".side-navigation .navigation-list");
if (desktopMenu && !document.querySelector(".desktop-language-wrapper")) {
const desktopLi = document.createElement("li");
desktopLi.className = "desktop-language-wrapper";
desktopLi.appendChild(createSwitcher(""));
desktopMenu.appendChild(desktopLi);
}
if (mobileMenu && !document.querySelector(".mobile-language-wrapper")) {
const mobileLi = document.createElement("li");
mobileLi.className = "mobile-language-wrapper";
mobileLi.appendChild(createSwitcher(""));
mobileMenu.appendChild(mobileLi);
}
}
function triggerGoogleTranslate(lang) {
if (lang === originalLanguage) {
localStorage.setItem("store_selected_language", originalLanguage);
deleteGoogleTranslateCookie();
setHtmlDirection(originalLanguage);
const cleanUrl = window.location.pathname + window.location.search;
window.location.href = cleanUrl;
return;
}
deleteGoogleTranslateCookie();
setGoogleTranslateCookie(lang);
const translateCombo = document.querySelector(".goog-te-combo");
if (translateCombo) {
translateCombo.value = lang;
translateCombo.dispatchEvent(new Event("change"));
} else {
setTimeout(function () {
triggerGoogleTranslate(lang);
}, 500);
}
}
window.changeLanguage = function (lang) {
if (!languages[lang]) return;
localStorage.setItem("store_selected_language", lang);
setHtmlDirection(lang);
updateSwitcherLabels(lang);
if (lang === originalLanguage) {
triggerGoogleTranslate(originalLanguage);
return;
}
triggerGoogleTranslate(lang);
};
window.googleTranslateElementInit = function () {
new google.translate.TranslateElement({
pageLanguage: originalLanguage,
includedLanguages: "ar,fr,en",
autoDisplay: false
}, "google_translate_element");
setTimeout(function () {
const current = getCurrentLanguage();
if (current !== originalLanguage) {
triggerGoogleTranslate(current);
}
}, 800);
};
document.addEventListener("DOMContentLoaded", function () {
setHtmlDirection(savedLanguage);
insertLanguageSwitcher();
updateSwitcherLabels(savedLanguage);
});
const script = document.createElement("script");
script.src = "https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
document.body.appendChild(script);
})();
</script>
شرح وظيفة كود JavaScript
كود JavaScript هو الجزء الذي يجعل إضافة الترجمة تعمل فعليًا. في البداية يتم تعريف اللغات المتاحة داخل كائن اسمه languages. كل لغة تحتوي على اسمها، واختصارها، واتجاه الصفحة الخاص بها. العربية اتجاهها من اليمين إلى اليسار rtl، بينما الفرنسية والإنجليزية اتجاههما من اليسار إلى اليمين ltr.
المتغير originalLanguage يخبر الكود أن اللغة الأصلية للمتجر هي العربية. وهذا مهم جدًا لأن اختيار العربية يجب أن يلغي الترجمة ويعيد الصفحة إلى الأصل.
الدالة setHtmlDirection تغير خصائص lang و dir داخل الصفحة. عندما يختار الزائر العربية، يصبح اتجاه الصفحة من اليمين إلى اليسار. وعندما يختار الفرنسية أو الإنجليزية، يصبح الاتجاه من اليسار إلى اليمين.
الدالة deleteGoogleTranslateCookie تحذف كوكي الترجمة الخاص بـ Google Translate. هذه الدالة ضرورية لحل مشكلة بقاء الصفحة مترجمة حتى بعد اختيار العربية.
الدالة setGoogleTranslateCookie تضبط كوكي الترجمة عندما يختار الزائر الفرنسية أو الإنجليزية، وتخبر Google Translate أن الصفحة الأصلية عربية وأن اللغة المطلوبة هي الفرنسية أو الإنجليزية.
الدالة createSwitcher تنشئ زر اختيار اللغة والقائمة المنسدلة.
الدالة insertLanguageSwitcher تضيف الزر بجانب القائمة الرئيسية في الكمبيوتر وداخل القائمة الجانبية في الهاتف.
الدالة triggerGoogleTranslate تشغل الترجمة أو تلغيها حسب اللغة المختارة.
أما الدالة googleTranslateElementInit فهي المسؤولة عن تحميل Google Translate داخل الصفحة.
أين أضع الأكواد في متجر يوكان؟
لإضافة كود ترجمة متجر يوكان، يمكنك وضع كود CSS في المكان المخصص للأكواد داخل إعدادات المتجر أو داخل الهيدر إذا كان القالب يسمح بذلك. أما كود JavaScript فمن الأفضل وضعه قبل وسم </body> أو في خانة Custom JavaScript.
إذا كنت تستخدم لوحة تحكم يوكان، فابحث عن مكان إضافة الأكواد المخصصة في إعدادات القالب أو إعدادات المتجر. توجد شروحات عامة تشير إلى أن إعدادات اللغة في YouCan كانت متاحة من خلال قسم Store ثم Languages في بعض الواجهات، لكن طريقة الوصول قد تختلف حسب نسخة لوحة التحكم أو تحديثات المنصة. (YouCan Shop Tutorials)
هل هذه الطريقة جيدة للسيو؟
هذه الطريقة ممتازة كحل سريع لتحسين تجربة المستخدم، لكنها ليست الحل الأقوى للسيو الدولي. لأن Google Translate يترجم الصفحة للزائر مباشرة، لكنه لا ينشئ بالضرورة روابط منفصلة لكل لغة مثل /fr أو /en. إذا كنت تريد تصدر نتائج البحث في جوجل لكل لغة، فالأفضل على المدى الطويل إنشاء صفحات مترجمة حقيقية لكل لغة، مع عناوين ووصف ميتا وروابط داخلية وكلمات مفتاحية خاصة بكل سوق.
مع ذلك، إضافة محدد لغة في متجر يوكان مفيدة جدًا من ناحية تجربة المستخدم والتحويلات، خصوصًا إذا كنت تبيع منتجات لجمهور يتحدث العربية والفرنسية والإنجليزية. كما أنها تمنحك بداية عملية قبل الاستثمار في ترجمة احترافية كاملة.
نصائح لتحسين متجر يوكان متعدد اللغات
لكي تحصل على أفضل نتيجة من إنشاء متجر متعدد اللغات في يوكان، لا تعتمد فقط على الترجمة التلقائية. راجع أهم الصفحات يدويًا، خاصة الصفحة الرئيسية، صفحة المنتج، صفحة الدفع، صفحة الشحن، صفحة سياسة الاسترجاع، وصفحات الأسئلة الشائعة.
احرص أيضًا على ترجمة أسماء التصنيفات بطريقة مفهومة. فمثلًا كلمة “إلكترونيات” يجب أن تظهر بالفرنسية “Électronique” وبالإنجليزية “Electronics”. أما أزرار الشراء مثل “شراء الآن” فيجب أن تكون واضحة جدًا، لأن أي ترجمة غير دقيقة في زر الشراء قد تقلل معدل التحويل.
من الأفضل أيضًا اختبار المتجر بعد إضافة الكود. افتح الموقع من الهاتف والحاسوب، اختر الفرنسية، ثم الإنجليزية، ثم عد إلى العربية. إذا عادت العربية بشكل صحيح، فهذا يعني أن حذف كوكي الترجمة يعمل جيدًا.
أسئلة شائعة حول إنشاء متجر متعدد اللغات في يوكان
هل يمكن إنشاء متجر يوكان بثلاث لغات؟
نعم، يمكنك جعل متجر يوكان يدعم العربية والفرنسية والإنجليزية باستخدام كود ترجمة تلقائية، أو من خلال ترجمة الصفحات والمنتجات يدويًا إذا كنت تريد حلًا احترافيًا للسيو.
هل كود الترجمة يعمل على الهاتف؟
نعم، الكود يضيف زر اللغة داخل القائمة الجانبية في الهاتف، ويظهر بجانب القائمة الرئيسية في نسخة الكمبيوتر.
هل الترجمة التلقائية كافية للمتجر؟
الترجمة التلقائية كافية كبداية وتحسن تجربة الزائر، لكنها ليست بديلًا كاملًا عن الترجمة اليدوية الاحترافية، خصوصًا إذا كنت تريد تصدر نتائج البحث في كل لغة.
لماذا عند اختيار العربية تبقى الصفحة بالإنجليزية؟
لأن Google Translate قد يحتفظ بكوكي قديم اسمه googtrans. لذلك تم تعديل الكود حتى يحذف كوكي الترجمة عند اختيار العربية، ثم يعيد تحميل الصفحة باللغة الأصلية.
هل يمكن إضافة لغات أخرى؟
نعم، يمكن إضافة لغات أخرى داخل كائن languages وتحديث includedLanguages في كود Google Translate. لكن من الأفضل ألا تضيف إلا اللغات التي يحتاجها جمهورك.
خلاصة
إنشاء متجر متعدد اللغات في يوكان خطوة مهمة لكل صاحب متجر يريد تحسين تجربة العملاء وتوسيع جمهوره. باستخدام الكود السابق، يمكنك إضافة زر تغيير اللغة إلى متجر YouCan ودعم العربية والفرنسية والإنجليزية بسهولة، مع تصميم أنيق ومتجاوب يعمل على الهاتف والحاسوب.
الكود مقسم إلى CSS خاص بالتصميم وJavaScript خاص بتشغيل الترجمة، وهذا يجعل تركيبه وتعديله أسهل. وتذكر أن العربية في هذا المثال هي اللغة الأصلية للمتجر، لذلك عند اختيارها يتم إلغاء الترجمة والعودة إلى النسخة الأصلية، وليس ترجمة الصفحة مرة أخرى.
لأفضل نتيجة، استخدم هذا الكود كبداية، ثم اعمل لاحقًا على ترجمة الصفحات المهمة يدويًا وتحسينها للسيو، خاصة إذا كنت تريد الظهور في نتائج بحث جوجل بعبارات مثل: إنشاء متجر متعدد اللغات في يوكان، ترجمة متجر يوكان، إضافة اللغة الفرنسية لمتجر YouCan، وكود ترجمة متجر يوكان جاهز للنسخ.
