רשימת הרכיבים

הרכיב הוא  אלמנט HTML  המזוהה ע"י שני מאפיינים:

מאפיין כללי – data-wizshop

ומאפיין יחודי – למשל עבור סל קניות יהיה זה  data-wiz-shopping-cart.

דוגמא: 

                <div   data-wizshop   data-wiz-shopping-cart >…..</div>

  • הרכיבים נטענים אוטומטית עם טעינת הדף ומתעדכנים ע"י פעולות המשתמש וע"י הודעות מרכיבים אחרים.
  • בחלק מהרכיבים האלמנטים המתוארים מהווים תבנית לשכפול ע"י המערכת. כגון: אלמנט ברשימה/ טבלה/עץ.
  • העדכון של האלמנטים ברכיבים נעשה בדפדפן לאחר שהדף מגיע מהשרת
  • הדוגמאות של הרכיבים להלן נועדו להבנת מבנה כללי של הרכיבים. ניתן לשנות את סוג האלמנטים ב HTML, להשמיט או לשנות סדר.
  • ניתן לשים מספר רכיבים מאותו סוג בדף. אך לא מומלץ להכיל רכיב בתוך רכיב אחר.
  • ניתן להגדיר חלק מרכיבים שונים כקבוצה. וכך ההודעות והעדכונים בין החברי הקבוצה לא יושפעו מפעילות אחרת בדף. הסבר ברכיבים הרלוונטים.
  • אין חובה להגדיר מזהה (HTML id) לאלמנט הרכיב. במקרה ולא מוגדר, המערכת תגדיר id אקראי לרכיב מהצורה:
    WN??????

1.סל קניות

מזהה רכיב: data-wiz-shopping-cart

הרכיב כולל 4 אלמנטים:

  1. רשימת פריטים (data-wiz-cart-container)
  2. פעולות (data-wiz-cart-actions )
  3. שדות סיכום (data-wiz-cart-totals)
  4. יצירת קשר (data-wiz-post-cart, data-wiz-details)
<div data-wizshop data-wiz-shopping-cart>

    <!--  רשימת פריטים - אופציונלי  .1 -->
    <table data-wiz-cart-container>
        <!--  מבנה כותרת עבור פריטים - אופציונלי-->
        <thead data-wiz-cart-head>
            <tr>
                <th>מפתח פריט</th>
                <th>שם</th>
                <th>תמונה</th>
                <th> דוגמא לקישור לדף פריט</th>
                <th>כמות</th>
                <th> (יחידות/אריזות) כמות חדשה</th>
                <th>מחיר</th>
                <th>מלאי</th>
                <th class="{{dispRemark}}">הערה</th>
                <th>סה"כ</th>
                <th>הוספה לקניה מאוחרת</th>
                <th>מחיקה מהסל</th>
            </tr>
        </thead>
        <tbody>
            <!--  מבנה פריט בסל-->
            <tr data-wiz-cart-item>
                <script type="text/html">
                    <!-- script - אופציונלי – ראו -->
                    <td>{{Key}}</td>
                    <td>{{Name}}</td>
                    <td><a href='MyItemPage.html{{Link}}' alt="{{Name}}">{{Name}}</a></td>
                    <!-- תמונה – ראו  סימון תמונה -->
                    <td><img src="{{ImgSrc}}" /></td>
                    <td>{{Quantity}}</td>
                    <td>
                        <span class="{{dispUnits}}">יחידות:
        <input type="text" wiz_QuantId="{{QuantId}}" data-wiz-packs-only="{{OnlyPacks}}" value="{{ItemsQuant}}">
        </span>
                        <span class="{{dispPacks}}">אריזות של {{QntInPack}}: 
        <input type="text" wiz_PacksId="{{PacksId}}" data-wiz-quant-in-pack="{{QntInPack}}" value="{{PacksNoInCart}}">
        </span>
                    </td>
                    <td>{{Price-P}}</td>
                    <td>{{Balance}}</td>
                    <td>
                        <textarea class="{{dispRemark}}" maxlength="100" data-wiz-item- remark='{{urlItemKey}}'>{{ItemRemark}}</textarea>
                    </td>
                    <td>{{FormatedLineTotal-P}}</td>
                    <td>
                        אלמנט הוספה קניה מאוחרת (אופציונלי, ראו פעולה על רשימת קניות)
                    </td>
                    <td>
                        <a href="javascript:void(0);" data-wiz-remove-from-cart='{{ID}}' data-wiz-status>X</a>
                    </td>
                </script>
            </tr>

            <!--  מבנה פריט הנחה בסל - אופציונלי-->
            <tr data-wiz-discount-item>
                <td>{{Key}}</td>
                <td colspan="4">הנחה</td>
                <td colspan="8">{{LineTotal}}</td>
            </tr>
        </tbody>
    </table>

    <!--- אופציונלי פעולות -  .2-->
    <div data-wiz-cart-actions class="v_ihide">
        <div data-wiz-update-cart data-wiz-status><a href="javascript:void(0);">עדכון סל</a>
            <!-- 0    ביצוע בדיקת כמות בעדכון סל (1/0) - אופציונלי-->
            <input data-wiz-update-check type="hidden" value="0">
        </div>
        <div data-wiz-empty-cart data-wiz-status><a href="javascript:void(0);">רוקן סל</a></div>
    </div>

    <!--- אופציונלי - שדות סיכום .3-->
    <div data-wiz-cart-totals>
        מספר פריטים בסל: {{Items}} סה"כ מחיר כולל משלוח: {{Total-FP}} עלות משלוח: {{DeliveryCost-FP}} מחיר כל הפריטים: {{TotalCostItems-P}} שיטת משלוח:{{DeliveryMethod}} מדינה: {{DeliveryCountry}} מחיר לפני מע"מ: {{PreVat}} משקל כולל: {{TotalWeight}} הנחה כללית: {{GeneralDiscount-P}}
    </div>

    <!--- אופציונלי - יצירת קשר.4-->
    <div data-wiz-details class="v_ihide">
        <!-- הם שדות חובה  data-req  שדות  קלט עם מאפיין  -->
        <input type="text" data-req name="שם ומשפחה" id="cart_Name" maxlength="50">
        <input type="text" data-req name="טלפון / נייד" id="cart_Phone" maxlength="50">
        <input type="text" data-req name="דואר אלקטרוני" id="cart_EMail" maxlength="50">
        <input type="text" data-req name="כתובת" id="cart_Address" maxlength="50">
        <textarea name="הערה" id="cart_Remark" maxlength="100"></textarea>
    </div>
    <div data-wiz-post-cart data-wiz-status class="v_ihide"><a href="javascript:void(0);">שליחת סל</a></div>
