മെമ്പർഷിപ്പ് നിയന്ത്രിത (Membership-Gated) WordPress സൈറ്റുകൾക്കായി ഒരു സെർച്ച് മോഡൽ നിർമ്മിക്കാം

മിക്ക WordPress സെർച്ച് ട്യൂട്ടോറിയലുകളും ഒരു ഹെഡറിൽ വിഡ്ജറ്റ് ചേർക്കുന്നതോടെ അവസാനിക്കുന്നു.

പെയ്ഡ് കോഴ്സുകൾ അല്ലെങ്കിൽ സ്വകാര്യ വീഡിയോകൾ പോലുള്ള നിയന്ത്രിത ഉള്ളടക്കങ്ങൾ (gated content) ഉള്ളപ്പോൾ ഇത് പരാജയപ്പെടുന്നു. ഒരു ഡിഫോൾട്ട് സെർച്ച്, ലോഗിൻ ചെയ്യാത്ത സന്ദർശകർക്ക് നിങ്ങളുടെ സ്വകാര്യ ഉള്ളടക്കങ്ങളുടെ തലക്കെട്ടുകൾ കാണാൻ ഇടയാക്കും.

ഒരു ഫിറ്റ്‌നസ് മെമ്പർഷിപ്പ് സൈറ്റിനായി ഞാൻ ഒരു ലൈവ് സെർച്ച് മോഡൽ നിർമ്മിച്ചു. ഈ സൈറ്റ് WordPress, WooCommerce, Divi, LearnDash, WishList Member എന്നിവ ഉപയോഗിക്കുന്നു.

നിങ്ങളുടെ പേവാൾ (paywall) മാനിച്ചുകൊണ്ട് എങ്ങനെ ഒരു സെർച്ച് സംവിധാനം നിർമ്മിക്കാം എന്ന് നോക്കാം.

ആർക്കിടെക്ചർ (The Architecture)

ആക്സസ് അറിവുള്ള ഫിൽട്ടറിംഗോട് (access-aware filtering) കൂടിയ ഒരു യൂണിഫൈഡ് ഇൻഡക്സ് ആണ് ഞാൻ ഉപയോഗിച്ചത്. ലോഗിൻ ചെയ്യാത്ത ഒരു ഉപയോക്താവിന് മെമ്പർമാർക്ക് മാത്രമുള്ള പോസ്റ്റുകളുടെ തലക്കെട്ടോ സംഗ്രഹമോ (excerpt) ഒരിക്കലും കാണാൻ കഴിയില്ലെന്ന് ഉറപ്പാക്കാനാണ് ഞാൻ ഇത് തിരഞ്ഞെടുത്തത്.

ഒരു ഫുൾ സ്ക്രീൻ ഓവർലേ തുറക്കുന്ന ഒരു ഐക്കൺ ആണ് ഇതിന്റെ UI ഉപയോഗിക്കുന്നത്. ഇത് മൊബൈലിൽ സ്ഥലം ലാഭിക്കാനും ഇടുങ്ങിയ ഇൻപുട്ട് ബാറിനേക്കാൾ വൃത്തിയുള്ള രൂപം നൽകാനും സഹായിക്കുന്നു.

ബാക്കെൻഡ് (The Backend)

എല്ലാം ഒരു ചൈൽഡ് തീമിലെ (child theme) ഒരൊറ്റ കസ്റ്റം REST റൂട്ടിലൂടെയാണ് പ്രവർത്തിക്കുന്നത്.

പ്രധാന സാങ്കേതിക നിയമങ്ങൾ:

  • ഡിപെൻഡൻസികൾ സംരക്ഷിക്കുക (Guard dependencies): Relevanssi പോലുള്ള സെർച്ച് പ്ലഗിനുകൾക്കായി ഒരു ഫംഗ്ഷൻ ചെക്ക് ഉപയോഗിക്കുക. പ്ലഗിൻ ഇല്ലെങ്കിൽ, സൈറ്റ് തകരാറിലാകുന്നതിന് പകരം സെർച്ച് കോർ WordPress-ലേക്ക് മാറണം.
  • സെർവർ സൈഡ് ഫിൽട്ടറിംഗ് (Server-side filtering): ഒരിക്കലും JavaScript ഉപയോഗിച്ച് ഫലങ്ങൾ ഫിൽട്ടർ ചെയ്യരുത്. നിങ്ങൾ ബ്രൗസറിൽ ഒരു റിസൾട്ട് മറച്ചുവെച്ചാലും, ആ ഡാറ്റ നെറ്റ്‌വർക്ക് റെസ്പോൺസിൽ ഉണ്ടാകും. DevTools ഉപയോഗിക്കുന്ന ആർക്കും അത് കാണാൻ കഴിയും. സെർവർ റെസ്പോൺസ് അയക്കുന്നതിന് മുമ്പ് ഡാറ്റ ഫിൽട്ടർ ചെയ്യുക.
  • കാഷെ ഒഴിവാക്കുക (Cache exclusion): നിങ്ങളുടെ സെർച്ച് REST റൂട്ടിനെ പേജ് കാഷിംഗിൽ (page caching) നിന്ന് ഒഴിവാക്കണം. നിങ്ങൾ റിസൾട്ടുകൾ കാഷെ ചെയ്താൽ, ഒരു മെമ്പറുടെ സെർച്ച് റിസൾട്ട് ഒരു ഗസ്റ്റിന് ലഭിക്കാനും അതുവഴി സ്വകാര്യ ഉള്ളടക്കം ചോരാനും സാധ്യതയുണ്ട്.

