Κοινή χρήση μέσω

Εμφάνιση κριτικών προϊόντων ως καρτών

  • Άρθρο

Αυτό το δείγμα δείχνει τον τρόπο χρήσης της δηλωτικού για την επέκταση ενός προτύπου Web ώστε να εμφανίζει κριτικές προϊόντων σε μια ιστοσελίδα σε μορφή κάρτας.

Στοιχείο προτύπου Web ως έκδοση προεπισκόπησης προϊόντος.

Οδηγίες δημιουργίας στοιχείου προτύπου Web για εμφάνιση κριτικών προϊόντων

Βήμα 1: Προετοιμασία

  1. Δημιουργήστε έναν πίνακα στο περιβάλλον σας με τις στήλες που αντιστοιχούν (όνομα, περιεχόμενο και χαρακτηρισμός)
  2. Αντιγράψτε το λογικό όνομα του πίνακα.
  3. Δημιουργήστε μερικά δείγματα καρτελών στο νέο πίνακα.

Βήμα 2: Ορίστε τις παραμέτρους του προτύπου web

  1. Αντιγράψτε τον κωδικό προέλευσης σε ένα νέο πρότυπο web στο περιβάλλον σας. Ανατρέξτε στο θέμα Τρόπος δημιουργίας ενός στοιχείου προτύπου web για περισσότερες λεπτομέρειες.

    {% 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: Χρησιμοποιήστε το πρότυπο web

  1. Προσθέστε το νέο πρότυπο web στο αντίγραφο σελίδας μιας σελίδας, για παράδειγμα, προσθέστε {% 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 για το web.
  2. Επεξεργαστείτε και ρυθμίστε τις παραμέτρους των ιδιοτήτων του προτύπου Web στο στούντιο σχεδιασμού.
  3. Μπορείτε να χρησιμοποιήσετε ξανά το στοιχείο σε διαφορετικές ιστοσελίδες ανάλογα με τις ανάγκες και επαναλάβετε το προηγούμενο βήμα για να ρυθμίσετε τις παραμέτρους της εμφάνισης σύμφωνα με τις απαιτήσεις σας.
  4. Επιλέξτε επεξεργασία δεδομένων για να ενημερώσετε καρτέλες στον πίνακα που μόλις δημιουργήθηκε.

Δείτε επίσης