Como instalar o Klaviyo Reviews for WooCommerce

O que você vai aprender

Saiba como instalar o Avaliações da Klaviyo em seu WooCommerce armazenar e adicionar widget de avaliações. Para saber mais sobre todas as etapas necessárias para começar, visite o site Getting started with Avaliações da Klaviyo.

Antes de começar

Há quatro métodos para instalar o Klaviyo Reviews for WooCommerce. A opção certa para o senhor depende do seu nível de conhecimento técnico e da sua configuração do Wordpress. Use o fluxograma abaixo para selecionar o melhor método de instalação para o senhor. 

Ao selecionar um método de instalação, considere o seguinte: 

• A adição de classificações por estrelas às páginas de coleções só é compatível com dois métodos de instalação: plug-in com editor visual e códigos curtos. 
• Considere seu nível de acesso ao editor no Wordpress. Nem todos os usuários têm a opção de editar diretamente os arquivos de tema do site. Se o senhor não tiver acesso ao seu arquivo functions.php ou similar, use um dos outros métodos. 
• Vários desses métodos exigem a adição de outro plugin ao seu site Wordpress. As instruções abaixo fazem referência ao plug-in Code Snippets, mas a Klaviyo não endossa nenhum plug-in específico e não pode ajudar na solução de problemas relacionados ao plug-in. 

Depois de selecionar as etapas de instalação corretas para o senhor, prossiga para as instruções relevantes. 

Saiba como instalar o Klaviyo Reviews for WooCommerce por: 

• Instalação de um plug-in e uso do editor visual de temas 
• Instalação de um plug-in sem usar o editor visual de temas
• Adicionar códigos curtos
• Modificação dos arquivos do tema

Widgets de avaliações disponíveis

Depois de instalar o Klaviyo Reviews, sua loja exibirá widgets de avaliações, que apresentam detalhes de classificação e avaliação. 

• Widget de classificação por estrelas
  Exibe sua classificação atual de estrelas para um determinado produto e, na maioria das vezes, é adicionado abaixo do nome do produto na página do produto ou em uma página de coleção.
  
• Widget de avaliações de produtos
  Mostra um gráfico detalhando todas as classificações que um produto recebeu, imagens de usuários enviadas com avaliações e o feedback mais comum que o produto recebeu.
  
  Abaixo, há uma lista de todas as avaliações publicadas e perguntas de clientes, além de uma barra de pesquisa, filtros de avaliação, um botão Escrever uma avaliação e um botão Fazer uma pergunta.
  
  Esse widget geralmente é adicionado próximo à parte inferior da página de um produto.
• Widget de carrossel de resenhas em destaque
  Exibe avaliações destacadas de todos os seus produtos. O senhor pode apresentá-lo em sua página inicial, em uma página de avaliações independente ou em qualquer outro lugar do seu site. O senhor também pode selecionar as avaliações que são exibidas nesse widget. Se disponíveis, as imagens enviadas pelos clientes acompanham cada avaliação; as imagens de seus produtos são usadas se nenhuma imagem for enviada.
  
• SEO / Todas as avaliações widget
  Exibe todas as suas avaliações de todos os produtos em uma única página. Use o site widget para aprimorar seu SEO e oferecer um local único para que os clientes em potencial vejam o que seus clientes atuais adoram. Esse widget é geralmente adicionado a uma página independente de Avaliações em seu site.
  

Instale um plug-in e use o editor visual de temas 

Para usar o editor visual de temas para adicionar widgets do Klaviyo Reviews ao seu site, o senhor deve primeiro adicionar um trecho de código para carregar esses blocos de arrastar e soltar no seu tema. O senhor pode usar uma ferramenta como o Code Snippets para adicionar o código-fonte desses blocos e, em seguida, usar o editor visual de temas para arrastar e soltar os widgets do Klaviyo Reviews em seu tema. 

Adicionar código-fonte do widget de avaliações

Essas instruções pressupõem que o senhor já tenha instalado o plug-in Code Snippets, mas pode usar um plug-in diferente. 

1. Selecione Snippets > Add new na barra lateral do Wordpress.
   
