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

جستجوی ایجکسی در ووکامرس

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

برای ایجاد سایتهای فروشگاهی با استفاده از وردپرس و پلاگین ووکامرس و همچنین افزودن ویژگی ها و امکانات جدید به سایت ، میتوان از ابزارهای مختلفی استفاده کرد به عنوان مثال برای ایجاد امکان جستجوی ایجکسی در ووکامرس میتوان از پلاگین 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 جستجو را تعیین کنید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بعد از نصب ، فعالسازی و پیکربندی افزونه 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

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

صفحه افزونه

خرید محصولات حرفه ای وردپرس
آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

443,673 نفر

دیدگاهتان را بنویسید

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 4 سال عضو همیار وردپرس

    سلام.
    دکمه “صفحه افزونه” به صفحه مورد نظر نمی‌رود.

  2. من می خوام رنگ دکمه جستو جو رو تغییر بدم و همچنین سایه کادر و دکمه را برداررم ولی نمیدونم از کجا باید تغییرات بدم
    تقریبا رنکه تکت اجزای فرم سرچ رو عوض کردم ولی دکمه سرچ و سایه کادر رو نمی تونم پیدا کنم لطفا راهنمایی کنید فقط بگید کدش کجاست کفایت می کنه می تونم تغییرش بدم تشکر

  3. سلام
    من طراح سایت هستم
    دنبال یک افزونه جستجو برای ورد پرس هستم که چند فیلد جستجو مثل سایت برامون ایجاد کنه.
    ممکنه راهنمایی بفرمایید؟

  4. 5 سال عضو همیار وردپرس

    سلام.
    این افزونه برای من کار نمیکنه. در جواب یکی از کاربران گفتید که “باید بررسی کنید که با قالبتون سازگار باشه. ممکنه ناسازگاری داره و عمل نمیکنه” . من با چند تا قالب تست کردم و روی هیچکدام کار نمیکنه. قالب های Boemia Free ، Storefront ، دوهزاروهفده که روی هیچ کدام عمل نکرد.
    تنظیم افزونه روی 3 کاراکتر هست و وقتی در فیلد جستجو سه تا کاراکتر وارد می کنم فقط لودینگ در قسمت چپ می چرخه و هیچ نتیجه ای نشان داده نمیشه.
    وردپرس 4.7.4 و ووکامرس نگارش 3.0.6 و نگارش افزونه جستجو هم 1.5.3 هستند.
    ممنون میشم کمک کنید.

  5. سلام مطلب خیلی مفیدی بود ، من دقیقا دنبال همچنین افزونه ای بودم !

    می شه یک افزونه بگویید که برای وردپرس و ووکامرس همین کار رو انجام بده

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

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

  6. دروود یه سوال سخت من این پلاگینو (YITH WooCommerce Ajax Search) نصب کردم ولی میخاستم ببینم چطور میشه یه خرد تو کداش دست کاری کرد و نوشته ای که تو سرچ مینویسیم با عکس بیاد فقط نگین فلان پلاگینو نصب کن اون پلاگینا به درد کار من نمیخرن اخه سایتم فروشگاهی میخام طرف کلمه رو که مینویس با عکس بیاد و همش تو یه صفحه بیاد به حالت ووکامرزی عین اموزن یا دیجیکالا..

  7. 7 سال عضو همیار وردپرس

    سلام
    این افزونه رو نصب و فعال کردم ولی کار نمیکنه
    یعنی موقع سرچ بعد از تایپ 3 کاراکتر هیچ اتفاقی نمیفته

    • 9 سال عضو همیار وردپرس

      سلام
      تنظیماتش رو روی 3 کاراکتر ست کردید ؟

    • 7 سال عضو همیار وردپرس

      سلام بله

    • 9 سال عضو همیار وردپرس

      سلام
      باید بررسی کنید که با قالبتون سازگار باشه. ممکنه ناسازگاری داره و عمل نمیکنه

  8. از اینکه این مطلب را اب ما به اشتراک گذاشتید متشکرم

    • سلام من محصول جزیره وردپرس شما را خریدم و راضی بودم خیلی عالی بود

  9. کار شما عالیه – خسته نباشید

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

    • 8 سال عضو همیار وردپرس

      با سلام وقتی کاربر یکبار اطلاعات رو قبت میکنه میتونه تیک ثبت نام رو بزنه تا ثبت نام بشه و بعدا دیگه نیازی به وارد کردن اطلاعات نباشه.

  11. با سلام و تشکر از مطالب خوبتان ..
    ادرس لینک دانلود افزونه ارور ۴۰۴ میده..برطرف کنید…برای خودتون بده!!

    • 8 سال عضو همیار وردپرس

      با سلام و تشکر به دلیل تغییر سایت مشکلات کوچکی پیش اومده متشکرم که گفتید.

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

  13. راستی این افزونه مثل همون افزونه هست ؟ که الان در همیار وردپرس نصبه ؟

    • 8 سال عضو همیار وردپرس

      با سلام بله همین کار رو انجام میده.

  14. اقا مگه بیشتر وردپرسی ها نمی گند باید همیشه به روز رسانی کنید افزونه ها و قالب ها را ؟ پس چرا سایت که الان در فیلم بود ۵ تا افزونه به روز رسانی رسانی نشده داشت ؟ مشکلی برای امنیت نیست ؟

    • 8 سال عضو همیار وردپرس

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

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

  16. سلام
    ممنون از آموزشهای خوبتون
    این تنظیمات را هر کسی میتونه با یک سرچ تو گوگل پیدا کنه!
    الان کمبودی که در زمینه ووکامرس احساس میشه آموزش شخصی سازی ووکامرس هست
    اینکه چگونه ووکامرس رو با قالب خودمان ست کنیم
    خواهشا درباره این موضوع هم مطلب بزارید
    ممنون از شما دوستان زحمتکش وردپرسی

    • 8 سال عضو همیار وردپرس

      با سلام.در این مورد هم مطلب مینویسیم.

    • فدات بشم مرسی