غلاقمندان به ووکامرس در ادامه سری مطالب آموزش ووکامرس رایگان به آموزش ایجاد جستجوی ایجکس ووکامرس خواهیم پرداخت، هم چنین میتوانید مقاله قبل با موضوع کاهش مراحل خرید در ووکامرس را نیز مطالعه نمائید.
آموزش ایجاد جستجوی ایجکس در ووکامرس
از مهمترین موارد برای وب سایت های فروشگاهی ، جستجوی پویا یا ایجکس است. در این مطلب به آموزش ایجاد جستجوی ایجکس در ووکامرس می پردازیم.
جستجوی ایجکس ووکامرس
در حالت پیشفرض در وب سایت های ووردپرس، قابلیت جستجوی پویا فعال نیست و کاربران باید پس از وارد کردن کلمه کلیدی مورد نظر و زدن دکمه اینتر یا کلیک بر روی جستجو، منتظر بمانند تا صفحه رفرش شود.
پس از اینکه صفحه رفرش شد، نتایج جستجو به کاربر نمایش داده خواهد شد. اما این کار چند ایراد دارد:
- صفحه باید مجددا بارگزاری شود یا کاربر به صفحه جدیدی هدایت شود که از نظر تجربه کاربری خوشایند نیست.
- اگر سرعت اینترنت کاربر پایین باشد زمان زیادی از اون هدر خواهد رفت.
- اگر کاربر کلمه کلیدی را اشتباه وارد کرده باشد باید منتظر بماند تا صفحه مجددا بارگزاری شود و او دوباره کلمه کلیدی خود را اصلاح کند.
- اگر تعداد جستجو های کاربر زیاد باشد زمان خیلی زیاد تری از او گرفته خواهد شد.
- بدون ایجکس کاربر از میزان هوشمندی جستجوگر سایت با خبر نخواهد بود و نمی داند باید به چه صورتی کلمه کلیدی مورد نظرش را وارد کند.
- بدون استفاده از تکنولوژی ایجکس، تعداد درخواست های بی اهمیت به سرور بیشتر خواهد شد.
لزوم استفاده از جستجوی ایجکس در ووکامرس
- نیازی به رفرش شدن کل صفحه نیست.
- کاربر می تواند با وارد کردن چند حرف نتایجی را ببیند و از میزان هوشمندی جستجوگر سایت با خبر شود.
- همچنین ممکن است لازم نباشد کاربر همه عبارت مورد نظرش را کاملا تایپ کند.
- اگر جستجوی پویا از سرعت خوبی برخوردار باشد، می تواند حس کاربری خوبی را به کاربران سایت منتقل کند.
ایجکس چیست؟
ایجکس یا AJAX که مخفف کلمه Asynchronous JavaScript And XML است. ایجکس در سمت کاربر (Client-side) و ÷با کدهای جاوا اسکریپت فراخوانی می شود و به سمت سرور (Server-side) درخواست های HTTP ارسال می کند.
مزایای ایجکس:
- دریافت و خواند اطلاعات از سمت سرور، پس از اینکه صفحه لود شده است
- آپدیت محتوای صفحه، بدون رفرش صفحه
- ارسال اطلاعات به سرور در پس زمینه
نمونه یک درخواست Ajax:
var ajaxRequest = new XMLHttpRequest()
ajaxRequest.open(“GET” , “https://elinweb.site/robots.txt”)دستور بالا با استفاده از AJAX یک درخواست HTTP به سرور Elinweb.site ارسال می کند و درخواست دریافت فایل robots.txt را می کند.
حالا با محتوای این فایل چه کاری باید انجام شود بستگی به کدهای بعدی ما خواهد داشت. می توانیم آن ها را نمایش دهیم، می توانیم در سیستم کاربر ذخیره کنیم و یا کارهای دیگری انجام دهیم.
ایجاد جستجوی ایجکس در ووکامرس
خب تا حدودی با ایجکس و مزایای آن آشنا شدیم. و متوجه شدیم که ایجکس فقط مخصوص ایجاد جستجوی پویا نیست. یک نمونه دیگر از کاربردهای ایجکس در وب سایت های فروشگاهی، استفاده از فیلتر محصولات است.
مرحله اول – نصب افزونه FiboSearch – Ajax Search for WooCommerce
اما برای ایجاد جستجوی ایجکس در ووکامرس، ما این کار را با افزونه های وردپرس انجام خواهیم داد. افزونه ای که برای ایجاد جستجوی ایجکس در ووکامرس استفاده می کنیم، افزونه AJAX Search for Woocommerce نام دارد.
افزونه Ajax Search for Woocommerce با نام جدید FiboSearch – Ajax Search for WooCommerce از بهترین افزونه های ایجاد جستجوی پویا برای وب سایت ها فروشگاهی ووکامرسی است.
مرحله دوم – قراردادن فرم جستجوی ایجکس در سایت
وارد مسیر ووکامرس > FiboSearch شوید. در این صفحه ۴ روش برای استفاده از جستجوی ایجکس در ووکامرس قرار داده شده است:
- استفاده از بخش فهرست ها در وردپرس (قرار دادن در منو)
- استفاده از شورت کد [FiboSearch]
- استفاده از ابزارک جستجوی پویا
- استفاده از قطعه کد php در قالب سایت
در آموزش ایجاد جستجوی ایجکس در ووکامرس ما با استفاده از روش اول یعنی فهرست ها، به ایجاد جستجوی ایجکس در ووکامرس می پردازیم.
از مسیر نمایش > فهرست ها بخش FiboSearch bar ، این آیتم را به منوی اصلی اضافه کنید.
پس از اضافه شدن آیتم می توانید استایل نمایش آن در منوی سایت را مشخص کنید:
ما ظاهر نمایشی پیشفرض یا Default استفاده می کنیم.
مرحله سوم – تغییر متن درون فیلد جستجوی ایجکس ووکامرس
به تنظیمات افزونه بر می گردید و وارد تب Search bar شوید. در این بخش می توانید متن درون فیلد جستجو یا همان Placeholder را تغییر دهید.
مرحله چهارم – تنظیمات نتایج جستجوی ایجکس ووکامرس
وارد تب Autocomplete شوید. در اینجا تعیین می کنیم که چه تعداد نتایج جستجو به کاربران نمایش داده شود. همچنین می توانیم مشخص کنیم نتایج محدود به محصولات شود یا دسته بندی ها هم نمایش داده شود.
در تب بعدی یعنی تب Seach Config می توانید تعیین کنید که آیا جستجو در توضیحات محصول انجام شود و اینکه آیا محصولات ناموجود هم در نتایج نمایش داده شود یا خیر.
خروجی نهایی پس از ایجاد جستجوی ایجکس در ووکامرس
جمع بندی
در صورتی که از وضعیت جستجوی ایجکس راضی نیستید می توانید با استفاده از تنظیمات افزونه و همچنین کدهای CSS ظاهر بخش جستجوی پویا را در سایتتان بهبود ببخشید.
امیدواریم آموزش ایجاد جستجوی ایجکس در ووکامرس برای شما مفید باشید. در صورتی که سوالی دارید در بخش نظرات برای ما مطرح کنید.
