جستجوی ایجکسی در محصولات سایت فروشگاهی ووکامرسی

امروزه با توجه به گشترش کسب و کار های اینترنتی، طراحی سایت علی الخصوص نوع فروشگاهی آن رونق گرفته است. از رایج ترین روش های طراحی سایت فروشگاهی استفاده از سیستم مدیریت محتوای وردپرس ویا همان افزونه ووکامرس است. برای ایجاد این سایت ها با ووکامرس، میتوان از ابزارهای مختلفی کمک گرفت. یکی از این ابزار ها، امکان ایجاد جستجوی ایجکسی ووکامرس است که برای این کار میتوانید از پلاگین FiboSearch – Ajax Search for WooCommerce استفاده کنید. در این مقاله از تیک4 قصد داریم آموزش هایی را در رابطه با موضوعات ذیل، در اختیار شما عزیزان قرار دهیم.

• چرا باید از جستجوی ایجکسی در ووکامرس استفاده کنیم؟
• روشهای ایجاد قابلیت جستجوی ایجکسی در ووکامرس

چرا باید از جستجوی ایجکسی در ووکامرس استفاده کنیم؟

مدیران انواع سایتهای فروشگاهی از همیشه از طراحان ساین انتظار داشته اند که سایتی جذاب و کاربرپسند برای کسب وکارشان طراحی کنند. تا محاطبین آن ها بتوانند تحت تاثیر ظاهر و عملکرد آن قرار گیرند. در واقع به دنبال این هستند که سایت امکان برقراری ارتباط و تعاملی سازنده با مخاطبین را به مدیران آن کسب وکار بدهد.

یکی از امکانات ضروری که باید در هر سایت فروشگاهی موجود باشد، قابلیت جستجو میان محصولات سایت فروشگاهی است تا کاربران بتوانند با استفاده از آن، به راحتی محصول مورد نظر خود را پیدا کنند و دچار سردرگمی در صفحات مختلف سایت نشوند. البته که افزونه ووکامرس وردپرس ویژگی جستجوی محصولات را به صورت پیشفرض در خود دارد. ولی این ویژگی از ایده‌آل مدیران سایت ها کمی فاصله دارد و برای اینکه مورد پسند مدیران این کسب و کار های اینترنتی قرار بگیرد میتوان ویژگی هایی را به آن اضافه کرد.

قابلیت جستجوی ایجکسی، از ویژگیهای ووکامرس است که اضافه کردن آن به بخش جستجوی سایت، به طور قطع تاثیر بسیار به سزایی بر تجربه کاربری مخاطبین سایت خواهد داشت. این تاثیر مثبت بر تجربه کاربری مخاطبین و همینطور رضایت مدیران سایت فروشگاهی، استفاده از ویژگی جستجوی ایجکسی را، برای هر سایت فروشگاهی ووکامرسی را الزامی می کند. علاوه بر ویژگی جستجوی Ajax ووکامرس، برای بهبود تجربه کاربری مخاطبین سایتهای فروشگاهی وردپرسی، ویژگی ها و امکانات دیگری را نیز می توان به سایت اضافه کرد. به عنوان مثال ویژگی جستجو میان محصولات بر اساس خصوصیات آن ها می تواند به بهبود تجربه کاربری مخاطبین بسیار کمک کند.

روشهای ایجاد قابلیت جستجوی ایجکسی در ووکامرس

به طور کلی برای ایجاد قابلیت جستجوی Ajax ووکامرس می توان از دو روش استفاده کرد. که در ادامه به معرفی این افزونه می پردازیم.

• ایجاد قابلیت جستجوی ایجکسی در ووکامرس با استفاده از پلاگین FiboSearch – Ajax Search for WooCommerce
• ایجاد قابلیت جستجوی ایجکسی در ووکامرس با استفاده از کدنویسی

ایجاد قابلیت جستجوی ایجکسی در ووکامرس با استفاده از پلاگین FiboSearch – Ajax Search for WooCommerce