</div>

 

2.פריט

מזהה רכיב: data-wiz-product

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

<div   data-wizshop   data-wiz-product = "[מפתח פריט]">
   אלמנט פריט: נתונים כלליים (אופציונלי)		
  אלמנט פריט: פריטים בערכה (אופציונלי)
  אלמנט פריט: ערכות נוספות (אופציונלי)	
   אופציונלי)) אלמנט פריט: רשימת מאפיינים
  אופציונלי)) אלמנט פריט: פריטים משלימים	
</div>

 

 

3.טבלת פריטים

מזהה רכיב: data-wiz-grid

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

כמו כן,  ניתן לקבוע עבור המאפיין data-wiz-filter  "מזהה סינון" , במקרה זה נתוני טבלת הפריטים ישויכו לקטגוריה / שאילתת חיפוש באופן קבוע ללא השפעת אירועים שונים בדף.

דוגמאות לסינון:

עבור שאילתת חיפוש  למילה "חולצה"

data-wiz-filter="#q/חולצה"

עבור קטגוריה עם מפתח  cat2 המשוייכת לקטגוריה עם מפתח cat1

data-wiz-filter="#c/cat1/cat2"
<div   data-wizshop   data-wiz-grid= "[מזהה גריד]"  data-wiz-filter="[מזהה סינון]">
<!--  ברירת מחדל = 10)) ברירת מחדל למספר פריטים לתצוגה- אופציונלי-->

<input data-wiz-items-in-page type="hidden" value="50">

<div data-wiz-container>

<div data-wiz-item >
אלמנט פריט: נתונים כלליים (אופציונלי)

אלמנט פריט: פריטים בערכה (אופציונלי)

אלמנט פריט: ערכות נוספות (אופציונלי)

אופציונלי)) אלמנט פריט: רשימת מאפיינים

אופציונלי)) אלמנט פריט: פריטים משלימים

</div>

</div>

</div>

 

3.1.מיון (טבלת פריטים)

מזהה רכיב: data-wiz-page-sort

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

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

 

<div data-wizshop data-wiz-page-sort="[מזהה גריד]">
    <!--   שיטת מיון, ראו רשימות  - אופציונלי-->
    <select data-wiz-sort-ex-method>
        <!--  כותרת טרום בחירה - אופציונלי  -->
        <option data-wiz-no-item>סוג מיון</option>
        <!--  2 שדות קבועים - אופציונליים	-->
        <option data-wiz-sort-by='-1'>שם</option>
        <option data-wiz-sort-by='-2'>מחיר</option>
        <!--  מיונים נוספים כפי שהוגדרו לקטגוריה- אופציונלי  -->
        <option data-wiz-sort-by>{{Name}}</option>
    </select>

    <!--   סדר מיון, ראו רשימות  - אופציונלי-->
    <!--   רשימה סטטית - לא משתנה ע"י המערכת-->
    <select data-wiz-sort-dir>
        <option data-wiz-sort-order>סדר מיון</option>
        <option data-wiz-sort-order="asc">עולה</option>
        <option data-wiz-sort-order="desc">יורד</option>
    </select>
</div>

 

3.2.סינון (טבלת פריטים)

מזהה רכיב: data-wiz-items-filter

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

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

data-wiz-max-notes-  מספר רשימות של מאפיינים:

0 –           ללא הגבלה. מספר הרשימות ישתנה בהתאם למספר המאפיינים (ברירת מחדל)

10  >   –  מספר חיובי להגבלת מספר רשימות המאפיינים.

