Partilhar via

Apresentar críticas de produtos como cartões

  • Artigo

Este exemplo demonstra como utilizar o manifesto para expandir um modelo Web para apresentar revisões de produtos numa página Web num formato de cartão.

Componente de modelo Web como uma revisão de produto.

Como criar um componente de modelo Web para apresentar revisões de produtos

Passo 1: Preparação

  1. Criar uma tabela no seu ambiente com as colunas correspondentes (nome, conteúdo e classificação)
  2. Copie o nome lógico da tabela.
  3. Crie alguns registos de exemplo na nova tabela.

Passo 2: Configurar o modelo Web

  1. Copie o código de origem para um novo modelo Web no seu ambiente. Consulte Como criar um componente de modelo Web para obter mais detalhes.

    {% 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. Substitua todas as instâncias de cr50f pelo nome de esquema da nova tabela. Isto deverá encarregar-se das propriedades fetchXML e de todo o HTML e {% manifest %}.

Passo 3: Utilizar o modelo Web

  1. Adicione o novo modelo Web à cópia de página de uma página; por exemplo, adicione {% 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' %} utilizando o Visual Studio Code para a Web.
  2. Edite e configure as propriedades do modelo Web no estúdio de design.
  3. Reutilize o componente em diferentes páginas Web conforme necessário e repita o passo anterior para configurar a apresentação com base nos seus requisitos.
  4. Selecione editar dados para atualizar os registos na tabela criada recentemente.

Consulte também