Jak zainstalować Klaviyo Reviews dla WooCommerce

Czego się dowiesz

Dowiedz się, jak zainstalować Klaviyo Reviews na swoim WooCommerce sklep i dodaj recenzje widżet. Aby dowiedzieć się więcej o wszystkich krokach wymaganych do rozpoczęcia gry, odwiedź stronę Pierwsze kroki z Klaviyo Reviews.

Zanim zaczniesz

Istnieją 4 metody instalacji Klaviyo Reviews dla WooCommerce. Wybór odpowiedniego dla Ciebie zależy od Twojego poziomu wiedzy technicznej i konfiguracji Wordpress. Skorzystaj z poniższego schematu, aby wybrać najlepszą dla siebie metodę instalacji. 

Wybierając metodę instalacji, weź pod uwagę następujące kwestie: 

• Dodawanie ocen gwiazdkowych do stron kolekcji jest obsługiwane tylko dla 2 metod instalacji: wtyczka z edytorem wizualnym i skrócony numer do wysyłki SMS. 
• Rozważ swój poziom dostępu do edytora w Wordpress. Nie wszyscy użytkownicy mają możliwość bezpośredniej edycji plików motywów. Jeśli nie masz dostępu do pliku functions.php lub podobnego, użyj jednej z pozostałych metod. 
• Kilka z tych metod wymaga dodania kolejnej wtyczki do Twojej witryny Wordpress. Poniższe instrukcje odnoszą się do wycinka kodu źródłowego wtyczki, ale Klaviyo nie promuje żadnej konkretnej wtyczki i nie może pomóc w rozwiązywaniu problemów związanych z wtyczką. 

Po wybraniu odpowiednich kroków instalacji przejdź do odpowiednich instrukcji. 

Dowiedz się, jak zainstalować Klaviyo Reviews dla WooCommerce: 

• Instalowanie wtyczki i korzystanie z edytora motywów wizualnych 
• Instalowanie wtyczki bez użycia edytora motywów wizualnych
• Dodawanie skróconego numeru do wysyłki SMS
• Modyfikowanie plików motywu

Dostępne recenzje widżet

Po zainstalowaniu Klaviyo Reviews, Twój sklep będzie wyświetlał widżet recenzji, który będzie zawierał funkcje oceny i szczegóły recenzji. 

• Widżet oceny gwiazdkowej
  Wyświetla Twoją aktualną ocenę gwiazdkową dla danego produktu i jest najczęściej dodawany pod nazwą produktu na stronie produktu lub na stronie kolekcji.
  
• Widżet opinii o produkcie
  Wyświetla wykres z podziałem na wszystkie oceny otrzymane przez produkt, zdjęcia użytkowników przesłane wraz z recenzjami oraz najczęstsze opinie, jakie otrzymał produkt.
  
  Poniżej znajduje się lista wszystkich opublikowanych recenzji i pytań klientów wraz z paskiem wyszukiwania, filtrami recenzji, przyciskiem Napisz recenzję i przyciskiem Zadaj pytanie.
  
  Ten widżet jest zwykle dodawany w dolnej części strony produktu.
• Widżet karuzeli wyróżnionych recenzji
  Wyświetla wyróżnione recenzje wszystkich Twoich produktów. Możesz to zrobić na swojej stronie głównej, na osobnej stronie z recenzjami lub w dowolnym innym miejscu w witrynie. Możesz także wybrać recenzje, które są prezentowane w tym widżecie. Jeśli są dostępne, do każdej recenzji dołączane są zdjęcia przesłane przez klientów; jeśli nie przesłano żadnego zdjęcia, używane są zdjęcia Twojego produktu.
  
• SEO / Widżet wszystkich opinii
  Wyświetla wszystkie Twoje recenzje wszystkich produktów na jednej stronie. Skorzystaj z tego widżetu, aby poprawić swoje SEO i zapewnić potencjalnemu klientowi jedno miejsce, w którym może zobaczyć, co lubią Twoi obecni klienci. Ten widżet jest najczęściej dodawany do samodzielnej strony z recenzjami w Twojej witrynie.
  

Zainstaluj wtyczkę i użyj wizualnego edytora motywów 

Aby użyć wizualnego edytora motywów do dodania widżetu Klaviyo Reviews do swojej witryny, musisz najpierw dodać fragment kodu, aby załadować te bloki typu "przeciągnij i upuść" w swoim motywie. Możesz użyć narzędzia takiego jak wycinek kodu źródłowego, aby dodać kod źródłowy dla tych bloków, a następnie użyć wizualnego edytora motywów, aby przeciągnąć i upuścić widżet Klaviyo Reviews do swojego motywu. 

Dodaj opinie o kodzie źródłowym widżetu

Niniejsza instrukcja zakłada, że masz już zainstalowany wycinek kodu źródłowego wtyczka, ale możesz użyć innej wtyczki. 

1. Wybierz Snippets > Dodaj nowy z paska bocznego Wordpress.
   