2. No campo Enter title here (Digite o título aqui ), nomeie o snippet de forma clara, como "Klaviyo Reviews Widgets Code".
3. Na guia Functions (PHP) da seção Code (Código ), adicione o trecho de código abaixo.
4. Clique em Save Changes and Activate (Salvar alterações e ativar).

Revisões do código-fonte do widget

função register_klaviyo_reviews_blocks() {
    // Register the blocks
    register_block_type( 'klaviyo/product-reviews', array(
        'editor_script' => 'klaviyo-block-editor-script',
        'render_callback' => 'render_klaviyo_product_reviews',
    ));
    register_block_type( 'klaviyo/product-star-ratings', array(
        'editor_script' => 'klaviyo-block-editor-script',
        'render_callback' => 'render_klaviyo_star_ratings',
    ));
    register_block_type( 'klaviyo/featured-reviews', array(
        'editor_script' => 'klaviyo-block-editor-script',
        'render_callback' => 'render_klaviyo_featured_reviews',
    ));
    register_block_type( 'klaviyo/all-reviews', array(
        'editor_script' => 'klaviyo-block-editor-script',
        'render_callback' => 'render_klaviyo_all_reviews',
    ));
}
add_action( 'init', 'register_klaviyo_reviews_blocks' );
function enqueue_klaviyo_block_editor_assets() {
    // Registrar e enfileirar a imagem do logotipo
    wp_register_script(
        'klaviyo-block-editor-script',
        false,
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        false,
        true
    );
    $logo_url = plugins_url( 'img/klaviyo-logo.png', 'klaviyo/klaviyo.php' );
    wp_add_inline_script( 'klaviyo-block-editor-script', '
        ( function( blocks, element ) {
            var el = element.createElement;
            // Adicionar categoria personalizada
            blocks.updateCategory( "widgets", {
                slug: "klaviyo",
                title: "Klaviyo",
                icon: el("img", { src: "' . $logo_url . '", style: { width: "20px", height: "20px" } })
            } );
            blocks.registerBlockType( "klaviyo/product-reviews", {
                title: "Klaviyo Product Reviews",
                ícone: "admin-comments",
                category: "klaviyo",
                edit: function() {
                    return el(
                       "div",
                        { className: "klaviyo-product-reviews" },
                       "As avaliações de produtos da Klaviyo serão exibidas aqui"
                    );
                },
                save: function() {
                    return null;
                },
            });
            blocks.registerBlockType( "klaviyo/product-star-ratings", {
                title: "Klaviyo Star Ratings",
                ícone: "star-filled",
                categoria: "klaviyo",
                edit: function() {
                    return el(
                       "div",
                        { className: "klaviyo-product-star-ratings" },
                       "As classificações por estrelas dos produtos da Klaviyo serão exibidas aqui"
                    );
                },
                save: function() {
                    return null;
                },
            });
            blocks.registerBlockType( "klaviyo/featured-reviews", {
                title: "Klaviyo Featured Reviews",
                ícone: "admin-post",
                category: "klaviyo",
                edit: function() {
                    return el(
                       "div",
                        { className: "klaviyo-featured-reviews" },
                       "As avaliações em destaque do Klaviyo serão exibidas aqui"
                    );
                },
                save: function() {
                    return null;
                },
            });
            blocks.registerBlockType( "klaviyo/all-reviews", {
                title: "Klaviyo All Reviews",
                ícone: "admin-page",
                category: "klaviyo",
                edit: function() {
                    return el(
                       "div",
                        { className: "klaviyo-all-reviews" },
                       "Klaviyo Todas as avaliações serão exibidas aqui"
                    );
                },
                save: function() {
                    return null;
                },
            });
        } )(
            window.wp.blocks,
            window.wp.element
        );
    ' );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_klaviyo_block_editor_assets' );
// Funções de retorno de chamada para renderizar os blocos
função render_klaviyo_product_reviews( $attributes, $content ) {
    global $product;
    if ( is_product() && isset($product) ) {
        return "<div id='klaviyo-reviews-all' data-id='" . esc_attr($product->get_id()) . "'></div>";
    }
}
function  render_klaviyo_star_ratings( $attributes, $content ) {
    global $product;
    if (isset($product)) {
        return "<div class='klaviyo-star-rating-widget' data-id='" . esc_attr($product->get_id()) . "'></div>";
    }
}
function render_klaviyo_featured_reviews( $attributes, $content ) {
    return "<div id='klaviyo-featured-reviews-carousel'></div>";
}
function render_klaviyo_all_reviews( $attributes, $content ) {
    return "<div id='fulfilled-reviews-all' data-id='all'></div>";
}

Adicionar plug-ins do Klaviyo Reviews

1. Navegue até Appearance > Editor. 
2. Selecione Templates. 
3. Escolha o modelo Single Product. Observe que ele pode ter um nome ligeiramente diferente. 
4. Clique em + para abrir o menu de blocos.
    
5. Navegue até a seção Klaviyo do menu Blocks (Blocos ).
   
6. Arraste e solte os widgets do Klaviyo Reviews em seu tema.
7. Clique em Salvar.

Adicionar o widget de classificação por estrelas das coleções

1. Navegue até Appearance > Editor. 
2. Selecione Templates. 
3. Escolha uma página que contenha uma coleção de produtos. 
4. Clique em + para abrir o menu de blocos.
    
5. Navegue até a seção Klaviyo do menu Blocks (Blocos ). 
6. Arraste o widget de classificação por estrelas para qualquer produto da coleção.
7. Clique em Salvar.

.page-id-YOUR_PAGE_ID 

.klaviyo-star-rating-widget { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    margin: 0 auto; 
}

Instalar um plugin e adicionar widgets com código

Esse processo requer a adição de uma ferramenta de snippet de código de terceiros, para que o senhor possa adicionar código ao seu site sem editar diretamente os arquivos do tema. O senhor pode usar uma ferramenta como o Code Snippets para adicionar o código desses widgets. 

Adicionar código-fonte do widget de avaliações

Essas instruções pressupõem que o senhor já tenha instalado o plug-in Code Snippets, mas pode usar um plug-in diferente. 

1. Selecione Snippets > Add new na barra lateral do Wordpress.
   
2. No campo Enter title here (Digite o título aqui ), nomeie o snippet de forma clara, como "Klaviyo Reviews Widgets Code".
3. Na guia Functions (PHP) da seção Code (Código ), adicione os trechos de código abaixo.
4. Clique em Save Changes and Activate (Salvar alterações e ativar).

O senhor deve instalar um trecho de código para cada widget que planeja usar. As seções abaixo descrevem o código de cada widget. 

Trecho de código do widget de análises de produtos

Para ajustar o local do widget em seu site, edite o local ('woocommerce_after_single_product_summary') e a prioridade(15) na função add_action.

Função klaviyo_add_product_reviews_widget() {
    global $product;
    if (is_product() && isset($product)) {
        $product_id = $product->get_id();
        echo "<div id='klaviyo-reviews-all' data-id='{$product_id}'></div>" ;
    }
}
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15);

