Jak dodać widżet Klaviyo Reviews do swojej aplikacji mobilnej za pomocą Tapcart – Klaviyo - Help Center - PL

Czego się dowiesz

Dowiedz się, jak dodać widżet Klaviyo Reviews do aplikacji mobilnej zbudowanej za pomocą Tapcart. Widżet ten może zostać dodany do Twojej aplikacji Tapcart za pomocą niestandardowego bloku:

Widżet oceny gwiazdkowej
Tylko strony produktów; pokaż ogólną ocenę produktu w gwiazdkach.
Recenzje produktów widżet
Tylko strony produktów; pokaż podsumowanie i listę wszystkich recenzji produktu, a także przyciski umożliwiające zadanie pytania lub pozostawienie recenzji.
Widżet karuzeli polecanych recenzji
Dowolna strona; pokaż wybór polecanych recenzji kilku produktów

Tapcart jest dostępny tylko dla sklepów zbudowanych za pomocą Shopify.

Kilka słów na początek

Ten proces jest dostępny tylko dla firm, które:

Zbudowałeś już aplikację mobilną z Tapcart
Użyj Tapcart Enterprise plan
Miej aktywni Klaviyo Reviews plan

Jeśli nie skonfigurowałeś jeszcze Klaviyo Reviews, przejdź do naszego artykułu na temat Pierwsze kroki z Klaviyo Reviews.

Dodaj widżet Klaviyo Reviews za pomocą niestandardowego bloku w Tapcart

Wykonaj poniższe kroki, aby dodać widżet opinii w Tapcart. Musisz powtórzyć te kroki (tj. utworzyć oddzielny blok niestandardowy) dla wszystkich 3 widżetów.

Otwórz edytor Tapcart.
W App Studio przełącz się z Design blok na Custom blok.
Kliknij Uruchom edytor bloków, aby utworzyć nowy niestandardowy blok.
Nazwij widżet w jasny sposób, na przykład Klaviyo Star Rating custom blok.

W zakładce JS edytora bloków dodaj następujący wycinek kodu źródłowego. Zastąp PUBLIC_API_KEY swoim 6-znakowym identyfikatorem witryny Klaviyo.

var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js&module=reviews';
document.head.appendChild(script);

W zakładce HTML edytora bloków wklej fragment kodu widżetu, który chcesz dodać (np. widżet oceny gwiazdkowej). Znajdź wycinek kodu źródłowego poniżej:

Kliknij przycisk Zapisz.
Kliknij przycisk Zamknij, aby zamknąć edytor.
Z listy rozwijanej App Studio wybierz Szczegóły produktu.

Ten krok jest wymagany w przypadku widżetów gwiazdek i recenzji produktów. Możesz umieścić widżet polecanej recenzji na dowolnej stronie aplikacji.
Przeciągnij zapisany niestandardowy blok, który właśnie utworzyłeś, do szablonu.
Edytor może nie załadować widżetu bezpośrednio; zamiast tego zobaczysz nazwę bloku jako zwykły tekst. Jest to oczekiwane.
Kliknij Podgląd aplikacji i przejdź do strony, na której dodałeś aplikację. Zauważ, że widżet wyświetla się poprawnie.

Przyciski Zadaj pytanie i Zostaw opinię nie będą działać w trybie podglądu. Po opublikowaniu zmian w aplikacji, kliknięcie tych przycisków w aplikacji spowoduje otwarcie nowej karty przeglądarki.

wycinek kodu źródłowego

Widżet gwiazdkowy

<div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}" data-product-type="{{product.type}}" ></div>

Widżet recenzji produktów

<div id="klaviyo-reviews-all" data-id="{{product.id}}" ></div>

Karuzela wyróżnionych recenzji

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

Podgląd widżetów aplikacji

Widżet Klaviyo Reviews nie pojawi się automatycznie w podglądzie Tapcart, ale załaduje się poprawnie w Twojej aplikacji. Dzieje się tak, ponieważ widżet wymaga prawdziwego identyfikatora produktu, aby wiedzieć, które recenzje wyświetlić. Aby wyświetlić podgląd widżetów, dodaj zmienną ID produktu w polu Variable Preview Values w edytorze Tapcart.

W Tapcart App Studio wybierz opcję Custom, aby wyświetlić swój niestandardowy widżet.
Kliknij ikonę trzech kropek obok jednego z bloków widżetów recenzji i kliknij przycisk Uruchom edytor.
Kliknij Ustawienia.
Przewiń lub przeszukaj JSON, aby znaleźć zmienną id w obiekcie produktu. Zauważ, że istnieją inne zmienne id w innych obiektach; musisz edytować tylko identyfikator produktu pokazany tutaj.
Zastąp przykładowy identyfikator produktu identyfikatorem produktu w Twoim sklepie, który ma co najmniej 1 recenzję. Aby znaleźć identyfikator produktu, przejdź do sekcji Zawartość > Produkty w Klaviyo, a następnie skopiuj identyfikator elementu.
Kliknij przycisk Zapisz.
Powtórz te kroki dla drugiego bloku widżetu recenzji.
Jeśli podglądy nie wyświetlają się od razu poprawnie, odświeżyć edytor.

Styl aplikacji widżet

Wszelkie zmiany wprowadzone w głównym edytorze widżetów będą miały zastosowanie zarówno do Twojej witryny, jak i aplikacji. Aby zastosować zmiany tylko do swojej aplikacji, dodaj niestandardowy CSS do zakładki CSS edytora niestandardowych bloków w Tapcart. Dowiedz się, jak używać niestandardowego CSS do stylizacji widżetów Klaviyo Reviews.

Dodatkowe źródła