2. W polu Wprowadź tytuł nadaj snippetowi jasną nazwę, na przykład "Klaviyo Reviews widżet Code".
3. W zakładce Funkcje (PHP) w sekcji Kod dodaj poniższy wycinek kodu źródłowego.
4. Kliknij przycisk Zapisz zmiany i aktywuj.

Recenzje kodu źródłowego widżetu

function 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() {
 // Zarejestruj i zapisz obraz logo
 wp_register_script(
 'Klaviyo-blok-editor-script',
 false,
 array( 'wp-blok', 'wp-element', 'wp-editor' ),
 false,
 true
 );
   $logo_url = plugins_url( 'img/Klaviyo-logo.png', 'Klaviyo/Klaviyo.php' );
 wp_add_inline_script( 'Klaviyo-blok-editor-script', '
 ( function( blok, element ) {
 var el = element.createElement;
            // Dodaj niestandardową kategorię
 blok.updateCategory( "widżet", {
 slug: "Klaviyo" ,
 title: "Klaviyo",
 icon: el("img", { src: "' . $logo_url . '", styl: { width: "20px", height: "20px" } })
           } );
 blok.registerBlockType( "Klaviyo/product-reviews", {
 title: "Klaviyo Product Reviews",
 icon: "admin-comments",
 category: "Klaviyo",
 edit: function() {
 return el(
 " div",
                        { className: "klaviyo-product-reviews" },
 "Klaviyo Recenzje produktów będą wyświetlane tutaj"
 );
 },
 save: function() {
                    return null;
                },
 });
 blok.registerBlockType( "Klaviyo/product-star-ratings", {
 title: "Klaviyo Star Ratings",
 icon: "wypełnione gwiazdkami",
 category: "Klaviyo",
 edit: function() {
 return el(
 " div",
                        { className: "klaviyo-product-star-ratings" },
 "Klaviyo Product Star Ratings will be displayed here"
 );
 },
 save: function() {
                    return null;
                },
 });
 blok.registerBlockType( "Klaviyo/featured-reviews", {
 title: "Klaviyo Featured Reviews",
 icon: "admin-post",
 category: "Klaviyo",
 edit: function() {
 return el(
 " div",
                        { className: "klaviyo-featured-reviews" },
 "Klaviyo Featured Reviews will be displayed here"
 );
 },
 save: function() {
                    return null;
                },
 });
 blok.registerBlockType( "Klaviyo/all-reviews", {
 title: "Klaviyo Wszystkie recenzje",
 icon: "admin-page",
 category: "Klaviyo",
 edit: function() {
 return el(
 " div",
                        { className: "klaviyo-all-reviews" },
 "Klaviyo Wszystkie recenzje będą wyświetlane tutaj"
 );
 },
 save: function() {
                    return null;
                },
 });
 } )(
 window.wp.blok,
 window.wp.element
        );
 ' );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_klaviyo_block_editor_assets' );
// Funkcje wywołania zwrotnego do renderowania bloku
function 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>";
}

Dodaj Klaviyo Reviews wtyczka

1. Przejdź do Wygląd > Edytor. 
2. Wybierz szablon. 
3. Wybierz szablon pojedynczego produktu. Zwróć uwagę, że może mieć nieco inną nazwę. 
4. Kliknij +, aby otworzyć menu bloków.
    
5. Przejdź do sekcji Klaviyo w menu blok.
   
6. Przeciągnij i upuść widżet Klaviyo Reviews na swój motyw.
7. Kliknij Zapisz.

Dodaj widżet oceny gwiazdkowej kolekcji

1. Przejdź do Wygląd > Edytor. 
2. Wybierz szablon. 
3. Wybierz stronę zawierającą kolekcję produktów. 
4. Kliknij +, aby otworzyć menu bloków.
    
5. Przejdź do sekcji Klaviyo w menu blok. 
6. Przeciągnij widżet oceny gwiazdkowej na dowolny produkt w kolekcji.
7. Kliknij Zapisz.

.page-id-YOUR_PAGE_ID 

Klaviyo-star-rating-widżet { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    margin: 0 auto; 
}

Zainstaluj wtyczkę i dodaj widżet z kodem

Proces ten wymaga dodania zewnętrznego narzędzia do wycinka kodu źródłowego, dzięki czemu możesz dodać kod do swojej witryny bez bezpośredniej edycji plików motywu. Możesz użyć narzędzia takiego jak wycinek kodu źródłowego, aby dodać kod dla tych widżetów. 

Dodaj opinie o kodzie źródłowym widżetu

Niniejsza instrukcja zakłada, że masz już zainstalowany wycinek kodu źródłowego wtyczka, ale możesz użyć innej wtyczki. 

1. Wybierz Snippets > Dodaj nowy z paska bocznego Wordpress.
   
2. W polu Wprowadź tytuł nadaj snippetowi jasną nazwę, na przykład "Klaviyo Reviews widżet Code".
3. W zakładce Funkcje (PHP) w sekcji Kod dodaj poniższy wycinek kodu źródłowego.
4. Kliknij przycisk Zapisz zmiany i aktywuj.

