בניית מודל חיפוש (Search Modal) לאתרי WordPress עם תוכן חסום לחברים

רוב המדריכים לחיפוש ב-WordPress מסתיימים ברגע שמוסיפים ווידג'ט לכותרת (header).

זה לא עובד כשמדובר בתוכן חסום (gated content) כמו קורסים בתשלום או סרטונים פרטיים. חיפוש ברירת מחדל ידליף את הכותרות של החומר הפרטי שלך למבקרים שלא התחברו למערכת.

בניתי מודל חיפוש חי (live search modal) עבור אתר חברות (membership) של כושר. האתר משתמש ב-WordPress, WooCommerce, Divi, LearnDash ו-WishList Member.

הנה איך לבנות חיפוש שמכבד את חומת התשלום (paywall) שלך.

הארכיטקטורה

השתמשתי באינדקס מאוחד עם סינון מודע-הרשאות (access-aware filtering). בחרתי בזה כדי להבטיח שמשתמש שלא התחבר לעולם לא יראה כותרת או קטע מתוך פוסט המיועד לחברים בלבד.

ממשק המשתמש (UI) משתמש באייקון שפותח שכבת ריחף (overlay) במסך מלא. זה חוסך מקום בנייד ונראה נקי יותר מאשר שורת קלט צפופה.

ה-Backend

הכל רץ דרך נתיב REST מותאם אישית אחד ב-child theme.

כללים טכניים מרכזיים:

  • הגנה על תלויות (Guard dependencies): השתמש בבדיקת פונקציה עבור תוספי חיפוש כמו Relevanssi. אם התוסף חסר, החיפוש צריך לחזור לחיפוש הליבה של WordPress במקום לשבור את האתר.
  • סינון בצד השרת (Server-side filtering): לעולם אל תסנן תוצאות באמצעות JavaScript. אם תסתיר תוצאה בדפדפן, הנתונים כבר נמצאים בתגובת הרשת (network response). כל אחד עם DevTools יכול לראות אותם. סנן את הנתונים לפני שהשרת שולח את התגובה.
  • החרגת מטמון (Cache exclusion): עליך להחריג את נתיב ה-REST של החיפוש שלך מ-page caching. אם תשמור את התוצאות במטמון, חיפוש של חבר אחד עלול להוגש לאורח, מה שידליף תוכן פרטי.

ה-Frontend

צד הלקוח משתמש ב-vanilla JavaScript.

שלושה דברים שגורמים ל-UX לעבוד:

  • Debounce: המתן 250ms לאחר הקשה על מקש לפני שליחת בקשה. זה מונע עומס מיותר על השרת.
  • AbortController: בטל בקשות קודמות כאשר המשתמש ממשיך להקליד. זה מונע מתוצאות ישנות לדרוס תוצאות חדשות.
  • מצבי שגיאה (Error states): הצג הודעה ברורה אם ה-fetch נכשל. סמן טעינה (spinner) שמסתובב לנצח הוא UX גרוע.

הלקח מהמובייל

ניסיתי להזריק את כפתור החיפוש לתפריט הנייד של Divi. התבנית (theme) עצרה את הלחיצות, מה שהפך את הכפתור לבלתי ניתן ללחיצה.

הפתרון היה פשוט: הפסק להילחם בתבנית.

במקום לשים את הכפתור בתוך התפריט, הזרקתי אותו לכותרת (header) כאלמנט עצמאי. זה שמר עליו מחוץ לשליטה של התבנית והפך אותו לקל ללחיצה.

סיכום

  • בקרת גישה חייבת להתבצע בצד השרת.
  • החריג את נקודות הקצה (endpoints) של החיפוש מהמטמון שלך.
  • השתמש ב-debounce וב-AbortController לניהול בקשות.
  • בצע escape לכל נתוני ה-API לפני הזריקתו ל-DOM כדי למנוע XSS.
  • אם בונה דפים (page builder) מתנגד לקוד שלך, מקם את האלמנט שלך לצדו במקום בתוכו.

מקור: https://dev.to/highcenburg/building-a-search-modal-for-a-membership-gated-wordpress-site-b92