אלמנטור – העתקת טקסט מתגיות דינמיות ללוח (clipboard)

העתקת טקסט ללוח (clipboard) היא דרישה שמופיעה מידי פעם על ידי לקוחות.

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

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

אפשרות ראשונה – העתקה של טקסט בלבד, ללא מרכאות

שלב ראשון: יצירת הכפתור

צרי כפתור ותני לו את ההגדרות הבאות:

• מאחר והכפתור לא אמור להפנות לשום מקום – תני לו בקישור #.
• ב"מתקדם" הוסיפי לרכיב גם קלאס CSS בשם "btn_for_copy".
• בנוסף, ב"מאפיינים" (נמצא גם כן ב"מתקדם"), יש לך אפשרות להטמעה של תוכן מתגיות דינמיות. הכניסי את התוכן, ואז ב"לפני" כתבי: data-text-to-copy| (עם הקו האנכי בסוף).

שלב שני: כתיבת הסקריפט.

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

הוסיפי קוד חדש, תני לו שם והגדירי שיופיע בכל האתר בסוף הbody. העתיקי אליו את הקוד הבא:

<script>
   jQuery('.btn_for_copy a').on('click', function(e){
      let textToCopy = jQuery(this).closest('.btn_for_copy').data('text-to-copy')
      $btn = jQuery(this);
      navigator.clipboard.writeText(textToCopy).then(function() {
         $btn.addClass('copied');
      });
   });
</script>

שמרי את הקוד, רענני את העמוד, ובדקי שההעתקה עובדת.
כדי לתת ללקוח חיווי שההעתקה בוצעה – הוספנו לכפתור קלאס copied לאחר ביצוע ההעתקה. תוכלי בCSS מותאם להוסיף עיצוב לכפתור כאשר יש לו את הקלאס הזה, לדוגמה צבע שונה:

selector .copied{
background-color: red;
}

אפשרות שניה – העתקת טקסט הכולל HTML או מרכאות

שלב ראשון: יצירת והגדרת הרכיבים בעמוד

צרי כפתור ותני לו את ההגדרות הבאות:

• מאחר והכפתור לא אמור להפנות לשום מקום – תני לו בקישור #.
• הוסיפי לרכיב גם קלאס CSS בשם "btn_for_copy"

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

• הוסיפי לו קלאס "text_to_copy".
• במידה ואת לא רוצה שהרכיב יוצג לגולש – הוסיפי לו CSS מותאם: selector{ display: none !important}

רק עוד דבר אחרון.

לקונטיינר או איזור שעוטפים את שני הרכיבים הללו – הכפתור והתוכן – תני גם כן קלאס: "copy_parent".

הקלאס הזה יעזור לנו לדעת איזה אזור תוכן להעתיק.

שלב שני: כתיבת הסקריפט

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

הוסיפי קוד חדש, תני לו שם והגדירי שיופיע בכל האתר בסוף הbody. העתיקי אליו את הקוד הבא:

<script>
   jQuery('.btn_for_copy a').on(‘click’, function(e){
      let textToCopy = jQuery(this).closest('.btn_for_copy').find('.text_to_copy').text();
      $btn = jQuery(this);
      navigator.clipboard.writeText(textToCopy).then(function() {
         $btn.addClass('copied');
      });
   });
</script>

בהצלחה רבה!!