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

כך מכניסים סרגל חדשות כמו ב-Ynet בכל אתר מבוסס דרופל 7 ללא כל קוד

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

אני אדגים את היכולת של דרופל ליצור רכיבים מתוחכמים יחסית עם מעט מאד קוד באמצעות 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 וכך הלאה. אבל כך מייצרים רכיב מסובך מאד בכמעט אפס קוד.

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

עבודה עם GPT למתכנתים

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

פתרונות ומאמרים על פיתוח אינטרנט

נגישות טכנית – פודקאסט ומבוא

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

גלילה לראש העמוד