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.