ಸದಸ್ಯತ್ವದ ಮೂಲಕ ನಿರ್ಬಂಧಿತ (Membership-Gated) WordPress ಸೈಟ್‌ಗಳಿಗಾಗಿ ಸರ್ಚ್ ಮಾಡಲ್ (Search Modal) ನಿರ್ಮಿಸುವುದು

ಹೆಚ್ಚಿನ WordPress ಸರ್ಚ್ ಟ್ಯುಟೋರಿಯಲ್‌ಗಳು ಹೆಡರ್‌ನಲ್ಲಿ ವಿಜೆಟ್ ಅನ್ನು ಸೇರಿಸಿದ ನಂತರವೇ ಕೊನೆಗೊಳ್ಳುತ್ತವೆ.

ಪಾವತಿಸಿದ ಕೋರ್ಸ್‌ಗಳು ಅಥವಾ ಖಾಸಗಿ ವಿಡಿಯೋಗಳಂತಹ ನಿರ್ಬಂಧಿತ ವಿಷಯಗಳು (gated content) ಇದ್ದಾಗ ಇದು ವಿಫಲವಾಗುತ್ತದೆ. ಡಿಫಾಲ್ಟ್ ಸರ್ಚ್ ವಿಧಾನವು ಲಾಗ್-ಔಟ್ ಆಗಿರುವ ಸಂದರ್ಶಕರಿಗೆ ನಿಮ್ಮ ಖಾಸಗಿ ವಿಷಯದ ಶೀರ್ಷಿಕೆಗಳನ್ನು ಸೋರಿಕೆ ಮಾಡಬಹುದು.

ನಾನು ಫಿಟ್‌ನೆಸ್ ಸದಸ್ಯತ್ವ ಸೈಟ್‌ಗಾಗಿ ಲೈವ್ ಸರ್ಚ್ ಮಾಡಲ್ ಅನ್ನು ನಿರ್ಮಿಸಿದ್ದೇನೆ. ಈ ಸೈಟ್ WordPress, WooCommerce, Divi, LearnDash ಮತ್ತು WishList Member ಅನ್ನು ಬಳಸುತ್ತದೆ.

ನಿಮ್ಮ ಪೇವಾಲ್ (paywall) ಅನ್ನು ಗೌರವಿಸುವ ಸರ್ಚ್ ಅನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸುವುದು ಎಂಬುದು ಇಲ್ಲಿದೆ.

ಆರ್ಕಿಟೆಕ್ಚರ್ (The Architecture)

ನಾನು ಅಕ್ಸೆಸ್-ಅವೇರ್ ಫಿಲ್ಟರಿಂಗ್ (access-aware filtering) ಹೊಂದಿರುವ ಏಕೀಕೃತ ಇಂಡೆಕ್ಸ್ ಅನ್ನು ಬಳಸಿದೆ. ಲಾಗ್-ಔಟ್ ಆಗಿರುವ ಬಳಕೆದಾರರು ಸದಸ್ಯರಿಗೆ ಮಾತ್ರ ಮೀಸಲಾದ ಪೋಸ್ಟ್‌ನ ಶೀರ್ಷಿಕೆ ಅಥವಾ ಸಾರಾಂಶವನ್ನು ಎಂದಿಗೂ ನೋಡದಂತೆ ಮಾಡಲು ನಾನು ಇದನ್ನು ಆಯ್ಕೆ ಮಾಡಿದೆ.

UI ಒಂದು ಐಕಾನ್ ಅನ್ನು ಬಳಸುತ್ತದೆ, ಇದು ಫುಲ್-ಸ್ಕ್ರೀನ್ ಓವರ್‌ಲೇ ಅನ್ನು ತೆರೆಯುತ್ತದೆ. ಇದು ಮೊಬೈಲ್‌ನಲ್ಲಿ ಜಾಗವನ್ನು ಉಳಿಸುತ್ತದೆ ಮತ್ತು ಕಿರಿದಾದ ಇನ್‌ಪುಟ್ ಬಾರ್‌ಗಿಂತ ಹೆಚ್ಚು ಅಚ್ಚುಕಟ್ಟಾಗಿ ಕಾಣುತ್ತದೆ.