data-wiz-post-filter – סוגי פעולה לאחר בחירה מרשימה (אופציונלי, ברירת מחדל=0). או  2: הצגת רשימות מאפיינים ללא ערכים.

<div data-wizshop data-wiz-items-filter="[מזהה גריד]">
    <!-- כותרת - אופציונלי -->
    <div data-wiz-title> סינון </div>

    <!--   תבנית לרשימות מאפיינים, ראו רשימות  -->
    <select data-wiz-note-filter>
        <option data-wiz-no-item>{{NoteName}}</option>
        <option data-wiz-value>
            <span>{{NoteValue}}</span>
        </option>
    </select>

    <div>
        <!-- ניקוי סינון- אופציונלי  -->
        <a href="javascript:void(0);" class="v_ihide" data-wiz-clear-filter>הסרת סינון</a>
    </div>
</div>

 

3.3.דפדוף (טבלת פריטים)

מזהה רכיב: data-wiz-page-navigation

הצגת קישורים להמשך צפייה בפריטים: דף הבא, דף קודם, דף לפי מספר.

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

<div data-wizshop data-wiz-page-navigation="[מזהה גריד]">

    <!--  ברירת מחדל = 5)) ברירת מחדל למספר קישורים לדפים- אופציונלי -->
    <input data-wiz-max-pages type="hidden" value="8">

    <!--   תצוגת טקסט- אופציונלי-->
    <div data-wiz-navigation-text>
        {{PageNumber}} / {{TotalPages}}
        <!--  מספר עמוד/ סה"כ עמודים -->
    </div>

    <!--   תצוגת קישורים- אופציונלי-->
    <div data-wiz-page-numbering>
        <a data-wiz-first-page href='{{Link}}'>&lt;&lt;&nbsp;</a>
        <!-- אופציונלי -  (קפיצה לדף ראשון (אם לא מוצג -->
        <a data-wiz-prev-page href='{{Link}}'>&lt;&nbsp;</a>
        <!-- אופציונלי -  עמוד קודם -->
        <a data-wiz-page-i href='{{Link}}' wiz_selection>{{PageNumber}}</a>
        <!-- אופציונלי -  מבנה לקישור לפי מספר עמוד-->
        <a data-wiz-next-page href='{{Link}}'>&nbsp;&gt;</a>
        <!-- אופציונלי -  עמוד הבא -->
        <a data-wiz-last-page href='{{Link}}'>&nbsp;&gt;&gt;</a>
        <!-- אופציונלי -  (קפיצה לדף אחרון (אם לא מוצג -->
        <a data-wiz-cur-page>{{PageNumber}}</a>
        <!-- אופציונלי -  מבנה לתצוגת עמוד נוכחי -->
    </div>
</div>

הערה: רכיב לא נתמך בתצוגה עם סינון ( אלמנט רכיב מקבל class="v_ihide").

 

3.4.מספר פריטים לתצוגה (טבלת פריטים)

מזהה רכיב: data-wiz-page-items

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

<div data-wizshop data-wiz-page-items="[מזהה גריד]">
    <!--   תצוגת טקסט- אופציונלי-->
    <div data-wiz-page-text>
        {{Total}}
        <!--  סה"כ פריטים ברשימה -->
    </div>

    <!--    אפשרויות לבחירת המשתמש - אופציונלי-->
    <div data-wiz-page-items>
        <!--יש להוסיף מספר אלמנטים לפי בחירת המפתח/ת  
    הערך "מספר" במאפיין קובע כמה פריטים יוצגו בבחירת האפשרות
    ערך 0 - הכל -->
        <a data-wiz-show-items="מספר" wiz_selection href='{{Link}}'>מספר</a>     	
    <a data-wiz-cur-page>{{PageNumber}}</a>       <!-- אופציונלי -  מבנה לתצוגת אפשרות נבחרת-->
    	</div>  
</div>

הערה: רכיב לא נתמך בתצוגה עם סינון ( אלמנט רכיב מקבל "class="v_ihide).

4.דיווח סטטוס פעולה

הרכיב  מקבל הודעות סטטוס מפעולות עם מאפיין  data-wiz-status

מזהה רכיב: data-wiz-status-report

<div   data-wizshop   data-wiz-status-report ="[מזהה פעולה]">

<!--  innerHTML  טקסט מדווח נרשם ל-->

<p data-wiz-status-text></p>

<!-- סגירת דיווח - אופציונלי -->

<a href="javascript:void(0);" data-wiz-close ></a>

</div>

 

 

  • אם נקבע ערך "מזהה פעולה" רק הודעות המתקבלות עם המזהה הנ"ל תדווחנה. אחרת תדווחנה הודעות עבור כל הפעולות במערכת.
  • עבור data-wiz-status-text מתווסף הclass  הנשלח ע"י data-wiz-status של הפעולה.
    ובנוסף class יחיד נוסף המתאר את סטטוס הפעולה מהרשימה הבאה:  ' v_ok' , ' v_error', ' v_empty', ' v_invalid'.
  • כיצד קובעים את ערך מאפיין data-wiz-status עבור פעולה:
    המאפיין מקבל עד 3 ערכים המופרדים ב  " | "  בסדר הבא: מזהה פעולה | class |  רמת דיווח.

    לדוגמא:

data-wiz-status="login_op|upd_p|14"

מזהה פעולה – אופציונלי: אם לא מופיע, תשלח הודעה לרכיב דיווח כללי.  דוגמא:  |upd_p|14

רמת דיווח – אופציונלי: סכום (הכל או חלק) הערכים הבאים:  תקין (1), שגיאה (2), ריק (4), לא תקף (8).  ברירת המחדל היא 15 (דיווח מלא).

בהמשך לדוגמא, אם לא רוצים לשלוח גם את רמת הדיווח. הערך יהיה  |upd_p|.

בדוגמא:

data-wiz-status="login_op|upd_p|14"

מבקשים דיווח עבור פעולה עם מזהה login_op , עם  class = upd_p, ורמת דיווח שלא כוללת  'תקין'  (15-1=14).

דוגמא ל css עבור הנ"ל:

p.upd_p {font-weight: bold;}

p.upd_p.v_empty:before                       { content: 'נתונים חסרים: '; }

p.upd_p.v_invalid:before                     { content: 'נתונים שגויים: '; }

p.upd_p.v_error:before                         { content: 'שגיאה: '; }

 

 

5.רכישה

 מזהה רכיב: data-wiz-purchase

<div data-wizshop data-wiz-purchase>
    <!--  פעולת רכישה - אופציונלי  -->
    <a href="javascript:void(0);" data-wiz-checkout data-wiz-status>{{Items}} רכישה: </a>
    <!--  עלויות משלוח-  ראו רשימות  -->

    <select data-wiz-shipping-container>
        <option data-wiz-shipping-type wiz_selection>{{Name}} : {{Price}}</option>
    </select>
    <!--  שיטת תשלום -  ראו רשימות  -->
    <!--   רשימה סטטית - לא משתנה ע"י המערכת-->
    <select data-wiz-credit-method>
        <option data-wiz-credit-type="0" value="0">כרטיס אשראי</option>
        <option data-wiz-credit-type="1" value="1">ללא כרטיס אשראי</option>
    </select>
    <!---  ראו רשימות  - מספר תשלומים-->
                   <select data-wiz-payments-container>

   <option data-wiz-payment   wiz_selection>{{Name}}</option>

   </select>

   <!-- - הערת הזמנה-->

                   <textarea maxlength="250" data-wiz-order-remark  placeholder="הערת הזמנה"></textarea>

   <!-- - כתובת דוא"ל לאישור רכישה-->

                   <div>

   <!---  ראו רשימות  - אישור בדוא"ל-->

   <!--   רשימה סטטית - לא משתנה ע"י המערכת-->
    <select data-wiz-confirm-method>
        <option data-wiz-confirm-type="0" value="0">ללא אישור</option>
        <option data-wiz-confirm-type="1" value="1" selected>כתובת לקוח</option>
        <option data-wiz-confirm-type="2" value="2">משרד אחורי</option>
        <option data-wiz-confirm-type="3" value="3">משרד אחורי וכתובת זו:</option>
    </select>
    <!-- - כתובת דוא"ל נוספת-->
                                <input  type="text" data-wiz-confirm-address />
</div>
<!-- -  אישור תקנון חנות-  אופציונלי   -->
                <input data-wiz-read-policy  data-wiz-status  type="checkbox"  value='1' />
<!-- -  חלון לביצוע רכישת אשראי   -->
                <iframe id="VSCreditIframe"></iframe>
</div>

 

 

6.אישור רכישה

מזהה רכיב: data-wiz-purchase-report

<div   data-wizshop   data-wiz-purchase-report>

    <!--  שדות לדיווח - אופציונלי  -->

    <div data-wiz-fields>

        <div>מספר הזמנה: {{OrderNo}}</div>

        <div>סה"כ: {{Total}}</div>

        .......

    </div>

    <!-- - סגירת חלון דיווח - אופציונלי   -->

    <a href="javascript:void(0);"   data-wiz-close>סגירה</a>

</div>

 

7.כניסה למערכת - לקוח פרטי

מזהה רכיב: data-wiz-sign-in

<div data-wizshop data-wiz-sign-in data-wiz-error-class>
    <!--   מסך כניסה - מוסתר אם משתמש ביצע כניסה-->
    <div wiz_logout>
        <input type="text" name="דואר אלקטרוני" data-wiz-user-mail />
        <input type="password" name="סיסמא" data-wiz-user-pass />
        <!--   פעולות -->
        <a href="javascript:void(0);" data-wiz-login data-wiz-status data-wiz-b2b data-wiz-address>כניסה לקוח פרטי</a>
    <a href="javascript:void(0);"  data-wiz-send-pass data-wiz-status   data-wiz-b2b >שליחת סיסמא לקוח פרטי</a>	
  </div>
</div>

 

8.כניסה למערכת - לקוח עסקי

מזהה רכיב: data-wiz-sign-in

<div data-wizshop data-wiz-sign-in data-wiz-error-class>
    <!--   מסך כניסה - מוסתר אם משתמש ביצע כניסה-->
    <div wiz_logout>
        <input type="text" name=">קוד משתמש" data-wiz-user-key/>
        <input type="password" name="סיסמא" data-wiz-user-pass />
        <!--   פעולות -->
        <a href="javascript:void(0);" data-wiz-login data-wiz-status data-wiz-b2b="1" data-wiz-address>כניסה לקוח עיסקי</a>
        <a href="javascript:void(0);" data-wiz-send-pass data-wiz-status data-wiz-b2b="1">שליחת סיסמא לקוח עיסקי</a	>
  </div>
</div>

 

9.הרשמה - עדכון פרטים, הצגת פרטי משתמש

מזהה רכיב: data-wiz-customer

<div data-wizshop data-wiz-customer>

    <!-- אופציונלי -    פרטי משתמש שביצע כניסה למערכת-->
    <div data-wiz-text wiz_login>
        <span>שלום {{Name}}</span>
        <!-- HTTPREQ: 12 שדות נוספים מ   -->
    </div>

    אופציונלי - אלמנט יציאה מהמערכת

    <!--  טופס פרטי לקוח -  אופציונלי-->
    <div data-wiz-details data-wiz-error-class>

        <!-- כתובת למשלוח -->
        <!-- הם שדות חובה  data-req  שדות  קלט עם מאפיין  -->
        <input type="text" data-delivery data-req name="שם ומשפחה" id="vs_Name" maxlength="50">
        <input type="text" data-delivery data-req name="דואר אלקטרוני" id="vs_EMail" maxlength="50">
        <input type="text" data-delivery data-req name="טלפון / נייד" id="vs_Phone" maxlength="50">
        <!-- רשימת שיטות משלוח -  ראו רשימות  -->
        <select id="vs_Shiping" data-req data-wiz-shipping-container>
            <option data-wiz-shipping-type wiz_selection>{{Name}}</option>
        </select>
        <input type="text" data-delivery data-req name="כתובת" id="vs_Address" maxlength="50">
        <input type="text" data-delivery data-req name="עיר" id="vs_City" maxlength="50">
        <input type="text" data-delivery name="מיקוד" id="vs_Zip" maxlength="50">
        <input type="text" data-delivery name="איזור" id="vs_Region" maxlength="50">
        <!-- רשימת מדינות - ראו רשימות  -->
        <select data-req data-wiz-country-container>
            <option data-wiz-country wiz_selection>{{Name}}</option>
        </select>
        <!-- ראו רשימות  - רשימת אמצעי תשלום -->
        <select data-wiz-pay-option-container>
            <option data-wiz-pay_option wiz_selection>{{Name}}</option>
        </select>

        <!-- (כתובת לחשבונית (אם שונה מהכתובת לעיל-->
        <input data-billing id="vs_BName" type="text" maxlength="50" />
        <input data-billing id="vs_BAddress" type="text" maxlength="50" />
        <input data-billing id="vs_BCity" type="text" maxlength="50" />
        <input data-billing id="vs_BRegion" type="text" maxlength="50" />
        <input data-billing id="vs_BZip" type="text" maxlength="50" />
        <!--  ראו רשימות -  רשימת מדינות -->
        <select data-wiz-bcountry-container>
            <option data-wiz-country wiz_selection>{{Name}}</option>
        </select>
        <input data-billing id="vs_BPhone" type="text" maxlength="50" />

        <!-- אישורים-->
        <label for="vs_VSSendDigInv">אני מסכים/ה לקבל חשבונית מס דיגיטלית (במקום חשבונית מס מודפסת על נייר)
            <input id="vs_VSSendDigInv" type="checkbox" value='1' />
        </label>
        <label for="vs_VSSendAdvByMail"> אני מסכים/ה לקבל חומר פרסומי ושיווקי באמצעות הדואר האלקטרוני
            <input id="vs_VSSendAdvByMail" type="checkbox" value='1' />
        </label>

        <!-- סיסמא-->
        <input data-req id="vs_Pass" name="סיסמא" type="password" maxlength="20" value="" />
        <input data-req wiz_login id="vs_NewPass" name="סיסמא חדשה" type="password" maxlength="20" />
        <input data-req id="vs_ConfirmPass" name="אימות סיסמא" type="password" maxlength="20" />

        <!-- פעולות-->
        <input type="button" data-wiz-register data-wiz-status data-wiz-address value="עדכון פרטים" />
        <input type="button" data-wiz-change-pass wiz_login data-wiz-status value="שינוי סיסמא">
    </div>
</div>

 

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

מזהה רכיב: data-wiz-shopping-list

יש לקבוע במאפיין הרכיב את סוג הרשימה המבוקשת:

קניה מאוחרת – WL

סל קבוע –  FX

קניות קודמות – PI

 

<div data-wizshop data-wiz-shopping-list="WL | FX | PI ">

    <!-- רשימת פריטים ברשימה, ראו רשימות  -->
    <div data-wiz-list-container>
        <div data-wiz-list-item>
            <script type="text/html">
                <!-- script - אופציונלי – ראו -->
                <div>{{Name}}</div>
                <div>{{Description}}
                    <div>
                        <!-- תמונה – ראו  סימון תמונה -->
                        <div><img src="{{ImgSrc}}" /></div>
                        <!--   v_istat סטטוס פריט -  -->
                        <div class="{{Status}}"></div>
                        <!-- אלמנט הוספה לסל (אופציונלי) -->
                        <!-- פעולות על פריט->
      <!-- מחיקת פריט מרשימה (ראו אלמנט פעולה על רשימת קניות) - אופציונלי  -->
      <a href="javascript:void(0);" data-wiz-list-action-item='{{urlItemKey}}' data-wiz-matrix-key='{{matrixKey}}'
          data-wiz-type='FX | WL' data-wiz-action='3' data-wiz-status >הוספה לסל קבוע</a>		
      <!-- מחיקת פריט מרשימה (ראו אלמנט פעולה על רשימת קניות) - אופציונלי  -->
      <a href="javascript:void(0);" data-wiz-list-action-item='{{urlItemKey}}' data-wiz-matrix-key='{{matrixKey}}'
          data-wiz-type='FX | WL' data-wiz-action='3' data-wiz-status >מחיקת פריט</a>
      </script>			
    <div>
  </div>  
  <!-- הוספת רשימה (סל קבוע, קניות קודמות ) לסל קניות - אופציונלי  ->
  <div data-wiz-list-to-cart class="v_ihide" data-wiz-status><a href="javascript:void(0);">הוספת רשימה לסל קניות</a></div>
</div>

 

11.קטגוריות: עץ

מזהה רכיב: שני מזהים  data-wiz-categories   או  data-wiz-sub-categories

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

data-wiz-sub-categories –  תואם לעץ קטגוריות, אך מוצגות תת קטגוריות לקטגוריה נבחרת.

<div data-wizshop data-wiz-categories data-wiz-cat-depth>

    <!—לסימון כל הענף עבור פריט נבחר - אופציונלי    1 0  או  -->
    <input data-wiz-full-path-select type="hidden" value="0">

    <!--   תבנית לענף קטגוריות -->
    <div data-wiz-cat-container>
        <!-- ראו אלמנט קטגוריה -->
    </div>
</div>

<div data-wizshop data-wiz-sub-categories data-wiz-cat-depth="0">
    ….
</div>

 

 

12.קטגוריות : סינון

מזהה רכיב: data-wiz-categories-filter

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

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

ניתן לבנות את הרשימות לסינון  בצורה דינמית או סטטית:

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

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

data-wiz-categories-filter  – יש לקבוע במאפיין הרכיב ערך "מזהה קטגוריית אב" עבור הבנים של הרשימה הראשונה.

אם לא מצויין מזהה, תיבחר קטגוריית השורש: NON.

 

data-wiz-cat-depth –  מספר רשימות של קטגוריות בבניה דינמית בלבד:

0 –           ללא הגבלה. מספר הרשימות ישתנה בהתאם למספר תתי הקטגוריות (ברירת מחדל)

10  >   –  מספר חיובי להגבלת מספר רשימות ללא תלות בתתי קטגוריות.

 

data-wiz-max-notes-  מספר רשימות של מאפיינים בבניה דינמית בלבד:

0 –           ללא הגבלה. מספר הרשימות ישתנה בהתאם למספר המאפיינים (ברירת מחדל)

10  >   –  מספר חיובי להגבלת מספר רשימות המאפיינים.

 

data-wiz-cont-head –  הגדרת כותרות לרמות הקטגוריות השונות (אופציונלי).

כל ערך במאפיין ,המופרד ב || , יחליף את {{Head}}  ב data-wiz-no-item  בהתאמה.

 

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

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

 

data-wiz-post-filter – סוגי פעולה לאחר בחירה מרשימה (אופציונלי, ברירת מחדל=0). סכום מהערכים הבאים:

  1. איפוס כל רשימות לאחר סינון
  2. הצגת רשימות מאפיינים ללא ערכים.

פעולת הסינון:

הפעולה מתבצעת בעת לחיצה על אלמנט data-wiz-go או לחילופין (אם לא קיים אלמנט זה) בעת בחירה תקיפה ברמה האחרונה של רשימת הקטגוריות או בבחירת מאפיין.

.דוגמא לבניה דינמית:

<div data-wizshop data-wiz-categories-filter="[מזהה קטגוריית אב]" data-wiz-cat-depth='2' data-wiz-cont-head="צבע||משקל" data-wiz-address="'my_page.html{{Link}}" data-wiz-post-filter="0">
    <!--   תבנית לרשימת קטגוריות בבניה דינמית, ראו רשימות  -->
    <select data-wiz-cat-container>
        <option data-wiz-no-item>{{Head}}</option>
        <!--   או משקל  צבע כותרת:-->
        <option data-wiz-cat-item< <!-- ראו אלמנט קטגוריה -->
        </option>
    </select>
    <!--   תבנית לרשימות מאפיינים בבניה דינמית, ראו רשימות  -->
    <select data-wiz-note-filter>
        <option data-wiz-no-item>{{NoteName}}</option>
        <option data-wiz-value>
            <span>{{NoteValue}}</span>
        </option>
    </select>
    <!--   פעולת סינון – (אופציונלי) -->
    <a href="javascript:void(0);" data-wiz-go>סינון</a>
    <!--   הסרת סינון– (אופציונלי) -->
    <a href="javascript:void(0);" data-wiz-clear-filter>הסרת סינון</a>
</div>

דוגמא לרשימות בבניה סטטית (2 רשימות עבור קטגוריות, ו 2 רשימות עבור מאפיינים):

<select data-wiz-cat-container>
    <option data-wiz-no-item>רשימה 1</option>
    <option data-wiz-cat-item>
        <span>{{Category}}</span>
    </option>
</select>
<select data-wiz-cat-container>
    <option data-wiz-no-item>רשימה 2</option>
    <option data-wiz-cat-item>
        <span>{{Category}}</span>
    </option>
</select>

<select data-wiz-note-filter>
    <option data-wiz-no-item>מאפיין 1</option>
    <option data-wiz-value>
        <span>{{NoteValue}}</span>
    </option>
</select>
<select data-wiz-note-filter>
    <option data-wiz-no-item>מאפיין 2</option>
    <option data-wiz-value>
        <span>{{NoteValue}}</span>
    </option>
</select>

 

13.מיקום (Breadcrumbs)

מזהה רכיב: data-wiz-location

data-wiz-cat-loc  –  הצגת מיקום לפי קטגוריה בה נמצאים או אליה משוייך פריט.

data-wiz-level – מס' המיקומים עבור פריט המשתייך למס' קטגוריות (ברירת מחדל = 0 הכל).

data-wiz-search-loc –  הצגת מיקום לפי שאילתת חיפוש.

data-wiz-location   –  ניתן לקבוע במאפיין הרכיב ערך "מזהה גריד", במקרה זה הרכיב יציין את המיקום שהוגדר עבור טבלת הפריטים

(ראו data-wiz-filter  ברכיב טבלת פריטים).

<div data-wizshop data-wiz-location="[מזהה גריד]">
    <!—מיקום לפי קטגוריה - אופציונלי     -->
    <div data-wiz-cat-loc data-wiz-level="0">
        <!--   תבנית לענף קטגוריות -->
        <div data-wiz-cat-container>
            <!-- ראו אלמנט קטגוריה -->
        </div>
    </div>
    <!—לקישור לדף הבית במיקום לפי קטגוריה- אופציונלי   תבנית  -->
    <div data-wiz-home-loc>
        <a href='HomePage.html '>דף הבית</a>
    </div>

    <!—מיקום לפי שאילתת חיפוש - אופציונלי     -->
    <div data-wiz-search-loc>
        <span>{{Query}}</span>
        <!—שאילתת חיפוש  -->
        <span>{{Results}}</span>
        <!—מספר תוצאות-->
    </div>
</div>

 

14.תרומה

מזהה רכיב: data-wiz-donations

 

<div data-wizshop data-wiz-donations>

    <!—תאור התרומה - אופציונלי  -->
    <!-- HTTPREQ: 44 מס' פעולה-->
    <p data-wiz-title>{{Description}}</p>

    <!--  פרטי התרומה -->
    <div data-wiz-don-details wiz_login>
        <!--  תרומה חד פעמית בסכום-->
        <input type="text" data-wiz-sum value="" maxlength="25">
        <!--  סוג מטבע-->
        <span data-wiz-currency>{{Currency}}</span>
        <!---  ראו רשימות  - מספר תשלומים-->
        <select data-wiz-payments-container>
            <option data-wiz-payment wiz_selection>{{Name}}</option>
        </select>
        <!-- - הערה -->
        <textarea maxlength="250" data-wiz-remark></textarea>

        <!-- - ביצוע תרומה -->
        <a href="javascript:void(0);" data-wiz-checkout data-wiz-status>שליחה</a>

        <!-- -  חלון לביצוע רכישת אשראי   -->
        <iframe id="VSCreditIframe"></iframe>
    </div>
</div>

 

15.תרומות - כניסה למערכת ועדכון פרטים

כניסה למערכת – תורם

מזהה רכיב: data-wiz-donor-sign-in

<div data-wizshop data-wiz-donor-sign-in wiz_logout data-wiz-error-class>
    <input type="text" name="דואר אלקטרוני" data-wiz-user-mail />
    <input type="password" name="סיסמא" data-wiz-user-pass />
    <a href="javascript:void(0);" data-wiz-login data-wiz-status data-wiz-b2b data-wiz-address>כניסה למערכת</a>
</div>

עדכון/הצגת פרטי תורם

מזהה רכיב: data-wiz-donor

<div data-wizshop data-wiz-donor>
    <!-- אופציונלי -    פרטי תורם שביצע כניסה למערכת-->
    <div data-wiz-text wiz_login>
        <span>שלום {{Name}}</span>
        <!-- HTTPREQ: 12 שדות נוספים מ   -->
    </div>
    אופציונלי - אלמנט יציאה מהמערכת
    <!--  טופס פרטי לקוח -  אופציונלי-->
    <div data-wiz-details data-wiz-error-class>
        <!-- כתובת לחשבונית -->
        <input data-billing data-req id=" don_BName" type="text" maxlength="50" />
        <input data-billing data-req id="don_EMail" type="text" maxlength="50">
        <input data-billing data-req id=" don_BAddress" type="text" maxlength="50" />
        <input data-billing data-req id=" don_BCity" type="text" maxlength="50" />
        <input data-billing id=" don_BRegion" type="text" maxlength="50" />
        <input data-billing id=" don_BZip" type="text" maxlength="50" />

        <input data-billing data-req id=" don_BCountry" type="text" maxlength="50" />
        <!--  ראו רשימות -  בחירה מרשימת מדינות-->
        <select data-wiz-bcountry-container>
            <option data-wiz-country wiz_selection>{{Name}}</option>
        </select>
        <input data-billing data-req id="don_BPhone" type="text" maxlength="50" />

        <!-- סיסמא-->
        <div wiz_login wiz_pass>
            <input data-req id="don_Pass" type="password" maxlength="20" />
            <input data-req id="don_ConfirmPass" type="password" maxlength="20" />
        </div>
        <!-- רישום-->
        <input type="button" data-wiz-register data-wiz-status data-wiz-address value="עדכון פרטים" />
    </div>
</div>

 

 

16.פריטים שניצפו

מזהה רכיב: data-wiz-visited

תצוגה של רשימת הפריטים שניצפו (ברירת מחדל = 6. מקסימום = 50).

<div   data-wizshop   data-wiz-visited ="[מס' פריטים לתצוגה]">
<!—כותרת- אופציונלי  -->
<div class="{{dispVisit}}">פריטים שניצפו</div>
<!--  פריטים -  ראו רשימות -->
<div data-wiz-visited-container>
    <div data-wiz-visited-item >
      <script type="text/html">  <!-- script - אופציונלי – ראו --> 
      <div>{{Key}}</div>
      <div><a href='myPage.html{{Link}}'>{{Name}}</a></div>
<!-- תמונה – ראו  סימון תמונה -->
<div><img src="{{ImgSrc}}"></div>
</script>
    </div>
  </div>
</div>

 

  • במקרים בהם פריט המיועד להוספה לרשימה (דף פריט) ורכיב הרשימה אינם באותו דף, יש להוסיף רכיב "ריק" לדף הפריט לביצוע הרישום. לדוגמא:
<div  data-wizshop  data-wiz-visited></div>

 

  • הרשימה נשמרת ב Local Storage של הדפדפן, ולא בבסיס נתונים של החנות.

 

17.פריטים מקודמים

מזהה רכיב: data-wiz-promoted-items

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

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

data-wiz-group-type –  מקור הפריטים:

"0" – כפי שהוגדר בהגדרות חנות.

"1" –  קטגוריה ספציפית (ראו מאפיין data-wiz-promoted-items)

"2" – קטגוריות שסומנו במשרד האחורי לקידום

data-wiz-promoted-items –  מזהה קטגוריה עבור מקור "0" או "1" (ראו מסלול לקטגוריה ב- קישורים לדפים)

<div   data-wizshop   data-wiz-promoted-items="[#c/Cat1/Cat2]"  data-wiz-group-type="[מקור פריטים]">
<!—מס פריטים לתצוגה- אופציונלי  -->
<input data-wiz-max-items type="hidden" value="15">
<!—  מיון עולה/יורד- אופציונלי  -->
<input data-wiz-sort-order type="hidden" value="ASC">  <!—  ASC (default) or DESC-->
<!—כותרת- אופציונלי  -->
<div data-wiz-items-head>
   < span >{{Title}}</ span >
   <span> מהירות: {{Speed}} </span>
   <span> כיוון: {{Direction}} </span>
</div>
<!--  פריטים -  ראו רשימות -->
<div data-wiz-container>
   <div data-wiz-item >
      <script type="text/html">  <!-- script - אופציונלי – ראו -->
         <div>{{Key}}</div>
         
         <div>{{urlItemKey}}</div>
         
         <div><a href='myPage.html{{Link}}'>{{Name}}</a></div>
         
         <!-- תמונה – ראו  סימון תמונה -->
         
         <div><img src="{{ImgSrc}}"></div>
         
      </script>
   </div>
</div>
</div>

 

18.כותרות

מזהה רכיב:   data-wiz-title או data-wiz-doc-title

שינוי כותרת דף או כותרת עבור רכיב כאשר ערך הכותרת נקבע ע"י נתוני חנות.

data-wiz-title  –  שיוך כותרת בעת שינוי קטגוריה, פריט, טבלת פריטים (ע"י קביעת ערך "מזהה גריד" במאפיין זה).

data-wiz-doc-title – שינוי כותרת דף HTML  (document.title) . הרכיב לא מוצג בדף.

data-wiz-default –  ערך ברירת מחדל כשכותרת לא זמינה (אופציונלי).

<div   data-wizshop   data-wiz-title ="[מזהה גריד]"    data-wiz-default="ברירת מחדל">

    <span>{{Title}}</span>
    <!—כותרת-->

    <span>{{Description}}</span>
    <!—תאור-->

    </div>

    <div   data-wizshop   data-wiz-doc-title  data-wiz-default="ברירת מחדל">{{Title}}</div>

 

Suggest Edit