יצירת Vertical news ticker בדרופל 7 עם jQuery

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

אני אדגים את היכולת של דרופל ליצור רכיבים מתוחכמים יחסית עם מעט מאד קוד באמצעות Vertical News Ticker שאותו אצור ללא קוד מלבד קצת קסמי jQuery.

קודם כל אצור View שהוא יצור לי Block שבו יש רשימה של תכנים. אחרי כן אני אצמיד באמצעות התמה שלי jQuery קצר שיבצע את ה-scrolling. נכנס ל-admin ומשם ל-structure ול-views. ניצור view חדש ששמו הוא news_ticker מסוג Node.

הוספת פילטרים

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

ללחוץ על סימן הפלוס הקטן ליד שם השדה שאנו רוצים להוסיף אליו (במקרה הזה פילטרים):

הוספת פילטר

הוספת פילטר

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

בחירת פילטר ספציפי

בחירת פילטר ספציפי

נסמן אותו ונבחר ב-Add. ייפתחו לנו האפשרויות – אנו רוצים כמובן שאלו שמפורסמים בלבד יוצגו ב-View שלנו, נכניס את האפשרות הזו:

בחירת אפשרות הפילטר

בחירת אפשרות הפילטר

אחרי כן נלחץ Update ואז נוכל לראות את הפילטר:

הפילטר המוגמר

הפילטר המוגמר

אפשר כמובן להוסיף עוד פילטרים כיד הדמיון הטובה עליכם – לפי content type, לפי מחבר, לפי תאריך וכו'.

בחירת Fields ופרמטרים נוספים

עכשיו בואו ונבחר מה אנחנו רוצים שיופיע ב-View. בשביל זה אנו בוחרים ב-Fields. באותו אופן בדיוק כמו בפילטרים. נוסיף שדה של תאריך ושעה ואת הכותרת כאשר באפשרויות נבחר שהכותרת תקושר ל-node שלה. יש עוד לא מעט אפשרויות בכל Field שהוא.

עכשיו ה-view מוכן, בואו ונבחר לו תגית CSS שבאמצעותה נוכל לכוון את ה-jQuery שלנו. נלחץ על CSS class ונכניס את הערך news_ticker:

הוספת css class ל-view

הוספת css class ל-view

אחרי כן נבקש שהתוכן יודפס כרשימה באמצעות Style שאותו נגדיר כ-HTML List.

תוכן כרשימה

תוכן כרשימה

כל מה שנותר הוא להוסיף display – block ולשמור את ה-view. בצד יש לנו רשימת displays – נבחר את block ואחרי כן Add Display:

הוספת Display

הוספת Display

נשמור את ה-View (כפתור Save גדול למטה) ונלך לרשימת הבלוקים שלנו דרך Stracture ואז Blocks. נגלול למטה עד שנמצא את ה-block שלנו ואז פשוט נוסיף אותו לחלק שאנו רוצים להוסיף אותו (למשל first_sidebar). אחרי כן נבדוק שהוא באמת מופיע. במידה וכן, נתקדם הלאה.

כך נראה הבלוק

כך נראה הבלוק

יצירת ה-Script

jQuery מגיע באופן דיפולטיבי עם Drupal ולפיכך אנחנו לא צריכים לשבור את הראש על להוסיף אותו. את ה-news ticker אנו יוצרים באמצעות תוסף של jQuery בשם jCarousel Lite. ניגש לתיקית: YOURSITE.COM/sites/all/themes/YOURTHEME כאשר YOURSITE.COM הוא שם האתר שלך ו-YOURTHEME הוא שם התמה שלך.

אם אין לכם תיקיה כזו – סימן שאתם משתמשים בתמה דיפולטיבית. העתיקו אותה מ-YOURSITE.COM/themes אל YOURSITE.COM/sites/all/themes ושם עירכו את השינויים.

נפתח (אם אין שם) תיקית js תחת התיקיה הכללית של התמה (YOURSITE.COM/sites/all/themes/YOURTHEME/js) ונכניס לשם את קובץ ה-jCarousel Lite שאותו הורדנו מהאתר של jCarousel Lite. אחרי כן ניצור שם קובץ נוסף בשם newsticker.js שאליו נכניס את הטקסט הבא:


(function ($) {
	$(document).ready(function() {
		if($('.news-ticker').length !=0) {
			
			$(".news-ticker .item-list").jCarouselLite({
				vertical: true,
				hoverPause:true,
				visible: 3,
				auto:3000,
				speed:3000,
				scroll: 2
			});
		}	
	});
})(jQuery);

הקוד הזה מפעיל את תוסף jCarousel Lite על כל אלמנט שה-class שלו הוא item-list והוא בן לאלמנט שה-class שלו הוא news-ticker. לאלו מכם שמכירים קצת jQuery ולא מבינים מאיפה ($)function מגיע – זה עניין של תאימות. דרופל 7 מציבה את jQuery כך שהיא לא תיצור בעיות תאימות עם ספריות אחרות – בדומה לדרך שג'ומלה עושה את זה. כאן יש מידע נוסף על על בעית תאימות בין jQuery ל-MooTools וספריות אחרות.

זהו! זה כל ה-JavaScript. עכשיו רק צריך לגרום לתמה לקרוא לקבצי ה-JavaScript האלו.

הכנסת קבצי JavaScript לתמה

ההכנסה של הקבצים האלו היא פשוטה מאד, נכנס אל YOURTHEME.info (כאשר YOURTHEME הוא שם התמה שלך) בתיקית התמה. לכל תמה יש קובץ כזה. לשם נכניס את השורות הבאות:


; News ticker scripts
scripts[] = js/jcarousellite_1.0.1.min.js
scripts[] = js/newsticker.js

נשמור וננקה את ה-cache של האפליקציה באמצעות Configuration ואז Performance ולחיצה על Clear all caches.

ו.. זהו! אפשר כמובן לשחק עם הפרמטרים של הג'אווהסקריפט שכתבנו – למשל להחליט שמספר הפריטים שיראו הוא 4 ולא 2 וכך הלאה. אבל כך מייצרים רכיב מסובך מאד בכמעט אפס קוד.

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (אין הצבעות)


אל תשארו מאחור! יש עוד מה ללמוד!

הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

רן בר-זיק

רן בר-זיק כותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
ניתן ליצור איתי קשר באמצעות:
כתובת המייל שלי: info@internet-israel.com.
פרופיל הלינקדאין שלי
הטוויטר שלי
פרופיל הפייסבוק שלי
אני תמיד שמח לייעץ ולעזור, אך בשל עומס הפניות הרב, אני לא תמיד מצליח לענות במהירות.