ഫ്രണ്ട്‌എൻഡ് (The Frontend)

ക്ലയന്റ് സൈഡിൽ vanilla JavaScript ആണ് ഉപയോഗിക്കുന്നത്.

UX മികച്ചതാക്കാൻ മൂന്ന് കാര്യങ്ങൾ സഹായിക്കുന്നു:

  • Debounce: ഒരു കീ സ്ട്രോക്കിന് ശേഷം റിക്വസ്റ്റ് അയക്കുന്നതിന് മുമ്പ് 250ms കാത്തിരിക്കുക. ഇത് അനാവശ്യമായ സെർവർ ലോഡ് ഒഴിവാക്കുന്നു.
  • AbortController: ഉപയോക്താവ് ടൈപ്പ് ചെയ്തുകൊണ്ടേയിരിക്കുമ്പോൾ പഴയ റിക്വസ്റ്റുകൾ റദ്ദാക്കുക. ഇത് പഴയ റിസൾട്ടുകൾ പുതിയവയെ മറികടക്കുന്നത് തടയുന്നു.
  • എറർ സ്റ്റേറ്റുകൾ (Error states): ഫെച്ച് (fetch) പരാജയപ്പെട്ടാൽ വ്യക്തമായ സന്ദേശം കാണിക്കുക. ഒരിക്കലും നിൽക്കാത്ത ഒരു സ്പിന്നിംഗ് ലോഡർ മോശം UX ആണ്.

മൊബൈൽ പാഠം (The Mobile Lesson)

Divi മൊബൈൽ മെനുവിൽ സെർച്ച് ബട്ടൺ ഉൾപ്പെടുത്താൻ ഞാൻ ശ്രമിച്ചു. എന്നാൽ തീം ക്ലിക്കുകളെ തടഞ്ഞതുകൊണ്ട് ബട്ടൺ ക്ലിക്ക് ചെയ്യാൻ സാധിച്ചില്ല.

പരിഹാരം ലളിതമായിരുന്നു: തീമിനോട് പൊരുതുന്നത് നിർത്തുക.

ബട്ടൺ മെനുവിനുള്ളിൽ വെക്കുന്നതിന് പകരം, ഹെഡറിൽ ഒരു സ്റ്റാൻഡ്‌ലോൺ എലമെന്റായി (standalone element) ഞാൻ ഉൾപ്പെടുത്തി. ഇത് തീമിന്റെ നിയന്ത്രണത്തിന് പുറത്തായിരിക്കാനും എളുപ്പത്തിൽ ടാപ്പ് ചെയ്യാനും സഹായിച്ചു.

സംഗ്രഹം (Summary)

  • ആക്സസ് കൺട്രോൾ സെർവറിൽ തന്നെ നടക്കണം.
  • സെർച്ച് എൻഡ്‌പോയിന്റുകളെ കാഷെയിൽ നിന്ന് ഒഴിവാക്കുക.
  • റിക്വസ്റ്റുകൾ കൈകാര്യം ചെയ്യാൻ debounce, AbortController എന്നിവ ഉപയോഗിക്കുക.
  • XSS തടയുന്നതിനായി എല്ലാ API ഡാറ്റയും DOM-ലേക്ക് ചേർക്കുന്നതിന് മുമ്പ് എസ്‌കേപ്പ് (escape) ചെയ്യുക.
  • ഒരു പേജ് ബിൽഡർ നിങ്ങളുടെ കോഡിനെ തടയുന്നുണ്ടെങ്കിൽ, അതിനുള്ളിൽ വെക്കുന്നതിന് പകരം അതിന് അടുത്തായി നിങ്ങളുടെ എലമെന്റ് നൽകുക.

Source: https://dev.to/highcenburg/building-a-search-modal-for-a-membership-gated-wordpress-site-b92