כניסה לקטגוריה ספצפית ב Elementor Portfolio

יש מקרים בהם אנחנו רוצים להוסיף את רכיב Portfolio לדף מסוים.
השימוש ברכיב נכון למקרים בהם נרצה להציג רשימה של פוסטים (מכל סוג שהוא) ולהוסיף אפשרות סינון בחלקו העליון.

כברירת מחדל, כאשר נוסיף את הרכיב ונבחר את סוג הפוסט אותו נרצה להראות, אפשרות הסינון (Filter) תכלול את ALL והוא יהיה פילטר ברירת המחדל.

כלומר, כאשר הדף ייטען, כל הפוסטים יוצגו לפי סדר המיון שנבחר ללא אפשרות בחירה של סינון ראשוני.

ישנה אפשרות לא להציג את האפשרות ALL אך גם אם נחבר באפשרות זו, כאשר הדף ייטען עדיין נראה את כלל הפוסטים מהסוג שנבחר במיון הנבחר.

ניקח דוגמה:

אתר המכיל פוסטים אודות ארועים בתאריכים מסוימים. נרצה לתת לגולש אפשרות סינון לפי חודשים.
על מנת לעשות זאת נוכל להוסיף את חודשי השנה כקטגוריות ולכל ארוע נבחר חודש רלוונטי.

הבעיה:

כאשר הגולש נכנס לדף, הוא יראה את כלל הארועים ללא סינון במידה וירצה לראות ארועים מחודש מסוים, יצטרך ללחוץ על חודש זה כדי לסנן. אנחנו רוצים להקל על הגולש ולא להציג לו ארועים מהעבר ויותר מזה, להציג לו ארועים צפויים של החודש הנוכחי או החודש אותו נרצה לקדם.

הפתרון:

שימוש ב Javascript על מנת לדמות לחיצה על הקטגוריה הרצויה בעת טעינת הדף

נוסיף פקד HTML של Elementor לסוף הדף הרלוונטי ובתוכו נוסיף את הסקריפט המתאים.

כדי לעשות זאת קודם עלינו למצוא את הפקד עליו יש ללחוץ. נוכל לעשות זאת בקלות דרך ה Developer Tools של הדפדפן בו אתם משתמשים. בדוגמה זו אני משתמש בגוגל כרום

בתמונה המוצגת ניתן לראות שלתגית ה a אין מזהה ייחודי, כלומר אין ID אך יש לה מאפיין ייחודי data-term-id עם הערך 13. נוכל להשתמש בזה על מנת למצוא את הפקד ולדמות לחיצה עליו.

הקוד:

<script>
    jQuery( function($) {
        $(document).ready(function() {
            $("a[data-term-id='13']").trigger('click');
        } );
    });
</script>

כך למעשה אנחנו אומרים לדף שכאשר הוא סיים את הטעינה שלו אנחנו מבקשים לבצע פעולת “קליק” על הפקד הרלוונטי

לסיכום:

  1. יש להיכנס לדף בו נמצא רכיב ה Portfolio
  2. יש למצוא את הפקד הרלוונטי עליו נרצה לדמות לחיצה
  3. להוסיף רכיב HTML לדף מתוך ארגז הפקדים של Elementor
  4. יש להוסיף את הסקריפט המצורף ולשנות אותו בהתאמה לפקד שלכם

חשוב:

יש להוסיף את רכיב ה HTML של Elementor בסוף הדף על מנת לייצר טעינה תקינה של הקוד

Facebook
Twitter
LinkedIn