احتمالاً اگر فروشگاه ووکامرسی دارید در قسمت هایی مثل فیلد انتخاب تعداد محصول مورد سفارش با پیام های پیشفرض HTML که توسط مرورگر نمایش داده می شوند مواجه شدید. در اکثر موارد چنین چیزی مشکل ساز نیست اما در مورد کاربران ایرانی دیدن پیام های انگلیسی از قبیل « value must be less than or equal to » و یا « please select a value that is no more than» آن هم در سایت های فارسی زبان اندکی نامتناسب و ناپخته بنظر می رسد. راه حل ما برای فارسی سازی این بخش استفاده از JavaScript برای جایگزینی این پیام ها با پیام فارسیست.
آشنایی با اعتبار سنجی HTML در مرورگر
در کدنویسی های وبسایت می توان برخی اعتبار سنجی های فرم های موجود را در سمت کاربر انجام دهیم البته نباید این فیلد ها از لحاظ امنینی حساس باشند. برای مثال در صفحه محصول ووکامرس شما می توانید تعداد دلخواه خود را برای خرید محصول انتخاب کنید این فیلد چیزی شبیه کد زیر است:
<input name="quantity" type="number" min="1" max=20" required>
در کد بالا مرورگر کاربر چک خواهد کرد که عدد وارد شده توسط کاربر حتما بین 1 تا 20 باشد، نوع آن عدد باشد و این فیلد اجباری نیز می باشد. پس هر کدام از این شروط توسط کاربر رعایت نشود یک پیام خطا از سمت مرورگر نمایش داده خواهد شد این پیام را می توانیم به کمک متد setCustomValidity تغییر دهیم برای انجام می توانید کد های قالبتان را ویرایش کنید اما این کار چندان پیشنهاد نمی شود و در این مقاله نیز توضیح داده نخواهد شد، پیشنهاد این است که از JS کمک بگیریم به کد زیر توجه کنید:
// Get the input element by id
var quantityInput = document.getElementsByName("quantity")[0];
// Add an event listener for the invalid event
quantityInput.addEventListener("invalid", function (e) {
// If the input is invalid, set the custom message
if (!quantityInput.validity.valid) {
quantityInput.setCustomValidity("تعداد وارد شده با تعداد موجودی انبار مطابقت ندارد");
}
});
// Add an event listener for the input event
quantityInput.addEventListener("input", function (e) {
// If the input is valid, clear the custom message
if (quantityInput.validity.valid) {
quantityInput.setCustomValidity("");
}
});
در کد بالا نرم افزاری که نوشتیم پس از پیدا کردن فیلد تعداد محصولات در صورتی که خطایی رخ داده باشد آن خطا را با متن دلخواه «تعداد وارد شده با تعداد موجودی انبار مطابقت ندارد» جایگزین می کند.
این کد را در بخش Custom JS قالب قرار دهید و یا در کد های فوتر قالب خود در میان تگ <script> قرار دهید.
بدون دیدگاه