Adicionar uma avaliação sem comentários através dos ícones de estrela

Conceito

Ao longo deste guia, serão apresentados os passos necessários para criar um elemento dentro da tela de Detalhes de Produto que permita que o usuário avalie o produto em questão com uma nota de 1 a 5, através de ícones de estrelas interativos, conforme o exemplo abaixo:

1 - Permitindo avaliações sem comentários

O primeiro passo necessário para criar a funcionalidade é habilitar dentro do Painel Administrativo a possibilidade de usuários adicionarem avaliações sem comentários. Isto pode ser acessado em: Painel Administrativo > Configurações > Configurações Gerais > Portal

Então, basta selecionar a opção "Permitir enviar uma avaliação (nota) sem comentário.", conforme a imagem abaixo:

2 - Editando o template HTML

Todas as alterações necessárias devem ser efetuadas no template "Detalhe de produto". Primeiramente, deve-se alterar o block "Content" para que o elemento HTML seja criado. Para isto, basta alterar o código existente entre as linhas 89 e 99 para o código a seguir:

<div class="col-sm-6">
    {% if flexy_ftwo_current_user_exists() %}
        <div class="product-rate">
            <input type="hidden" value="" class="flexy-product-review-rating">
            <button type="button" class="btn btn-star" onclick="sendRating('1')">
                <i class="fa fa-star-o"></i>
            </button>
            <button type="button" class="btn btn-star" onclick="sendRating('2')">
                <i class="fa fa-star-o"></i>
            </button>
            <button type="button" class="btn btn-star" onclick="sendRating('3')">
                <i class="fa fa-star-o"></i>
            </button>
            <button type="button" class="btn btn-star" onclick="sendRating('4')">
                <i class="fa fa-star-o"></i>
            </button>
            <button type="button" class="btn btn-star" onclick="sendRating('5')">
                <i class="fa fa-star-o"></i>
            </button>
        </div>
    {% else %}
        <div class="product-rating">
            <div class="stars">
                {% set rating = flexy_ftwo_product_average_rating(variant.product) %}

                {% for i in 5..1 %}
                    <span class="star {{ i > rating ? '' : 'active' }}"></span>
                {% endfor %}
            </div>
        </div>
    {% endif %}
</div>

3 - Adicionando a função Javascript

Depois que o template HTML for alterado, torna-se necessário criar a função em JS que é chamada no click do botão, que envia a avaliação de fato. Para isto, basta adicionar o código abaixo dentro do block "JavaScript", logo antes do bloco ser fechado:

<script>
    sendRating = function(value) {
        $(".flexy-product-review-rating").val(value);

        $.ajax({
            url : '/review/create',
            method : 'post',
            data : {
                'rating' : $(".flexy-product-review-rating").val(),
                'comment' : "",
                'product_id' : {{ variant.product.id }}
            },

            success : function() {
                alert("Avaliação enviada com sucesso!");

                $(".flexy-product-review-rating").val("");
            },

            error : function(data) {
                alert($.parseJSON(data.responseText).message);
            }
        });
    }
</script>

4 - Adicionando as classes CSS

Por fim, é preciso criar as classes CSS utilizadas nos elementos adicionados, para que todos eles condizam com o padrão da plataforma. Para adiciona-las, é só colocar o código abaixo dentro do block "css", logo antes do bloco ser fechado:

<style>
    .btn-star {
        padding: 0px 0 3px;
        position: relative;
        float: right;
        color: #418bca;
        border-color: transparent;
        background-color: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0;
        padding: 4px 0px;
    }

    .btn-star:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    .btn-star:hover i {
        font-weight: 900 !important;
        color: #2f417f;
    }
</style>

Esperamos que este material possa ter auxiliado no seu uso à plataforma Flexy, no entanto, caso ainda hajam dúvidas ou necessidades, por favor, entre em contato com nossa equipe de atendimento, que terá prazer em auxiliá-lo.