Trecho de código do widget de classificação por estrelas

Para ajustar o local do widget em seu site, edite o local ('woocommerce_single_product_summary') e a prioridade(6) na função add_action.

Função klaviyo_add_product_star_ratings_widget() {
    global $product;
    if (is_product() && isset($product)) {
        $product_id = $product->get_id();
        echo "<div class='klaviyo-star-rating-widget' data-id='{$product_id}'></div>" ;
    }
}
add_action('woocommerce_single_product_summary', 'klaviyo_add_product_star_ratings_widget', 6);

Trechos de código opcionais adicionais

Use esses trechos de código para adicionar widgets opcionais em qualquer lugar de seu site. Observe que o senhor deve adicioná-las ao HTML de uma página específica; elas não podem ser adicionadas ao arquivo functions.php.

SEO widget

<div id='klaviyo-reviews-all' data-id='all'></div>

Widget de carrossel de resenhas em destaque

<div id='klaviyo-featured-reviews-carousel'></div>

Adicionar códigos curtos

Esse processo envolve primeiro o registro dos códigos curtos nos arquivos do seu tema e, em seguida, a inserção dos códigos curtos em qualquer lugar do seu site. 

Para fazer isso, primeiro é necessário adicionar uma ferramenta de snippet de código de terceiros para que possa adicionar código ao seu site sem editar diretamente os arquivos do tema. O senhor pode usar uma ferramenta como o Code Snippets para adicionar o código desses widgets. 

