แสดงการรีวิวผลิตภัณฑ์เป็นการ์ด

ตัวอย่างนี้สาธิตวิธีใช้ไฟล์กำกับเพื่อขยายเทมเพลตเว็บเพื่อแสดงการรีวิวผลิตภัณฑ์บนเว็บเพจในรูปแบบการ์ด

วิธีการสร้างส่วนประกอบเทมเพลตเว็บเพื่อแสดงการรีวิวผลิตภัณฑ์

ขั้นตอนที่ 1: การจัดเตรียม

1. สร้างตารางในสภาพแวดล้อมของคุณด้วยคอลัมน์ที่ตรงกัน (ชื่อ เนื้อหา และการจัดอันดับ)
2. คัลอกชื่อทางตรรกะของตาราง
3. สร้างเรกคอร์ดตัวอย่างสองสามรายการในตารางใหม่

ขั้นตอนที่ 2: ตั้งค่าเทมเพลตเว็บ

1. คัดลอกโค้ดต้นฉบับลงในเทมเพลตเว็บใหม่ในสภาพแวดล้อมของคุณ โปรดดู วิธีการสร้างส่วนประกอบเทมเพลตเว็บ สำหรับรายละเอียดเพิ่มเติม

   {% fetchxml postsQuery %}
     <fetch mapping='logical'>
       <entity name='cr50f_review'>
         <attribute name='cr50f_name' />
         <attribute name='cr50f_content' />
         <attribute name='cr50f_rating' />
         <attribute name='createdon' />
         <order attribute='createdon' descending='false' />
       </entity>
     </fetch>
   {% endfetchxml %}
   
   {% assign posts_count = count | integer %}
   {% assign column_count = columns | integer %}
   {% assign cutoff = cutoff | integer %}
   
   <h2>{{ name | default: "Feedback entries (default)" }}
   </h2>
   
   <span>Showing {{ posts_count }} out of {{ postsQuery.results.entities.size }}</span>
   {% if postsQuery.results.entities.size > 0 %}
     <div class="col-sm-12">
       <ul style="list-style:none" class="grid">
         {% for post in postsQuery.results.entities limit: posts_count %}
           <li class="col-md-{{ 12 | divided_by: column_count }}">
             <div class="panel panel-{% if post.cr50f_rating < cutoff %}danger{%elsif post.cr50f_rating == cutoff%}warning{%elsif post.cr50f_rating == 10%}success{% else %}default{% endif %}">
               <div class="panel-heading">{{ post.cr50f_name }}
                 <span class="badge" style="float:right">{{ post.cr50f_rating }}</span>
               </div>
               <div class="panel-body" style="height:150px">
                 <p>{{ post.cr50f_content }}</p>
               </div>
               <div class="panel-footer" style="height:55px">
                 <span>{{ post.createdon }}</span>
                 {% if post.cr50f_rating < cutoff %}
                   <button
                     type="button"
                     class="btn btn-danger"
                     style="float:right"
                     onclick="alert('Flagging this review!')">
                     <span class="glyphicon glyphicon-flag" aria-hidden="true"></span>
                   </button>
                 {% endif %}
               </div>
             </div>
           </li>
         {% endfor %}
       </ul>
     </div>
     {% if postsQuery.results.entities.size > count %}
       <hr/>
       <button
         onclick="alert('Not yet implemented :)')"
         class="button1"
         style="margin: 0 auto; display:block">{{ load_more_label | default: "Load More" }}</button>
     {% endif %}
   {% endif %}
   
   {% manifest %}
     {
     "type": "Functional",
       "displayName": "Posts",
       "description": "Shows all posts",
       "tables": ["cr50f_review"],
       "params": [
         {
           "id": "name",
           "displayName": "Title",
           "description": "Let's give it a title"
         },
         {
           "id": "count",
           "displayName": "Count",
           "description": "No. of items"
         },
         {
           "id": "columns",
           "displayName": "# of Columns",
           "description": "less than 12"
         },
         {
           "id": "cutoff",
           "displayName": "Limit for review",
           "description": "Number between 1 and 10"
         },
         {
           "id": "load_more_label",
           "displayName": "Load more label",
           "description": ""
         }
       ]
     }
   {% endmanifest %}
   

2. แทนที่อินสแตนซ์ทั้งหมดของ cr50f ด้วยชื่อสคีมาของตารางใหม่ ลักษณะนี้ควรดูแลคุณสมบัติ fetchXML และ HTML และ {% manifest %}

ขั้นตอนที่ 3: ใช้เทมเพลตเว็บ

1. เพิ่มเทมเพลตเว็บใหม่ในเพจสำเนาของเพจ เช่น เพิ่ม {% include 'product-reviews' name:'Product Review' count:'15' columns:'3' cutoff:'5' load_more_label:'Load more entries' %} หรือ {% include 'product-reviews' name:'Product Review' count:'3' columns:'3' cutoff:'5' load_more_label:'Load more entries' %} โดยใช้ Visual Studio Code สำหรับเว็บ
2. แก้ไขและกำหนดค่าคุณสมบัติของเทมเพลตเว็บในสตูดิโอออกแบบ
3. ใช้ส่วนประกอบซ้ำในเว็บเพจต่างๆ ตามต้องการ และทำซ้ำขั้นตอนก่อนหน้าเพื่อกำหนดค่าการแสดงผลตามความต้องการของคุณ
4. เลือก แก้ไขข้อมูล เพื่ออัปเดตเรกคอร์ดในตารางที่สร้างขึ้นใหม่

ดูเพิ่มเติม

• วิธีการสร้างส่วนประกอบของเทมเพลตเว็บ
• แสดงเรกคอร์ดเป็นวงล้อ
• แสดงตำแหน่งเป็นการ์ด