הגדרות ->4. סליקה בפרופיל נמוך ->5. עיצוב מותאם אישית CSS וHTML גרסה 5

עיצוב מותאם אישית CSS ו-HTML לגרסה 5

תוכן העמוד

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

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

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

חשוב לדעת לפני שמתחילים

• העמוד מיועד למתכנתים או למשתמשים טכניים שרוצים לעצב את דף התשלום של העסק באופן מותאם אישית.
• כדי לבצע את העיצוב, על המתכנת לקבל מבית העסק גישה למשתמש אדמין של המסוף. ללא הרשאת אדמין לא ניתן להיכנס למסך ולערוך את עיצוב דף התשלום.
• ניתן לעצב את דף התשלום באמצעות HTML ו-CSS. השינויים מתעדכנים באופן מיידי, On-Line, בדף התצוגה המקדימה.
• העבודה נשמרת תחילה כטיוטה בלבד ואינה משפיעה על דף התשלום הפעיל.
• מומלץ לא למחוק אלמנטים הכוללים data-bind.
• אם מדובר בשדה קלט, אין להסתיר אותו דרך CSS או HTML. הסתרת שדות קלט צריכה להתבצע רק באמצעות הפרמטרים המתאימים בממשק.
• עבור שאר האלמנטים שאינם שדות קלט, ניתן להסתיר באמצעות display:none.
• חובה להשאיר ב-footer את המלל: "הסליקה מתבצעת דרך קארדקום".
• בעסקים עם מודול עסקה בטוחה / 3D Secure, חובה להשאיר גלוי את שדה טלפון בעל הכרטיס או את שדה מייל בעל הכרטיס. אם שני השדות יוסתרו, העסקה עלולה להיכשל.
• מומלץ לשמור טיוטה מדי פעם, מכיוון שקיים טיימר פעילות בעמוד.

בחירת הגדרות עריכה

בחר כיוון עריכה

שדה זה קובע לאיזה כיוון שפה מיועד העיצוב:

• ימין לשמאל – עבור עברית וערבית.
• שמאל לימין – עבור אנגלית ושפות נוספות.

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

סוג העריכה

שדה זה קובע את סוג העיצוב שעורכים. בעמוד זה סוג העריכה הוא CSS ו-HTML, כלומר עריכה מלאה של מבנה הדף והעיצוב שלו.

התחל עריכה

לחיצה על הכפתור מתחילה את העבודה בעמוד.

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

לאחר תחילת העריכה כיוון העריכה ננעל ולא ניתן לשנות אותו.

כלים ותמונות

בחר שפה להצגה

שדה זה קובע באיזו שפה תיפתח התצוגה המקדימה של דף התשלום.

רשימת השפות משתנה לפי כיוון העריכה שנבחר:

• בכיוון ימין לשמאל יוצגו עברית וערבית.
• בכיוון שמאל לימין יוצגו אנגלית ושפות נוספות.

פתח דף תצוגה מקדימה

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

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

אין לרענן את חלון התצוגה המקדימה או לסגור אותו תוך כדי עבודה.

בחר תמונה

רשימה לבחירת תמונה מתוך התמונות שכבר הועלו לשרת אישורית זהב.

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

העלאת תמונות

הכפתור פותח חלון להעלאת תמונות חדשות לשרת אישורית זהב.

לאחר העלאת התמונה, הרשימה מתרעננת וניתן לבחור את התמונה החדשה ולקבל את הקישור שלה.

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

קישור לתמונה נבחרת

שדה זה מציג את הקישור המלא לתמונה שנבחרה.

את הקישור ניתן להעתיק ולהשתמש בו בתוך קוד ה-CSS או ה-HTML. אם לא נבחרה תמונה, יוצג בשדה הטקסט "לא נבחרה תמונה".

עיצוב HTML

בחר HTML לטעינה

שדה זה מאפשר לבחור איזו גרסת HTML לטעון לעורך:

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

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

טען HTML

הכפתור טוען לעורך את גרסת ה-HTML שנבחרה.

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

עורך ה-HTML

אזור העריכה שבו כותבים ומשנים את קוד ה-HTML של דף התשלום.

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

מטעמי אבטחה, לא ניתן לשמור HTML שכולל קישורים לא מאובטחים מסוג http:// או הפניות לא בטוחות כגון javascript: או data:. יש להשתמש בקישורי https:// בלבד.

עיצוב CSS

בחר עיצוב לטעינה

שדה זה מאפשר לבחור איזו גרסת CSS לטעון לעורך:

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

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

טען CSS

הכפתור טוען לעורך את גרסת ה-CSS שנבחרה.

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

עורך ה-CSS

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

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

מטעמי אבטחה, לא ניתן לשמור CSS הכולל ביטויים מסוכנים כגון expression, moz-binding, תו לוכסן הפוך (\) או הפניות http: לא מאובטחות. יש להשתמש בקישורי https בלבד, ובתמונות שהועלו דרך העמוד לשרת אישורית זהב.

פעולות בעמוד

שמור שינויים

הכפתור שומר את ה-HTML וה-CSS כטיוטה עבור כיוון העריכה שנבחר.

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

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

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

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

הגש עיצוב לאישור

הכפתור פותח פנייה לתמיכה לצורך אישור והפצה של העיצוב.

פתיחת קריאה לאישור עיצוב עמוד התשלום

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

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

פרטי הבקשה

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

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

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

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

פתיחת הקריאה

לחצו על פתח קריאה.

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

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

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

הערה למתכנת

שינוי כפתור בצע תשלום

<input type="button" value="Go" data-bind="value: 'מלל לכפתור חדש' , enable: !loadMode(),
click: sendData , hide: hideCreditCardInputs" /> 

שינוי מלל שדה

לפני 

<label class="fieldName" data-bind="text:order.custAddresLine1.label" for="txtCustAddresLine1"</label>

 אחרי

<label class="fieldName" data-bind="" for="txtCustAddresLine1">Your new word</label>

הסתרות אלמנטים נפוצים ב CSS

הסתרת תמונות בדף - ניתן למחוק שורה זו

background-image: url('https://secure.cardcom.solutions/Images/LowProfile5/paymentDetailsBgNew.jpg');

background-image: url(https://secure.cardcom.solutions/Images/LowProfile5/hand.jpg);

 להסתרת שורת הכנס פרטי אשראי - עקב דרישות תקן נגישות

h1 {
display: none; 
}     

להסתרת טבלת שורות המסמך

.showProductsTables {
display: none !important;
}

 * התמיכה לא משנה ומעצבת , רק מתכנת בית העסק צריך לעצב ולשלוח מייל + מספר המסוף שנאשר לו את העיצוב .