از ساده ترین روش های ایجاد قابلیت جستجوی ایجکسی در ووکامرس ، استفاده از پلاگین محبوب و کاربردی FiboSearch – Ajax Search for WooCommerce با بیش از 100هزار نصب فعال، است. دارای دو نسخه پولی و رایگان است که برای استفاده از تمام ویژگی های آن باید نسخه پولی آن را تهیه کنید. به کمک این افزونه به محض اینکه کاربر کلمه یا عبارتی را در فیلد مربوطه جستجو کند، همه محصولاتی که شامل آن کلمه یا عبارت باشند زیر این فیلد لیست می شوند.

یکی از محبوب ترین خصوصیات افزونه FiboSearch – Ajax Search for WooCommerce، این است که محصولات نمایش داده شده در هنگام جستجو به صورت ایجکسی دریافت می شوند. یعنی پس از وارد کردن هر کلمه در بخش جستجوی محصولات، صفحه دوباره بارگذاری نمی شود و فقط اطلاعات آن بخش پس از دریافت در داخل صفحه سایت بروز می شوند. این موضوع باعث افزایش سرعت بروزرسانی صفحه و کارآیی بیشتر سایت می شود.

برای اضافه کردن امکان جستجوی ایجکسی در سایت با استفاده از این پلاگین باید مراحل زیر را مرحله به مرحله دنبال کنید.

مرحله اول : نصب پلاگین FiboSearch – Ajax Search for WooCommerce

برای نصب پلاگین Ajax Search for WooCommerce (FiboSearch) مشابه دیگر افزونه ها می توانید در داشبورد وردپرس از بخش افزونه ها یا همان plugins، نام این افزونه در داخل کادر جستجو بنویسید و آن را در میان افزونه های مخزن وردپرس جستجو کرده و نصب کنید.

روش دیگر نصب این افزونه این است که آن را از وردپرس و یاا سایت های دیگر دانلود کنید و به صورت دستی آن را در داشبورد وردپرس آپلود کنید و بعد از آپلود آن را نصب و فعالسازی نمایید.با استفاده از این لینک می توانید این افزونه را از سایت وردپرس دانلود کنید.

مرحله دوم : پیکربندی تنظیمات پلاگین FiboSearch – Ajax Search for WooCommerce

بعد از نصب و فعالسازی پلاگین FiboSearch – Ajax Search for WooCommerce ، نوبت به پیکربندی و تنظیمات این پلاگین کاربردی می رسد. پس از نصب و فعالسازی افزونه FiboSearch – Ajax Search for WooCommerce ، در منوی woocomerce در داشبورد وردپرس گزینه FiboSearch اضافه میشود که برای پیکربندی این پلاگین باید از این بخش اقدام کنید.

به بخش FiboSearch در داشبورد وردپرس بروید و مطابق شکل زیر روی تب search bar کلیک کنید. از این بخش همانطور که در شکل زیر می بینید دو ویژگی اولیه بخش جستجو را میتوانید تعیین کنید.

• از بخش “show submit button” میتوانید تعیین کنید که آیا دکمه جستجو یا همان ارسال قابل مشاهده باشد و یا مخفی.
• از بخش “search input placeholder” هم میتوانید متن اولیه و یا همان placeholder مربوط به کادر متنی یا همان textbox جستجو را تعیین کنید.

در تب Autocomplete هم میتوانید برخی دیگر از تنظیمات مربوط به این پلاگین وردپرس را انجام دهید. همانطور که در شکل زیر میبینید در تب Autocomplete میتوانید بخشهای زیر را تعیین کنید.

