תיעוד רכיבים

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

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

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

1.הוספת מערכת הרכיבים לדפי HTML

ההוספה נעשה ע"י קישור לקובץ סקריפט  vsc_load.min.js

הקישור מקבל את הפרמטרים הבאים:

  1. uc – מזהה חנות (חובה)
  2. lang – שפת ממשק משתמש :  en – אנגלית.  או  he – עברית (ברירת מחדל).
  3. mode – שיטת עבודה כתובות הדפים במערכת:
  • ערך ריק (ברירת מחדל) – מתאימה ליישום החנות בדף אחד (סעיף 2).
  • static – מתאימה ליישום החנות עם דפים שונים  (למשל  Wordpress, סעיף 2).

דוגמא לקישור עבור חנות  myshop בשפה העברית בישום דף אחד:

<script type='text/javascript' src='http://wizcount_server/vsc_load.min.js?uc=myshop&lang=he'></script>

 

2.קישורים לדפים

  • יישום בדף אחד (ללא פרמטר mode) – הרכיבים מתעדכנים ללא החלפת כתובת הדף בו הם נמצאים. השינוי בכתובת הדף  מתבצע רק בחלק של ה anchor (#).ולא מתבצעת קריאה לשרת להבאת דף חדש.

במקרים בהם רוצים להעביר נתונים באמצעות הקישור (למשל: מפתח פריט, מסלול לקטגוריה, שאילתה לחיפוש) באותו הדף או לדף אחר,  ניתן להוסיף לקישור את הסימון {{Link}}. במקרים אחרים אין צורך בסימון זה.

דוגמא

<a href='my_page.html{{Link}}'</a>
סוג קישור anchor כתובת
מסלול לקטגוריה #c http://my_shop/my_page.html? #c/Cat1/Cat2
מפתח פריט #p http://my_shop/my_page.html? #p/Item1
שאילתת חיפוש #q http://my_shop/my_page.html? #q/Query

 

  • יישום עם דפים שונים (mode=static) –   הקישורים הם לדפים שונים במערכת. מתאים לסביבות כגון  WordPress  וכו'.

במקרה זה המערכת תפנה לכתובת החדשה (ללא שימוש ב #).

דוגמא:

<a href="http://my_shop/items/{{Link}}"> </a>

<a href="http://my_shop/items.aspx?id={{Link}}"></a>

 

סוג קישור כתובת
מסלול לקטגוריה http://my_shop/categories/Cat1/Cat2

http://my_shop/categories.aspx?id=Cat1/Cat2

מפתח פריט http://my_shop/items/item1

http://my_shop/items.aspx?id= item1

שאילתת חיפוש http://my_shop/search/?s=Query

 

הערה: בשתי השיטות יש לטעון את  קובץ  (jsהרכיבים בכל דף.

 

 

3.סימון בסוגריים מסולסלים

הסימון נועד לציין שהערך המסומן יוחלף בערך ע"י הרכיב. למשל  {{Key}}  יוחלף ע"י מפתח פריט. לא כל הערכים המגיעים מה-API מופיעים במסמך זה. ניתן למצוא הסבר במסמך ה API המקורי בהתאם למס' פעולה המצויין בראש התעוד של כל פריט.

סימונים מיוחדים:

  • סימון מיוחד לתצוגה/הסתרה של אלמנט הוא מהצורה class="{{disp???}}". במקרה זה המערכת תעדכן במקום את אחד ה class-ים השמורים עבור תצוגה.
    דוגמא:

      class="{{dispUnits}}"  ==> class="v_ihide"

  • עבור מספרים/מחירים ניתן להוסיף לערך בסוגריים המסולסלים סיומת לפורמט אותו רוצים.דוגמא: עבור ערך מחיר {{Price}} ניתן  לבקש מחיר עם סמל מטבע – {{Price-P}}.
    פורמטים אפשריים:

    N מספר עם מפריד אלפים 
    FN מספר עם מפריד אלפים  מעוגל לשתי ספרות אחרי הנקודה העשרונית 
    P מספר עם מפריד אלפים  + סימן מטבע
    FP מספר עם מפריד אלפים  מעוגל לשתי ספרות אחרי הנקודה העשרונית + סימן מטבע
    0P   מספר  ללא  00 לאחר הנקודה העשרונית

* פורמטי מחיר התלויים בסימן מטבע נתמכים כעת רק ברכיב סל קניות (שדה Currency).

 

  • סימונים עבור תמונה (פריט, קטגוריה) :

{{ImageFile}} – שם הקובץ כפי שהוגדר בחנות. ניתן לשרשר שם זה לכתובת בשרת העיצוב.

{{ImgSrc}}  – כתובת לתמונה בשרת החנות.

{{Alt}}  – עבור פריט, ערך מאפיין פריט wiz_alt   (ראו קידום דף פריט).

עבור תמונות הנשמרות בשרת העיצוב עם שמות הנגזרים מהשם המקורי שהוגדר, ניתן להשתמש בסימונים הבאים:

{{ImageFile_name}} – שם הקובץ ללא סיומת.

{{ImageFile_ext}} – סיומת שם הקובץ (כולל הנקודה לפני).

דוגמא:  עבור שם תמונה table.jpg אם נרצה לקבל את התמונה המתאימה בשרת העיצוב בשם table-300×300.jpg הקוד יהיה:

<img src ="http://MyShop/{{ImageFile_name}}-300x300{{ImageFile_ext}}">

 

4.מאפיינים

  • data-wiz-status משוייך לפעולה ומציין שניתן לשדך לפעולה דיווח על הצלחה/ כשלון בהתאם להגדרה. ראו דיווח ססטוס פעולה.
  • data-wiz-address משוייך לפעולה ומאפשר קביעת כתובת אליו יופנה המשתמש לאחר ביצוע מוצלח של הפעולה. ראו קישורים לדפיםדוגמא:

    data-wiz-address = "mypage.html"

  • wiz_login – האלמנט יהיה זמין אם המשתמש ביצע כניסה למערכת. אחרת יוגדר עבורו class="v_ihide" . ראו סעיף 5.

  • wiz_logout – האלמנט יהיה זמין אם המשתמש טרם ביצע כניסה למערכת. אחרת יוגדר עבורו class="v_ihide" . ראו סעיף 5.
  • data-req – אלמנט קלט בטופס המחייב התייחסות המשתמש.
  • wiz_index – אינדקס של אלמנט ברשימה/עץ (איבר ראשון הוא 0).
  • wiz_count – מספר אברים ברשימה.
  • wiz_selection – אלמנט לסימון ברשימה
  • data-wiz-error-class – שם class לסימון ערך לא תקין בשדה (לאחר ביצוע פעולה)

 

5.קלאסים

המערכת משתמשת במספר מצומצם של class-ים. על המפתחים להגדירם ב css.

  • v_ihide – הסתרת אלמנט  (דוגמא:  ..v_ihide {display:none;} )
  • v_iselect – מציין אלמנט נבחר ברשימה. מימוש בהתאם למקרה.
  • v_iheader –  ברשימות שאינן אלמנט SELECT, class זה מציין שאלמנט data-wiz-no-item משמש ככותרת הרשימה. במקרה זה בחירה באלמנט זה ע"י המשתמש תוסיף את ה class  v_iclick  לאלמנט (בחירה נוספת תסיר את ה class).
  • v_inosel- מציין אלמנט לא נבחר ברשימה. מימוש בהתאם למקרה.
  • v_ilast – מציין אלמנט אחרון בעץ (אלמנט ללא בנים). בשימוש ע"י רכיב עץ קטגוריות.
  • v_ireq- סימון LABEL  המשוייך לאלמנט עם מאפיין data-req (ראו סעיף 5).
  • v_istat – סימון פריט לא זמין לקניה.
    הערך נקבע לפי שדה CanBePurchased בפעולה HTTPREQ: 15 במסמך ה API באופן הבא:
    v_istat + CanBePurchased דוגמא:

    .v_istat3:before { content: 'פריט לא פעיל'; }
    
    .v_istat4:before { content: 'נא פנו אלינו לביצוע הזמנה'; }
    
    .v_istat5:before { content: 'לא נקבע מחיר לפריט';}
    
    .v_istat6:before { content: 'פריט לא נמצא ברשימת המוצרים'; }
    
    .v_istat7:before { content: 'מלאי לא קיים'; }
    
    .v_istat8:before { content: 'פריט לא נמצא ברשימת המוצרים';}

     

6.רשימות

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

SELECT
<select data-wiz-container>
<option data-wiz-no-item>"צבע"</option>
<option data-wiz-item>{{Name}</option>
</select>

DIV
<div data-wiz-container>
<div data-wiz-no-item class="v_iheader" >"צבע"</div>
<div data-wiz-item>{{Name}}</div>
</div>

INPUT
<div  data-wiz-container>
<label data-wiz-no-item ><input type="radio" name="myname"/>צבע</label>
<label data-wiz-item><input type="radio" name="myname"/>{{Name}}</label>
</div>

 

מאפיין data-wiz-no-item (אופציונלי) מציין את כותרת הרשימה (מצב של טרם בחירה). מאפיין זה חייב להיות ראשון ברשימה.

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

(data-wiz-item בדוגמא לעיל).

7.תגית script (אופציונלי)

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

דוגמא:

<tr data-wiz-cart-item>

<script type="text/html">

<td><img src="{{ImgSrc}}"/></td>

..

</script>

</tr>

 

8.אלמנטים

אלמנטים המופיעים במספר רכיבים ברמת פירוט שונה בהתאם למימוש.

8.1.אלמנט הוספה לסל

<div class="{{dispCart}}">
  <!-- פעולת הוספה-->
  <a href="javascript:void(0);" data-wiz-item-to-cart='{{urlItemKey}}' 
    data-wiz-packs-ctrl="{{PacksId}}" 
    data-wiz-quant-ctrl="{{QuantId}}"  
    data-wiz-check-quant="1" 
    data-wiz-remark-ctrl="{{RemarkId}}"
    data-wiz-item-row data-wiz-item-col data-wiz-status >הוספה לסל
   </a>
  <!-- מספר יחידות -->
  <div class="{{dispUnits}}">
    	<input type="text"  wiz_QuantId="{{QuantId}}" data-wiz-packs-only="{{OnlyPacks}}" value="1"/>	
  </div>
  <!-- אריזות-->
  <div class="{{dispPacks}}">
    <input type="text" wiz_PacksId="{{PacksId}}" data-wiz-quant-in-pack="{{QntInPack}}" value="0/">
  </div>
  <!-- הערה לסל - אופציונלי -->
  <div>
    <input type="text"  wiz_RemarkId="{{RemarkId}}" />
  </div>

  <!-- לסל לאחר הוספה פריט- אופציונלי קישור -->
  <a href=mycart.html'  data-wiz-view-list='{{urlItemKey}}' class="v_ihide">הצגת סל</a>
</div>

 

8.2.אלמנט פריט: נתונים כלליים

<div data-wiz-item-data>
    <script type="text/html">  <!-- script - אופציונלי – ראו --> 
<div>{{Name}}</div>
  <div>{{Description}}<div>
<div>{{Title}}<div>   <!—תאור מוצר (מוצר אב במטריצה)  -->
  <!-- תמונה – ראו  סימון תמונה -->
<div><img src="{{ImgSrc}}" /></div>
<!-- תמונות נוספות -->
  <ul data-wiz-item-img-container>
    <!—תמונות נוספות – ראו  סימון תמונה -->
<li data-wiz-item-img>
      <a href="{{BigImgSrc}}" title="{{Name}}">
      <img src="{{BigImgSrc}}">
      </a>
      או
      <!-- שם תמונה לקישור בשרת העיצוב-->
       <img src="http://MySite/{{ BigImageFile}}" />
    </li>
  </ul>	
  <!-- מטריצות-->
<div data-wiz-matrix>
    <!-- מימד ראשון - ראו רשימות  -->
  <select data-wiz-dim-1>
    <option data-wiz-no-item>{{mtxTitle1}}</option>
    <option data-wiz-mtx-item wiz_selection>{{mtxName}}</option>
  </select>
    <!-- מימד שני - ראו רשימות  -->
  <select data-wiz-dim-2>
    <option data-wiz-no-item>{{mtxTitle2}}</option>
    <option data-wiz-mtx-item wiz_selection>{{mtxName}}</option>
  </select>
</div>		
  
<!-- פריט במבצע-->
<div class="{{dispSale}}"></div>
  <!— או פריט ערכה במבצע-->
<div class="{{dispKitSale}}"></div>

<!--   v_istat סטטוס פריט -  -->
<div class="{{Status}}"></div>
<div data-wiz-item-price>{{FormatedPrice}}</div>
<div data-wiz-item-full-price>{{FullPrice}}</div>
<div data-wiz-item-balance>{{Balance}}</div>

אלמנט הוספה לסל (אופציונלי)
  אלמנט הוספה קניה מאוחרת (אופציונלי, פעולה על רשימת קניות)
  אלמנט הוספה לסל קבוע (אופציונלי, פעולה על רשימת קניות) 
     אופציונלי)) אלמנט פריט: רשימת מאפיינים
  </script>		
</div>

 

8.3.אלמנט פריט: פריטים בערכה

<div data-wiz-kit>
  <div data-wiz-kits-head>
    <div>מפתח פריט</div>
    <div>שם</div>
    <div>תמונה</div>
    <div>כמות</div>
  </div>
  <div data-wiz-kit-item-container>
    <div data-wiz-kit-item >
      <script type="text/html">  <!-- script - אופציונלי – ראו --> 
      <div>{{Key}}</div>
      <div><a href='myPage.html{{Link}}'>{{Name}}</a></div>
<!-- תמונה – ראו  סימון תמונה -->
<div><img src="{{ImgSrc}}"></div>
<div>{{Quantity}}</div>
</script>
    </div>
  </div>
</div>

 

8.4.אלמנט פריט: ערכות נוספות

<div data-wiz-parent-kits>
  <div data-wiz-parent-kits-head>
    <div>מפתח פריט</div>
    <div>שם</div>
    <div>תמונה</div>
    <div>כמות</div>
  </div>
  <div data-wiz-kit-item-container>
    <div data-wiz-kit-item >
      <script type="text/html">  <!-- script - אופציונלי – ראו --> 
      <div>{{Key}}</div>
      <div><a href='myPage.html{{Link}}'>{{Name}}</a></div>
      
<!-- תמונה – ראו  סימון תמונה -->
<div><img src="{{ImgSrc}}"></div>
      <div>{{Quantity}}</div>			
</script>
</div>
  </div>
</div>

 

8.5.אלמנט פריט: עץ חשבונית

<div data-wiz-hesh-head>עץ חשבונית</div>
<div data-wiz-hesh-item-container>
  <div data-wiz-hesh-item >
    אלמנט פריט: נתונים כלליים
  </div>
</div>

<!-- - אופציונלי הוספת רשימה לסל -->
<a href="javascript:void(0);" data-wiz-hesh-items-to-cart >הוספת רשימה לסל</a>
<!-- לסל לאחר הוספה רשימה- אופציונלי קישור-->
<a href=mycart.html'  data-wiz-view-list  data-wiz-type='hesh' class="v_ihide">הצגת רשימה בסל</a>

 

8.6.אלמנט פריט: רשימת מאפיינים

<div data-wiz-prop-head>מאפיינים</div>

<div data-wiz-item-prop-container>

                <div data-wiz-item-prop> {{PropName}} : {{PropVal}} </div>

</div>

 

ברשימת המאפיינים פריט לא יוצגו המאפיינים לקידום דף פריט. ראו  קידום דף פריט.

8.7.אלמנט פריט: פריטים משלימים

<div data-wiz-comp-head>פריטים משלימים</div>
<div data-wiz-comp-item-container>
  <div data-wiz-comp-item >
    אלמנט פריט: נתונים כלליים
  </div>
</div>
<!-- - אופציונלי הוספת רשימה לסל -->
<a href="javascript:void(0);" data-wiz-comp-items-to-cart >הוספת רשימה לסל</a>
<!-- לסל לאחר הוספה רשימה- אופציונלי קישור-->
<a href=mycart.html'  data-wiz-view-list  data-wiz-type='comp' class="v_ihide">הצגת רשימה בסל</a>

 

8.8.אלמנט פעולה על רשימת קניות: סל קבוע (FX) , קנייה מאוחרת (WL), קניות קודמות (PI)

מאפיינים:

data-wiz-type  – סמל רשימה :  FX | WL |  PI

data-wiz-action  סוג הפעולה:

  • "1" –  העברת פריט מסל הקניות לקניה מאוחרת
  • "2" –  הוספת פריט לסל קבוע או לקניה מאוחרת (פריט הקיים בסל בקניות לא מועבר לקנייה מאוחרת)
    הוספה לסל קבוע נעשית רק אם משתמש ביצע כניסה למערכת (wiz_login). במקרה של קנייה מאוחרת יש להסיר את המאפיין.
  • "2M" –  העברת פריט לקניה מאוחרת  ומחיקת הפריט אם קיים בסל הקניות.
  • "3" –  מחיקת פריט  (למעט קניות קודמות).

data-wiz-item-only-pi  (אופציונלי) – בהוספת פריט לסל קבוע (פעולה 2)  יועברו רק פריטים שנרכשו בעבר ע"י הלקוח/ה.

data-wiz-matrix-key – לשימוש בפעולת מחיקה (3). תמיכה בפריטי מטריצה.

<div wiz_login>
  <!-- פעולה -->
  <a href="javascript:void(0);" data-wiz-list-action-item='{{urlItemKey}}' 
    data-wiz-type='סמל רשימה 
    data-wiz-action='סוג פעולה'
     [data-wiz-item-only-pi] 
     [data-wiz-matrix-key='{{matrixKey}}']
     data-wiz-status
    data-wiz-item-row data-wiz-item-col >תאור פעולה</a>
  <!--  אופציונלי- הצגת קישור לרשימה -->
  <a href=mypage.html'  data-wiz-view-list='{{urlItemKey}}'  data-wiz-type=סמל סל' class="v_ihide">הצגת רשימה </a>
</div>

 

8.9.אלמנט יציאה מהמערכת

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

<a href="javascript:void(0);" data-wiz-logout wiz_login data-wiz-address >יציאה</a>

 

8.10.אלמנט קטגוריה

פריט קטגוריה להצגה בעץ קטגוריות וסינון לפי קטגוריות.

<div data-wiz-cat-item wiz_selection >
<span>{{Category}}</span>
<!-- תמונה – ראו  סימון תמונה -->
<div><img src="{{ImgSrc}}" /></div>
<a href='my_page.html{{Link}}'</a>
<!-- HTTPREQ: 14 שדות נוספים מ   -->
</div>

 

9.קידום דף פריט

על מנת לקדם את דפי הפריט באתר במנועי החיפוש, ניתן להוסיף מאפיינים קבועים עבור פריט (דף פריט) במשרד האחורי.

מאפיינים:

  1. wiz_alt – הערך בשדה זה יחליף את הסימון {{Alt}} ברכיב פריט בדף פריט.
  2. wiz_title –  הערך בשדה זה יחליף את כותרת דף פריט title)).
  3. wiz_desc – הערך בשדה זה יחליף את הערך במאפיין content ברכיב META עם שם description.
    אם רכיב זה לא קיים בדף, המערכת תוסיף את הרכיב.
    דוגמא:
<meta name="description" content =" wiz_desc ערך השדה  ">

הערות:

  • מאפיינים אלה לא יוצגו ברשימת המאפיינים עבר פריט. ראו רשימת מאפיינים.
  • עבור מאפיינים 2 ו 3 יש להוסיף לדף הפריט את הרכיב כותרות עם המאפיין data-wiz-doc-title.

דוגמא:

                <div   data-wizshop   data-wiz-doc-title>{{Title}}</div>

 

Suggest Edit