הוספת תגובות לאתרי Wix

בדוגמה זו, נוסיף את FastComments Live Commenting לעמודי פוסטים בבלוג.

לשם כך, נפתח את האתר שלנו בעורך של Wix.

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

ברצוננו לוודא שנציג שרשור תגובות ייחודי עבור כל פוסט בבלוג, לכן נערוך את Blog Pages -> Post.

שלב ראשון: עריכת דף הפוסט הדינמי

לאחר מכן, נעבור אל Add -> Embed Code -> Embed HTML.

שלב שני: הוספת בלוק Embed HTML

זה ייתן לנו תיבה עצובה להתחיל איתה:

בלוק ההתחלתי

דוגמה זו משתמשת בקוד מותאם אישית לצורך תאימות ל-Wix. לא תוכלו להשתמש בקטעי הקוד של FastComments ממדריכים אחרים.

פתחו את הטופס כדי להוסיף את דיאלוג ה-HTML המותאם אישית שלנו על ידי לחיצה על Enter Code ובחירה ב-HTML:

שלב 3: פתיחת דיאלוג ה-HTML

העתיקו את קטע ה-HTML הבא והדביקו אותו בדיאלוג, ולאחר מכן לחצו על Update:

קטע קוד תגובות של Wix

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 const config = {

7 tenantId: "demo"

8 };

9 const instance = FastCommentsUI(document.getElementById('fastcomments-widget'), config);

10 window.onmessage = (event) => {

11 if (event.data) {

12 if (event.data.action === 'reload') {

13 console.log('Updating FastComments:', event.data.url);

14 config.urlId = event.data.url;

15 config.url = event.data.url;

16 instance.update(config);

17 }

18 }

19 }

20 })();

21</script>

22

שלב 3: הדבקה ושמירה

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

שלב 3: התוצאה

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

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

שלב 4: שינוי גודל

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

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

ללא השלבים הבאים, יהיה לכם רק שרשור תגובות גלובלי אחד לכל האתר שלכם - מה שאינו שימושי במיוחד.

מצב פיתוח (Dev Mode)

כדי להוסיף פונקציונליות זו, נצטרך להיכנס למה ש-Wix מכנה Dev Mode.

לחצו על האפשרות Dev Mode בראש המסך.

הפעלת מצב פיתוח

הגדרת מזהה האלמנט

נוסיף קוד מותאם אישית כדי להשיג זאת, אך קודם עלינו לתת לאלמנט ההטמעה החדש מזהה (ID) שבאמצעותו נוכל להתייחס אליו.

נקרא לו fastcomments.

לחצו על אלמנט ההטמעה החדש שהוספנו, ובמצב פיתוח בפינה הימנית התחתונה תראו שדה מזהה עם ערך כמו html1:

שדה המזהה

שנו זאת ל-fastcomments והקישו Enter:

הגדרת המזהה

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

בתחתית המסך תראו עורך קוד כזה:

פתיחת העורך

העתיקו את הקוד הבא והדביקו אותו שם:

קטע קוד לניווט תגובות ב-Wix

Copy

1

2import wixLocation from 'wix-location';

3

4$w.onReady(function () {

5 function updateFastCommentsLocation() {

6 try {

7 const url = (wixLocation.baseUrl + '/' + wixLocation.path).replace(/,/g, '/');

8 $w('#fastcomments').postMessage({'action': 'reload', 'url': url});

9 } catch (err) {

10 console.error('Wix -> FastComments Error', err);

11 }

12 }

13

14 updateFastCommentsLocation();

15 wixLocation.onChange( () => {

16 updateFastCommentsLocation();

17 });

18});

19

הוספת קוד הניווט

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

אם יש לכם בעיות, הודיעו לנו בתיבת התגובות למטה.

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

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