• از بخش limit میتوانید تعداد محصولات که به صورت ایجکسی نمایش داده میشوند را تعیین کنید.
• از بخش “no results label” میتوانید تعیین کنید که آیا در نمایش ایجکسی محصولات ، برچسب یا همان لیبل آنها هم نمایش داده شود یا خیر.
• از بخش “show product image” میتوانید تعیین کنید که آیا تصویر محصول هم در بخش نمایش ایجکسی محصول نمایش داده شود یا نه.
• از بخش “show price” هم میتوانید تعیین کنید آیا قیمت محصول در نمایش ایجکسی آن نمایش داده شود یا خیر.
• از بخش sku هم میتوانید تعیین کنید که آیا واحد محصول مورد نظر مثل عدد یا بسته نمایش داده شود یا نه.

در تب search config هم میتوانید تعیین کنید که جستجو برای نمایش ایجکسی در چه محدوده یا همان scope انجام شود.

• در این بخش میتوانیدتعیین کنید که جستجو در کدام یک از بخشهای توضیحات ، sku یا همان واحد محصول ، ویژگی ها یا attributes و کاستوم فیلدها انجام شود.
• از بخش fuzzy match هم میتوان نحوه نمایش محصولات مشابهی که دقیقا شامل آن عبارت جستجو نیستند ولی به نوعی مشابه آن محصولات هستند را تعیین کرد.

همان طوری که در تصاویر مشاهده می کنید بعضی از این تنظیمات غیرفعال هستند که با پرداخت هزینه و تهیه نسخه های پولی این افزونه می توانید ار آن ها استفاده کنید.

 نحوه اضافه کردن بخش جستجوی ایجکسی به سایت فروشگاهی ووکامرسی

بعد از نصب، فعالسازی و پیکربندی افزونه جستجوی FiboSearche برای افزودن امکان جستجوی ایجکسی در ووکامرس، نوبت به استفاده از این ویژگی در سایت می رسد که برای این کار میتوان از 3 روش استفاده کرد. که در ادامه در مورد هر یک از این روشها به صورت جداگانه توضیح خواهیم داد.

1. اضافه کردن بخش جستجوی ایجکسی به منو
2. اضافه کردن بخش جستجوی ایجکسی با استفاده از ابزارکها
3. اضافه کردن بخش جستجو با استفاده از شورتکدها

 اضافه کردن بخش جستجوی ایجکسی به منو سایت فهرستها (Menus)

یکی از روشهای قرار دادن بخش جستجوی ایجکسی ، استفاده از منوها است به این صورت که بخش جستجو را در انتهای منوی اصلی سایت خود قرار میدهید.

برای این منظور میتوانید کادر جستجوی ایجکسی را مشابه سایر بخشها به منوی سایت خود اضافه کنید.

همانطور که در تصویر زیر هم قابل مشاهده است میتوانید به راحتی از بخش منوها یا همان menus در بخش نمایش یا همان appearance سایت خود ، وقتی در حال افزودن صفحات مورد نظر خود به منوی سایت هستید بخش جستجوی ایجکسی را هم به آن منو اضافه کنید برای این کار کافی است در بخش Fibo search bar روی دکمه “افزودن به منو” کلیک کنید.

بعد از اضافه کردن بخش جستجوی ایجکسی به منو ، روی دکمه “ذخیره فهرست” کلیک کنید تا تغییراتی که ایجاد کرده اید ذخیره شوند.

اگر از این روش بخش جستجوی ایجکسی را به سایت خود اضافه کنید این بخش در منوی سایت شما مشابه تصویر زیر اضافه خواهد شد.

اضافه کردن بخش جستجوی ایجکسی با استفاده از ابزارکها یا ویجت ها (Widgets)

یکی دیگر از روشهای قرار دادن بخش جستجوی ایجکسی در داخل قالب سایت ، قرار دادن این بخش با استفاده از ابزارکها یا همان widgets در داخل سایدبار یا هر بخشی که برای قرار گرفتن ابزارکها در قالب سایت تعیین شده است میباشد.

