דיסקליימר קטן לפני שנכנסים לעומק, הפרקטיקה שאני הולך להראות בפוסט הזה לא משתמשת בטופס אחד בודד אלא במספר טפסים עם יצירת תנאים להצגת הטופס המתאים כתלות בשלב שבו נמצא הגולש.
ועכשיו אחרי שסיימנו עם ההקדמות, בואו ניגש לעניין.
נתחיל עם מה זה Dynamic Visibility?
לפני שנצלול לאיך ומה אנחנו עושים, אני רוצה להסביר על שני מונחים שחשוב להכיר.
- Dynamic Visibility by Jet Engine – יכולת של התוסף Jet Engine של Crocoblock שמאפשר לנו להציג/להסתיר אלמנטים או איזורים על פי תנאים.
- Request Parameters – אלה הם פרמטרים שמצטרפים לכתובת הדף שלנו ומאפשרים לנו להעביר מידע.
דוגמא לאיך נראה Request Parameter מסוג GET (בסוג השני, POST, לא ניגע היום):
https://shifft.online?name=Dor
שימו לב לפרמטר בשם name שמכיר את השם שלי – Dor. עם זה אנחנו הולכים לשחק לא מעט בפתרון הזה.
יצירת טופס של אלמנטור
לאלמנטור (פרו) יש ווידג׳ט מובנה של טפסים, הוא עובד לא רע בכלל, מתחבר יפה עם הרבה ממשקים חיצוניים וקל מאוד לתפעול.
האם הוא ווידג׳ט הטפסים המועדף עליי? עד לא מזמן התשובה החד משמעית הייתה, ״לא, יש את Jet Forms״ אבל מאז השינוי שהם עשו ל-Jet Forms Builder כתוסף נפרד שבונה את התפסים על ידי גוטנברט בצורה לא מאוד נוחה, אני יותר מוצא את עצמי חוזר למקורות.
אחד הפיצ׳רים הנחמדים שהוסף לתוסף של אלמנטור כבר בהתחלה היה הטאב של הפעולות לאחר הגשת הטופס, ואחד מהם הוא ה-Redirect לעמוד שאנחנו בוחרים.
אנחנו הולכים לבנות את הדף שבו נרצה להציג את הטופס ובו נכניס את כל השלבים, כל שלב בתור טופס נפרד.
הוספת Redirect לאחר שליחת הטופס
לאחר שהוספנו את כל הטפסים, ניצור Post Submit Action של Redirect לאותו עמוד שבו אנחנו נמצאים, רק שבכל פעם נוסיף את הפרמטר step=1, step=2, וכדומה כדי להציג לדפדפן באיזה שלב אנחנו נמצאים.
בעזרת הפרמטרים האלה נוכל להציג/להסתיר את הטופס הרלוונטי לכל שלב.
הוספת Dynamic Visibility כתלות ב-Request Parameters
פה קורה הקסם, אנחנו נפעיל כללי Dynamic Visibility כל כל טופס ונגרום לו להופיע רק כאשר ב-URL יש את ה-step הרלוונטי להצגתו.
כך למשל, את הטופס של השלב השני, נציג רק כאשר יש 2 בפרמטר step.
הערה חשובה לגבי השלב הראשון תהיה לא להציג את הטופס של השלב הראשון כל עוד יש פרמטר כלשהו של step ב-url.
