Delen via

Geef productbeoordelingen weer als kaarten

  • Artikel

In dit voorbeeld ziet u hoe u het manifest kunt gebruiken om een ​​websjabloon uit te breiden om productbeoordelingen op een webpagina weer te geven in kaartvorm.

Websjablonencomponent als productbeoordeling.

Een websjablooncomponent maken voor weergave van productbeoordelingen

Stap 1: Voorbereiding

  1. Maak een tabel aan in uw omgeving met de bijpassende kolommen (naam, inhoud en beoordeling)
  2. Kopieer de logische naam van de tabel.
  3. Maak een paar voorbeeldrecords in de nieuwe tabel.

Stap 2: Stel de websjabloon in

  1. Kopieer de broncode naar een nieuwe websjabloon in uw omgeving. Zie Een websjablooncomponent maken voor meer informatie.

    {% 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. Vervang alle exemplaren van cr50f door de schemanaam van de nieuwe tabel. Dit zou zowel voor de fetchXML-eigenschappen als voor de hele HTML en {% manifest %} moeten zorgen.

Stap 3: Gebruik de websjabloon op

  1. Voeg de nieuwe websjabloon toe aan de paginatekst van een pagina, voeg bijvoorbeeld {% include 'product-reviews' name:'Product Review' count:'15' columns:'3' cutoff:'5' load_more_label:'Load more entries' %} of {% include 'product-reviews' name:'Product Review' count:'3' columns:'3' cutoff:'5' load_more_label:'Load more entries' %} toe met behulp van de Visual Studio Code voor het web.
  2. Bewerk en configureer de eigenschappen van de websjabloon in de ontwerpstudio.
  3. Hergebruik de component indien nodig op verschillende webpagina's en herhaal de vorige stap om de weergave te configureren op basis van uw wensen.
  4. Selecteer gegevens bewerken om records in de pas gemaakte tabel bij te werken.

Zie ook