برای این منظور کافی است مطابق شکل در داشبورد وردپرس خود از منوی نمایش یا همان appreance روی گزینه ابزارکها یا همان FiboSearch کلیک کنید و ابزاک Fibosearch bar را به سایدبار سایت خود یا هر محلی دیگری که برای قرار گرفتن ابزاکها تعیین شده است قرار دهید.

همانطور که در شکل بالا هم میبینید میتوانید برای کادر جستجوی خود با استفاده از این روش یک عنوان یا همان title تعیین کنید و حتی نوع لایه بندی نتایج جستجو را هم تعیین کنید.

بعداز اینکه بخش جستجوی ایجکسی را با استفاده از ابزارکها به سایت خود اضافه کردید روی دکمه save یا همان “ذخیره” کلیک کنید تا تغییراتی که ایجاد کرده اید ذخیره شوند.

با اضافه کردن جستجوی ایجکسی به سایدبار سایت خود با استفاده از ابزارکها ، مشابه شکل زیر امکان جستجوی ایجکسی در ووکامرس برای کاربران فراهم میشود.

اضافه کردن بخش جستجو در برگه های سایت با استفاده از شورتکدها (ShortCode)

در مواقعی شاید بخواهید بخش جستجوی ایجکسی را در داخل صفحات یا پستهای خود قرار دهید برای این منظور احتمالا استفاده از منوها و ابزارکها برای اضافه کردن بخش جستجوی ایجکسی کارآیی ندارد که در این مواقع میتوانید از کد کوتاه یا همان shortcode این افزونه استفاده کنید.

برای قرار دادن بخش جستجوی ایجکسی ووکامرس با استفاده از شورتکد کافی است در صفحه پست یا پیج خود روی علامت + کلیک کنید تا بتوانید المان جدید به آن صفحه یا پست اضافه کنید و شورتکد مربوط به بخش جستجوی خود را به راحتی به آن بلوک مطابق شکل زیر اضافه کنید.

در شکل بالا شورتکد کادر جستجوی ایجکسی برابر [wcas-search-form]  است که این مقدار در سایتهای مختلف قطعا متفاوت خواهد بود.

بعد از اینکه شورتکد مربوط به کادر جستجوی خود را به صفحه یا پست مورد نظر خود اضافه کردید روی دکمه save کلیک کنید تا تغییرات شما ذخیره شود.

با اضافه کردن کادر جستجوی ایجکسی به سایت ، این بخش مشابه شکل زیر به بخشی از صفحه یا پست که اضافه کرده اید افزوده میشود و کاربران با استفاده از آن به راحتی میتوانند در سایت فروشگاهی جستجو کنند و محصول مورد نظر خود را پیدا کنند.

ایجاد قابلیت جستجوی Ajax در ووکامرس با استفاده از کدنویسی

علاوه بر استفاده از پلاگین آماده FiboSearch – Ajax Search for WooCommerce میتوانید خودتان با استفاده از کدنویسی این ویژگی را به سایت فروشگاهی ووکامرسی اضافه کنید و در واقع به نوعی خودتان یک پلاگین مشابه افزونه FiboSearch ایجاد کنید. ایجاد ویژگی جستجوی ایجکسی و کدنویسی آن نیاز به دانش تخصصی برنامه نویسی وب دارد و برای افراد غیر متخصص کار دشواری است. ما هم فقط به معرفی پلاگین مربوطه بسنده میکنیم تا نیاز شما کاربران عزیز تا حدی مرتفع شود.

نتیجه گیری

در این مطلب از سایت تیک4 سعی داشتیم جستجوی Ajax محصولات در سایت فروشگاهی ووکامرسی را با افزونه FiboSearch آموزش دهیم. اگر تجربه استفاده از این پلاگین را دارید ویا اینکه برای این منظور از پلاگین های دیگری استفاده می کنید، میتوانید تجربیات خود را با دیگر کاربران در قسمت نظرات به اشتراک بگذارید. از اینکه تا انتهای مطلب همراه ما بودید سپاسگذاریم.