Partager via

Afficher des évaluations de produit sous forme de cartes

  • Article

Cet exemple montre comment utiliser le manifeste pour étendre un modèle Web afin d’afficher des évaluations de produit sur une page Web au format de carte.

Composant de modèle Web sous forme d’évaluation de produit.

Comment créer un composant de modèle Web pour afficher des évaluations de produit

Étape 1 : Préparation

  1. Créez une table dans votre environnement avec les colonnes correspondantes (nom, contenu et évaluation)
  2. Copiez le nom logique de la table.
  3. Créez quelques exemples d’enregistrements dans la nouvelle table.

Étape 2 : Configurer le modèle Web

  1. Copiez le code source dans un nouveau modèle Web dans votre environnement. Voir Comment créer un composant de modèle Web pour plus d’informations.

    {% 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. Remplacez toutes les instances de cr50f par le nom de schéma de la nouvelle table. Cela devrait prendre en charge les propriétés fetchXML et tout le code HTML et {% manifest %}.

Étape 3 : Utiliser le modèle Web

  1. Ajoutez le nouveau modèle Web à la copie de page d’une page, par exemple, ajoutez {% include 'product-reviews' name:'Product Review' count:'15' columns:'3' cutoff:'5' load_more_label:'Load more entries' %} ou {% include 'product-reviews' name:'Product Review' count:'3' columns:'3' cutoff:'5' load_more_label:'Load more entries' %} à l’aide de Visual Studio Code pour le Web.
  2. Modifiez et configurez les propriétés du modèle Web dans le studio de conception.
  3. Réutilisez le composant dans différentes pages Web selon vos besoins et répétez l’étape précédente pour configurer l’affichage en fonction de vos exigences.
  4. Sélectionnez Modifier les données pour mettre à jour les enregistrements dans la table nouvellement créée.

Voir aussi