Skip to content

How to integrate testimonials

ricardoon edited this page Apr 22, 2014 · 1 revision

Campos requeridos

sender_name, sender_email, subject, message, product_id

Exemplo para a listagem de depoimentos


{% if testimonials|count > 0 %}

<script type="text/javascript">
$(document).ready(function(){
    $.getScript('{{ base_url('assets/js/jquery.raty.js') }}', function( data, textStatus, jqxhr ) {

      $('.rating-stars-view').each(function(){
          var name = $(this).data('name');
          $(this).raty({
              path: '/assets/img', 
              score: function() {
                  return $(this).attr('data-score');
              },
              readOnly: true
          });
      });

    });
});
</script>
<div class="testimonials">
    <h2>Notas totais</h2>
    <ul class="testimonials-rating-totals" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
         <li style="display:none">
           <span itemprop="reviewCount">{{ testimonials|count }}</span>
           <span itemprop="ratingCount">{{ testimonials|count }}</span>
         </li>
         <li><div class="rating-stars-view pull-left" data-score="{{ testimonial_totals.total }}"></div>Média geral </li>
         <li><div class="rating-stars-view pull-left" data-score="{{ testimonial_totals.rating_look }}"></div>Beleza do produto </li>
         <li><div class="rating-stars-view pull-left" data-score="{{ testimonial_totals.rating_usability }}"></div>Usabilidade do produto </li>
         <li><div class="rating-stars-view pull-left" data-score="{{ testimonial_totals.rating_support }}"></div>Atendimento e segurança </li>
    </ul>
    <hr>
    <h2>O que clientes dizem</h2>
    <div class="testimonials-listing">
       {% for testimonial in testimonials %}
           <div class="testimonial row" itemprop="review" itemscope itemtype="http://schema.org/Review">
                <div class="col-md-8">
                    <strong class="testimonial-author" itemprop="author">{{ testimonial.firstname }}</strong> escreveu na data  
                    <strong class="testimonial-date" itemprop="datePublished">{{ testimonial.created_at|to_formated_date }}</strong>:
                    <div class="testimonial-message" itemprop="description">{{ testimonial.message }}</div>
                </div>
                <div class="col-md-4">
                    <ul class="testimonials-ratings" itemscope itemtype="http://schema.org/Rating">
                         <li><div class="rating-stars-view pull-left" data-score="{{ testimonial.total }}" itemprop="ratingValue" content="{{ testimonial.total }}"></div>Média geral</li>
                         <li><div class="rating-stars-view pull-left" data-score="{{ testimonial.rating_look}}"></div>Beleza do produto</li>
                         <li><div class="rating-stars-view pull-left" data-score="{{ testimonial.rating_usability }}"></div>Usabilidade do produto</li>
                         <li><div class="rating-stars-view pull-left" data-score="{{ testimonial.rating_support }}"></div>Atendimento e segurança</li>
                    </ul>
                </div>
           </div>
           <hr>
       {% endfor %}
    </div>
</div>

{% endif %}


Exemplo para o formulario de dar depoimento


{{ form_open('testimonials/create', {'class': 'testimonial-form'}) }}
    <label for="sender_email">Seu Email</label>
    {{ form_input({'name': 'sender_email', 'class': 'form-control'})  }}
    <label for="sender_name">Seu Nome</label>
    {{ form_input({'name': 'sender_name', 'class': 'form-control'}) }}
    <div class="form-group">
        <label>Quantas estrelas dá para '{{ product.name }}'?</label>
        <ul class="rating-list">
            <li>
                <div class="pull-left rating-stars" data-name="rating_look"></div>
                Beleza do produto
            </li>
            <li>
                <div class="pull-left rating-stars" data-name="rating_usability"></div>
                Usabilidade do produto</li>
            <li>
                <div class="pull-left rating-stars" data-name="rating_support"></div>
                Atendimento e segurança na compra
            </li>
        </ul>
    </div>
    <label for="message">Comentário</label>
    {{ form_textarea({'name': 'message', 'class': 'form-control', 'rows': '5'}) }}
    <p class="help-block">Comente sobre o produto, o design, a usabilidade, as primeiras impressões ao abrir a caixa, a entrega, o atendimento...</p>
    
    {{ form_hidden('referrer', site_url(current_url()))  }}
    {{ form_hidden('subject', 'Depoimento')  }}
    {{ form_hidden('product_id',  product.id) }}
    
    <input type="submit" name="submit" value="Enviar" class="btn btn-primary" />
{{ form_close() }}

<script type="text/javascript">
$(document).ready(function(){
    $.getScript('{{ base_url('assets/js/jquery.raty.js') }}', function( data, textStatus, jqxhr ) {

      $('.rating-stars').each(function(){
          var name = $(this).data('name');
          $(this).raty({path: '/assets/img', scoreName: name});
      });
      $('.testimonial-form').submit(function(e){
          if ($('textarea[name=message]').val() != '' && $('input[name=rating_look]').val()>0 && $('input[name=rating_usability]').val()>0 && $('input[name=rating_support]').val()>0) {
              return true;
          }else{
              e.preventDefault();
              alert('Por favor coloque um comentario e dá estrelas antes de enviar.');
              return false; 
          };
      });

    });
});
</script>