ಬ್ಯಾಕೆಂಡ್ (The Backend)

ಎಲ್ಲವೂ ಚೈಲ್ಡ್ ಥೀಮ್‌ನಲ್ಲಿರುವ (child theme) ಒಂದೇ ಕಸ್ಟಮ್ REST ರೂಟ್ ಮೂಲಕ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಪ್ರಮುಖ ತಾಂತ್ರಿಕ ನಿಯಮಗಳು:

  • ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ರಕ್ಷಿಸಿ (Guard dependencies): Relevanssi ನಂತಹ ಸರ್ಚ್ ಪ್ಲಗಿನ್‌ಗಳಿಗಾಗಿ ಫಂಕ್ಷನ್ ಚೆಕ್ ಬಳಸಿ. ಪ್ಲಗಿನ್ ಇಲ್ಲದಿದ್ದರೆ, ಸೈಟ್ ಹಾಳಾಗುವ ಬದಲು ಸರ್ಚ್ ಪ್ರಕ್ರಿಯೆಯು ಕೋರ್ WordPress ಗೆ ಮರಳಬೇಕು (fall back).
  • ಸರ್ವರ್-ಸೈಡ್ ಫಿಲ್ಟರಿಂಗ್ (Server-side filtering): ಎಂದಿಗೂ JavaScript ಬಳಸಿ ಫಲಿತಾಂಶಗಳನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಬೇಡಿ. ನೀವು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಫಲಿತಾಂಶವನ್ನು ಮರೆಮಾಡಿದರೆ, ಡೇಟಾ ಈಗಾಗಲೇ ನೆಟ್‌ವರ್ಕ್ ರೆಸ್ಪಾನ್ಸ್‌ನಲ್ಲಿರುತ್ತದೆ. DevTools ಹೊಂದಿರುವ ಯಾರೇ ಆದರೂ ಅದನ್ನು ನೋಡಬಹುದು. ಸರ್ವರ್ ರೆಸ್ಪಾನ್ಸ್ ಕಳುಹಿಸುವ ಮೊದಲೇ ಡೇಟಾವನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಿ.
  • ಕ್ಯಾಶ್ ಹೊರಗಿಡುವಿಕೆ (Cache exclusion): ನಿಮ್ಮ ಸರ್ಚ್ REST ರೂಟ್ ಅನ್ನು ಪೇಜ್ ಕ್ಯಾಶಿಂಗ್‌ನಿಂದ ಹೊರಗಿಡಬೇಕು. ನೀವು ಫಲಿತಾಂಶಗಳನ್ನು ಕ್ಯಾಶ್ ಮಾಡಿದರೆ, ಒಬ್ಬ ಸದಸ್ಯನ ಸರ್ಚ್ ಫಲಿತಾಂಶವು ಅತಿಥಿಗೆ (guest) ತೋರಿಸಲ್ಪಡಬಹುದು, ಇದರಿಂದ ಖಾಸಗಿ ವಿಷಯ ಸೋರಿಕೆಯಾಗಬಹುದು.

ಫ್ರಂಟ್ ಎಂಡ್ (The Frontend)

ಕ್ಲೈಂಟ್ ಸೈಡ್ ವ್ಯಾನಿಲಾ JavaScript ಅನ್ನು ಬಳಸುತ್ತದೆ.

