راه‌اندازی فروشگاه اینترنتی: جستجوی ایجکسی در ووکامرس

امروزه با گسترش کسب وکارهای اینترنتی ، طراحی انواع سایتها به ویژه سایتهای فروشگاهی به شدت رونق گرفته است که یکی از رایجترین روشهای طراحی سایت فروشگاهی استفاده از سیستم مدیریت محتوای وردپرس و افزونه ووکامرس مربوط به وردپرس است.

برای ایجاد سایتهای فروشگاهی با استفاده از وردپرس و پلاگین ووکامرس و همچنین افزودن ویژگی ها و امکانات جدید به سایت ، میتوان از ابزارهای مختلفی استفاده کرد به عنوان مثال برای ایجاد امکان جستجوی ایجکسی در ووکامرس میتوان از پلاگین ajax search for woocomerce استفاده کرد که در این محتوا ما در مورد این موضوع با شما عزیزان صحبت خواهیم کرد.

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

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

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

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

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

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

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

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

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

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

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

• ایجاد قابلیت جستجوی ایجکسی در ووکامرس با استفاده از پلاگین ajax search for woocomerce
• ایجاد قابلیت جستجوی ایجکسی در ووکامرس با استفاده از کدنویسی

که در ادامه این محتوا در مورد هر یک از این روشها به طور جداگانه با شما صحبت خواهیم کرد.

ایجاد قابلیت جستجوی ایجکسی در ووکامرس با استفاده از پلاگین ajax search for woocomerce

بهترین و ساده ترین روش ایجاد قابلیت جستجوی ایجکسی در ووکامرس ، استفاده از پلاگین محبوب و کاربردی ajax search for woocomerce است که این پلاگین وردپرس در حال حاضر بیش از 100 هزار نصب فعال دارد.

این پلاگین وردپرس دارای دو نسخه رایگان و پولی است که برای استفاده از همه ویژگی های این افزونه کاربردی ووکامرس باید نسخه پولی آن را خریداری کنید.

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

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

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

مرحله اول : نصب پلاگین ajax search for woocomerce

برای نصب پلاگین ajax search for woocomerce میتوان مثل نصب هر افزونه دیگری اقدام کرد یعنی میتوان در داشبورد وردپرس از بخش افزونه ها یا همان plugins ، در داخل کادر جستجو این پلاگین را جستجو کرد و بعد از پیدا کردن آن در مخزن وردپرس آن را نصب و فعال سازی کرد.

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

مرحله دوم : پیکربندی تنظیمات افزونه ajax search for woocomerce

بعد از نصب و فعالسازی پلاگین ajax search for woocomerce ، نوبت به پیکربندی تنظیمات این پلاگین کاربردی میرسد.

بعد از نصب و فعالسازی پلاگین ajax search for woocomerce ، در منوی woocomerce در داشبورد وردپرس گزینه ajax search bar اضافه میشود که برای پیکربندی این پلاگین باید از این بخش اقدام کنید.

به بخش ajax search bar در داشبورد وردپرس بروید و مطابق شکل زیر روی تب search bar کلیک کنید.

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

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

از بخش submit label میتوانید لیبل یا همان برچسب دکمه جستجو را تعیین کنید.

از بخش “search input placeholder” هم میتوانید متن اولیه و یا همان placeholder مربوط به کادر متنی یا همان textbox جستجو را تعیین کنید.

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

همانطور که در شکل زیر میبینید در تب Autocomplete میتوانید بخشهای زیر را تعیین کنید.

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

از بخش “no results label” میتوانید تعیین کنید که آیا در نمایش ایجکسی محصولات ، برچسب یا همان لیبل آنها هم نمایش داده شود یا خیر.

از بخش “show product image” میتوانید تعیین کنید که آیا تصویر محصول هم در بخش نمایش ایجکسی محصول نمایش داده شود یا نه.

از بخش “show price” هم میتوانید تعیین کنید آیا قیمت محصول در نمایش ایجکسی آن نمایش داده شود یا خیر.

از بخش sku هم میتوانید تعیین کنید که آیا واحد محصول مورد نظر مثل عدد یا بسته نمایش داده شود یا نه.

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

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

از بخش fuzzy match هم میتوان نحوه نمایش محصولات مشابهی که دقیقا شامل آن عبارت جستجو نیستند ولی به نوعی مشابه آن محصولات هستند را تعیین کرد.

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

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

بعد از نصب ، فعالسازی و پیکربندی افزونه ajax search for woocommerce برای افزودن امکان جستجوی ایجکسی در ووکامرس ، نوبت به اضافه کردن آن به بخش مورد نظر شما در داخل سایت میرسد که برای این کار میتوان از 3 روش استفاده کرد.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

علاوه بر استفاده از پلاگین آماده ajax search for woocommerce میتوانید خودتان با استفاده از کدنویسی این ویژگی را به سایت فروشگاهی  ووکامرسی اضافه کنید و در واقع به نوعی خودتان یک پلاگین مشابه افزونه ajax search for woocommerce ایجاد کنید.

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

نتیجه گیری

در این محتوا در ادامه مجموعه محتواهای آموزش ووکامرس ، در مورد ایجاد امکان جستجوی ایجکسی در ووکامرس با شما صحبت کردیم و دلایل ایجاد این ویژگی در سایت ووکامرسی و همینطور روشهای ایجاد آن را به شما آموزش دادیم.

دانلود افزونه  YITH WooCommerce Ajax Search

دانلود افزونه

صفحه افزونه