Musisz zainstalować wycinek kodu źródłowego dla każdego widżetu, którego chcesz używać plan. Poniższe sekcje przedstawiają kod dla każdego widżetu. 

Opinie o produkcie widżet wycinek kodu źródłowego

Aby dostosować lokalizację widżetu na swojej stronie, edytuj lokalizację ('woocommerce_after_single_product_summary') i priorytet(15) w funkcji add_action.

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>" ;
 }
}
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15);

Gwiazdkowy widżet wycinek kodu źródłowego

Aby dostosować lokalizację widżetu na swojej stronie, edytuj lokalizację ('woocommerce_single_product_summary') i priorytet(6) w funkcji add_action.

function 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);

Dodatkowy opcjonalny wycinek kodu źródłowego

Użyj tych wycinków kodu źródłowego, aby dodać opcjonalny widżet w dowolnym miejscu na swojej stronie. Pamiętaj, że musisz dodać je do kodu HTML konkretnej strony; nie można ich dodać do pliku functions.php.

SEO widżet

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

Widżet karuzeli wyróżnionych recenzji

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

Dodaj skrócony numer do wysyłki SMS

Proces ten obejmuje najpierw zarejestrowanie skróconego numeru do wysyłki SMS w plikach motywu, a następnie wstawienie skróconego numeru do wysyłki SMS w dowolnym miejscu na Twojej stronie. 

Aby to zrobić, musisz najpierw dodać narzędzie wycinek kodu źródłowego innej firmy, aby móc dodawać kod do swojej witryny bez bezpośredniej edycji plików motywu. Możesz użyć narzędzia takiego jak wycinek kodu źródłowego, aby dodać kod dla tych widżetów. 

Zarejestruj skrócony numer do wysyłki SMS i dodaj widżet

Niniejsza instrukcja zakłada, że masz już zainstalowany wycinek kodu źródłowego wtyczka, ale możesz użyć innej wtyczki. 

1. Wybierz Snippets > Dodaj nowy z paska bocznego Wordpress.
   
2. W polu Wprowadź tytuł nadaj snippetowi jasną nazwę, na przykład "Klaviyo Reviews widżet Code".
3. W zakładce Funkcje (PHP) w sekcji Kod dodaj poniższy wycinek kodu źródłowego.
4. Kliknij przycisk Zapisz zmiany i aktywuj.
5. Dodaj skrócony numer do wysyłki SMS każdego widżetu do strony, na której ma się on pojawiać. 

wycinek kodu źródłowego i skrócony numer do wysyłki SMS

Widżet recenzji produktów

wycinek kodu źródłowego (dodaj do zakładki Funkcje (PHP)):

function klaviyo_add_product_reviews_widget() {
 global $product;
if (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');

skrócony numer do wysyłki SMS: [Klaviyo Reviews-all]

Widżet z oceną gwiazdkową

wycinek kodu źródłowego (dodaj do zakładki Funkcje (PHP)):

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

skrócony numer do wysyłki SMS: [klaviyo_star_rating]

SEO / Wszystkie opinie & Featured Carousel widżet

wycinek kodu źródłowego (dodaj do zakładki Funkcje (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>";
}

skrócony numer do wysyłki SMS: [Klaviyo-featured-reviews-carousel]

skrócony numer do wysyłki SMS: [fulfilled-reviews-all]

Modyfikuj pliki motywu bezpośrednio

Jeśli masz dostęp do pliku functions.php swojej instancji Wordpress, użyj poniższego wycinka kodu źródłowego, aby dodać widżet recenzji. 

Opinie o produkcie widżet wycinek kodu źródłowego

// utwórz funkcję, która renderuje dynamiczny div z poprawnym identyfikatorem produktu
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>" ;
 }
}
// umieść widżet po podsumowaniu pojedynczego produktu
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15);

Gwiazdkowy widżet wycinek kodu źródłowego

// utwórz funkcję, która renderuje dynamiczny div z poprawnym identyfikatorem produktu
function klaviyo_add_product_star_ratings_widget() {
 global $product;
 if (is_product() && isset($product)) {
 $product_id = $product->get_id();
       echo "<div class='klaviyo-star-rating-widżet' data-id='{$product_id}'></div>" ;
 }
}
// umieść widżet po podsumowaniu pojedynczego produktu
add_action('woocommerce_single_product_summary', 'klaviyo_add_product_star_ratings_widget', 6);

Dodatkowy opcjonalny wycinek kodu źródłowego

Dodaj ten wycinek kodu źródłowego, aby dodać opcjonalny widżet w dowolnym miejscu na swojej stronie. Pamiętaj, że musisz dodać je do kodu HTML konkretnej strony; nie można ich dodać do pliku functions.php.

Widżet SEO / Wszystkie recenzje

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

Widżet karuzeli wyróżnionych recenzji

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

Rezultat

Po wykonaniu tych kroków w Twoim sklepie internetowym pojawi się widżet Klaviyo Reviews. 

Dodatkowe źródła

• Klaviyo Reviews – pierwsze kroki
• Jak poprosić klienta o opinię za pomocą Klaviyo Reviews sekwencja