แสดงเรกคอร์ดเป็นวงล้อ

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

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

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

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

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

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

   
   {% fetchxml locationsQuery %}
       <fetch mapping='logical'>
       <entity name='cr50f_place'>
           <attribute name='cr50f_name' />
           <attribute name='cr50f_address' />
           <attribute name='cr50f_image' />
       </entity>
       </fetch>
   {% endfetchxml %}
   
   <h2>{{ title | default: "Locations" }}</h2>
   
   {% assign interval = interval | integer %}
   {% assign count = count | integer %}
   {% assign height = height | integer %}
   
   <span>Showing {{ count }} out of {{ locationsQuery.results.entities.size }}</span>
   {% if locationsQuery.results.entities.size > 0 %}
       <div id="carousel-example-generic"
       class="carousel slide"
       data-ride="carousel"
       data-interval="{{interval}}">
       <!-- Indicators -->
       <ol class="carousel-indicators">
           {% for location in locationsQuery.results.entities limit: count %}
           <li
               data-target="#carousel-example-generic"
               data-slide-to="{{forloop.index0}}"
               class="{% if forloop.first %}active{% endif %}"></li>
           {% endfor %}
       </ol>
       <!-- Wrapper for slides -->
       <div class="carousel-inner" role="listbox">
           {% for loc in locationsQuery.results.entities limit: count %}
           <div class="item {% if forloop.first %}active{% endif %}" style="background-image:url('{{loc.cr50f_image.Url}}&Full=true'); height: {{height | default:500}}px">
               <div class="carousel-caption" style="background:white">
               <h3>{{ loc.cr50f_name }}</h3>
               <p>{{ loc.cr50f_address }}</p>
               </div>
           </div>
           {% endfor %}
       </div>
       <!-- Controls -->
       <a
           class="left carousel-control"
           href="#carousel-example-generic"
           role="button"
           data-slide="prev">
           <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
           <span class="sr-only">Previous</span>
       </a>
       <a
           class="right carousel-control"
           href="#carousel-example-generic"
           role="button"
           data-slide="next">
           <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
           <span class="sr-only">Next</span>
       </a>
       </div>
   {% endif %}
   
   <style>
       .carousel .item {
       background-size: cover;
       background-repeat: no-repeat;
       }
   </style>
   
   {% manifest %}
       {
       "type": "Functional",
           "displayName": "Locations Slider",
           "description": "Locations slider using the table 'Place' as the data source",
           "tables": ["cr50f_place"],
           "params": [
               {
               "id": "title",
               "displayName": "Title",
               "description": ""
           },{
               "id": "interval",
               "displayName": "Interval",
               "description": "The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. Default: 5000ms"
           },{
               "id": "count",
               "displayName": "Count",
               "description": "The number of locations to display"
           },{
               "id": "height",
               "displayName": "Slide's height",
               "description": "In px, default: 500px"
           }
         ]
       }
   {% endmanifest %}
   
   

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

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

1. เพิ่มเทมเพลตเว็บใหม่ในเพจสำเนาของเพจ เช่น เพิ่ม {% include 'locations-slider' title:'Locations' interval:'6500' count:'4' height:'500' %} หรือ {% include 'locations-slider' title:'Locations' interval:'3500' count:'3' height:'750' %}
2. แก้ไขและกำหนดค่าคุณสมบัติของเทมเพลตเว็บในสตูดิโอออกแบบ
3. ใช้ส่วนประกอบซ้ำในเว็บเพจต่างๆ ตามต้องการ และทำซ้ำขั้นตอนก่อนหน้าเพื่อกำหนดค่าการแสดงผลตามความต้องการของคุณ
4. เลือก แก้ไขข้อมูล เพื่ออัปเดตเรกคอร์ดในตารางที่สร้างขึ้นใหม่

ดูเพิ่มเติม

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