UX ಅನ್ನು ಯಶಸ್ವಿಗೊಳಿಸಲು ಮೂರು ವಿಷಯಗಳು ಸಹಕಾರಿ:

  • Debounce: ಒಂದು ಕೀ-ಸ್ಟ್ರೋಕ್ ನಂತರ ವಿನಂತಿಯನ್ನು (request) ಕಳುಹಿಸುವ ಮೊದಲು 250ms ಕಾಯಿರಿ. ಇದು ಅನಗತ್ಯ ಸರ್ವರ್ ಲೋಡ್ ಅನ್ನು ತಡೆಯುತ್ತದೆ.
  • AbortController: ಬಳಕೆದಾರರು ಟೈಪ್ ಮಾಡುವುದನ್ನು ಮುಂದುವರಿಸಿದಾಗ ಹಿಂದಿನ ವಿನಂತಿಗಳನ್ನು ರದ್ದುಗೊಳಿಸಿ. ಇದು ಹಳೆಯ ಫಲಿತಾಂಶಗಳು ಹೊಸದನ್ನು ಅಳಿಸಿಹಾಕದಂತೆ ತಡೆಯುತ್ತದೆ.
  • ಎರರ್ ಸ್ಟೇಟ್ಸ್ (Error states): ಫೆಚ್ (fetch) ವಿಫಲವಾದರೆ ಸ್ಪಷ್ಟ ಸಂದೇಶವನ್ನು ತೋರಿಸಿ. ನಿಲ್ಲದ ಸ್ಪಿನಿಂಗ್ ಲೋಡರ್ (spinning loader) ಕೆಟ್ಟ UX ಆಗಿದೆ.

ಮೊಬೈಲ್ ಪಾಠ (The Mobile Lesson)

ನಾನು ಸರ್ಚ್ ಬಟನ್ ಅನ್ನು Divi ಮೊಬೈಲ್ ಮೆನುವಿನೊಳಗೆ ಸೇರಿಸಲು ಪ್ರಯತ್ನಿಸಿದೆ. ಥೀಮ್ ಕ್ಲಿಕ್‌ಗಳನ್ನು ತಡೆಹಿಡಿಯಿತು (intercepted), ಇದರಿಂದ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಲು ಸಾಧ್ಯವಾಗಲಿಲ್ಲ.

ಪರಿಹಾರ ಸರಳವಾಗಿತ್ತು: ಥೀಮ್ ಜೊತೆ ಹೋರಾಡುವುದನ್ನು ನಿಲ್ಲಿಸಿ.

ಬಟನ್ ಅನ್ನು ಮೆನುವಿನೊಳಗೆ ಇಡುವ ಬದಲು, ನಾನು ಅದನ್ನು ಹೆಡರ್‌ನಲ್ಲಿ ಒಂದು ಸ್ವತಂತ್ರ ಎಲಿಮೆಂಟ್ ಆಗಿ ಸೇರಿಸಿದೆ. ಇದು ಅದನ್ನು ಥೀಮ್‌ನ ನಿಯಂತ್ರಣದಿಂದ ಹೊರಗೆ ಇರಿಸಿತು ಮತ್ತು ಟ್ಯಾಪ್ ಮಾಡಲು ಸುಲಭವಾಗಿಸಿತು.

ಸಾರಾಂಶ (Summary)

  • ಅಕ್ಸೆಸ್ ಕಂಟ್ರೋಲ್ ಸರ್ವರ್‌ನಲ್ಲಿಯೇ ನಡೆಯಬೇಕು.
  • ನಿಮ್ಮ ಕ್ಯಾಶ್‌ನಿಂದ ಸರ್ಚ್ ಎಂಡ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಹೊರಗಿಡಿ.
  • ವಿನಂತಿಗಳನ್ನು ನಿರ್ವಹಿಸಲು debounce ಮತ್ತು AbortController ಬಳಸಿ.
  • XSS ತಡೆಗಟ್ಟಲು, API ಡೇಟಾವನ್ನು DOM ಗೆ ಸೇರಿಸುವ ಮೊದಲು ಎಸ್ಕೇಪ್ (escape) ಮಾಡಿ.
  • ಪೇಜ್ ಬಿಲ್ಡರ್ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸ್ವೀಕರಿಸದಿದ್ದರೆ, ನಿಮ್ಮ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಅದರೊಳಗೆ ಇರಿಸುವ ಬದಲು ಅದರ ಪಕ್ಕದಲ್ಲಿ ಇರಿಸಿ.

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