Jak dodać widżety Klaviyo Reviews do aplikacji mobilnej za pomocą Tapcart

Czego się dowiesz?

Dowiedz się, jak dodać widżety Klaviyo Reviews do aplikacji mobilnej stworzonej za pomocą Tapcart. Te widżety można dodać do aplikacji Tapcart za pomocą bloków niestandardowych:

• Widżet oceny w gwiazdkach
  Tylko strony produktów; pokazuje ogólną ocenę produktu w gwiazdkach
• Widżet opinii o produkcie
  Tylko strony produktów; wyświetlaj podsumowanie i listę wszystkich opinii o produkcie, a także przyciski do zadania pytania lub dodania opinii
• Widżet karuzeli wyróżnionych recenzji
  Dowolna strona; pokaż wybór wyróżnionych recenzji z kilku produktów

Tapcart jest dostępny tylko dla sklepów zbudowanych na platformie Shopify.

Kilka słów na początek

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

• Masz już zbudowaną aplikację mobilną za pomocą Tapcart
• Użyj planu Tapcart Enterprise
• Miej aktywny plan Klaviyo Reviews

Jeśli jeszcze nie skonfigurowano Klaviyo Reviews, zajrzyj do naszego artykułu Pierwsze kroki z Klaviyo Reviews.

Dodaj widżety Klaviyo Reviews, używając bloku niestandardowego w Tapcart

Wykonaj te kroki, aby dodać dowolny widżet z recenzjami w Tapcart. Te kroki trzeba będzie powtórzyć (tj. utworzyć osobny niestandardowy blok) dla wszystkich 3 widżetów.

1. Otwórz edytor Tapcart.
2. W App Studio przełącz z Bloki projektowe na Bloki niestandardowe.
   

3. Kliknij Uruchom edytor bloków, aby utworzyć nowy blok niestandardowy.
4. Nazwij widżet w jasny sposób, np. Niestandardowy blok Klaviyo Star Rating.
5. W karcie JS edytora bloków dodaj następujący wycinek kodu źródłowego. Zamień PUBLIC_API_KEY na swój 6-znakowy identyfikator 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);

1. Na karcie HTML w edytorze bloków wklej wycinek kodu źródłowego widżetu, który chcesz dodać (np. widżet oceny gwiazdkowej). Znajdź poniższe wycinki kodu źródłowego:
   1. Kod widżetu ocen gwiazdkowych
   2. Kod widżetu recenzji produktów
   3. Kod widżetu karuzeli wyróżnionych recenzji
      

2. Kliknij Zapisz.
3. Kliknij Zamknij, aby wyjść z edytora.
4. Z menu rozwijanego App Studio wybierz Szczegóły produktu.
   
   

1. Przeciągnij zapisany blok niestandardowy, który właśnie utworzono, do szablonu.
2. Edytor może nie załadować widżetu bezpośrednio; zamiast tego zobaczysz nazwę bloku jako zwykły tekst. To jest oczekiwane.
3. Kliknij Wyświetl podgląd aplikacji i przejdź do strony, na której dodano aplikację. Upewnij się, że widżet wyświetla się poprawnie.

wycinek kodu źródłowego

Widżet ocen gwiazdkowych

<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>

Wyświetl podgląd widżetów aplikacji

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

1. W Tapcart App Studio wybierz Niestandardowe, aby wyświetlić niestandardowe widżety.
2. Kliknij ikonę trzech kropek obok jednego z bloków widżetu opinii i kliknij Uruchom edytor.
3. Kliknij Ustawienia.
   

4. Przewiń lub przeszukaj JSON, aby znaleźć zmienną id w obiekcie product. Pamiętaj, że w innych obiektach są też inne zmienne id; musisz edytować tylko identyfikator produktu pokazany tutaj.
   

5. Zastąp przykładowy identyfikator produktu identyfikatorem produktu w Twoim sklepie, który ma co najmniej 1 recenzję. Aby znaleźć identyfikator produktu, przejdź do Content > Products w Klaviyo, a następnie skopiuj identyfikator elementu.
   

6. Kliknij Zapisz.
7. Powtórz te kroki dla pozostałych bloków widżetu opinii.
8. Jeśli podglądy nie pojawiają się od razu poprawnie, odśwież edytor.

Stylizuj widżety aplikacji

Wszelkie zmiany wprowadzone w głównym edytorze widżetów będą dotyczyć zarówno witryny, jak i aplikacji. Aby zastosować zmiany tylko w aplikacji, dodaj niestandardowy CSS na karcie CSS edytora bloku niestandardowego w Tapcart. Dowiedz się, jak używać niestandardowego CSS do stylizowania widżetów Klaviyo Reviews.