Registre os códigos curtos e adicione widgets

Essas instruções pressupõem que o senhor já tenha instalado o plug-in Code Snippets, mas pode usar um plug-in diferente. 

1. Selecione Snippets > Add new na barra lateral do Wordpress.
   
2. No campo Enter title here (Digite o título aqui ), nomeie o snippet de forma clara, como "Klaviyo Reviews Widgets Code".
3. Na guia Functions (PHP) da seção Code (Código ), adicione os trechos de código abaixo.
4. Clique em Save Changes and Activate (Salvar alterações e ativar).
5. Adicione o código curto de cada widget à página em que deseja que o widget seja exibido. 

Trechos de código e códigos curtos

Widget de avaliações de produtos

Trecho de código (adicione à guia Funções (PHP)):

Função klaviyo_add_product_reviews_widget() {
    global $product;
	Se (isset($product)) {
        $product_id = $product->get_id();
        $tag = "<div id='klaviyo-reviews-all' data-id='{$product_id}'></div>" ;
		return $tag;
    }
}
add_shortcode('klaviyo-reviews-all', 'klaviyo_add_product_reviews_widget');

Código curto: [klaviyo-reviews-all]

Widget de classificação por estrelas

Trecho de código (adicione à guia Funções (PHP)):

Função klaviyo_add_product_star_ratings_widget() {
    global $product;
    Se (isset($product)) {
        $product_id = $product->get_id();
        $tag = "<div class='klaviyo-star-rating-widget' data-id='{$product_id}'></div>" ;
		return $tag;
    }
}
add_shortcode('klaviyo_star_rating', 'klaviyo_add_product_star_ratings_widget');

Código curto: [klaviyo_star_rating].

SEO / Todas as avaliações & Featured Carousel widget

Trecho de código (adicione à guia Funções (PHP)):

function klaviyo_add_featured_reviews_widget() {
    return "<div id='klaviyo-featured-reviews-carousel'></div>";
}
function klaviyo_add_all_reviews_widget() {
    return "<div id='fulfilled-reviews-all' data-id='all'></div>";
}

Código curto: [klaviyo-featured-reviews-carousel].

Código curto: [fulfilled-reviews-all].

Modifique seus arquivos de tema diretamente

Se o senhor tiver acesso ao arquivo functions.php da instância do Wordpress, use os trechos de código abaixo para adicionar widgets de avaliações. 

Trecho de código do widget de análises de produtos

// criar uma função que renderize uma div dinâmica com o ID correto do produto
function klaviyo_add_product_reviews_widget() {
    global $product;
    if (is_product() && isset($product)) {
        $product_id = $product->get_id();
        echo "<div id='klaviyo-reviews-all' data-id='{$product_id}'></div>" ;
    }
}
// colocar o widget após o resumo de um único produto
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15);

Trecho de código do widget de classificação por estrelas

// criar uma função que renderize uma div dinâmica com o ID correto do produto
function klaviyo_add_product_star_ratings_widget() {
    global $product;
    Se (is_product() && isset($product)) {
        $product_id = $product->get_id();
        echo "<div class='klaviyo-star-rating-widget' data-id='{$product_id}'></div>" ;
    }
}
// colocar o widget após o resumo de um único produto
add_action('woocommerce_single_product_summary', 'klaviyo_add_product_star_ratings_widget', 6);

Trechos de código opcionais adicionais

Adicione esses trechos de código para adicionar widgets opcionais em qualquer lugar de seu site. Observe que o senhor deve adicioná-las ao HTML de uma página específica; elas não podem ser adicionadas ao arquivo functions.php.

SEO / Todas as análises widget

<div id='klaviyo-reviews-all' data-id='all'></div>

Widget de carrossel de resenhas em destaque

<div id='klaviyo-featured-reviews-carousel'></div>

Resultado

Depois de concluir essas etapas, os widgets do Klaviyo Reviews aparecerão em sua loja on-line. 

Recursos adicionais

• Como começar a usar o recurso Klaviyo Reviews
• Como solicitar avaliações de seus clientes com os fluxos do Klaviyo Reviews