Shopify: Customer Accounts UI Extensions

New Customer Accounts mají podporu B2B a Shopify u nich poskytuje stejný mechanismus customizace jako u pokladny (checkout), kde je možné využít Checkout UI extensions. Customer Accounts UI extensions ale mají jednu podstatnou výhodu – fungují na všech tarifech s výjimkou B2B funkcionalit. Checkout UI extension pak mají k dispozici pouze e-shopy s plánem Shopify Plus a výše.

Rozšíření nového uživatelského rozhraní zákaznického účtu umožňují vývojářům vytvářet vlastní funkce nebo stránky, které mohou majitelé e-shopů instalovat na stanovená místa na stránkách (tzv. extension targets) “Rejstřík objednávek”, “Stav objednávky” a “Profil” v zákaznických účtech nebo přidat zcela nové stránky. Tato rozšíření jsou součástí developer preview Checkout and Customer accounts, takže si je lze vyzkoušet a otestovat, ale změny není možné před oficiálním releasem publikovat.

Rozšíření API

Rozhraní API umožňují rozšířením UI zákaznického účtu získávat informace o zákazníkovi nebo souvisejících objektech a provádět různé akce. Pomocí API můžete například načíst předchozí objednávky zákazníka, abyste mohli nabízet související produkty jako upsell. Další místa, ze kterých lze získat údaje, jsou Metafieldy nebo třeba dárkové karty. Rozšíření používají JavaScript ke čtení a zápisu dat a volání externích služeb a nativně vykreslují UI vytvořená pomocí komponent pokladny a zákaznického účtu Shopify.

Komponenty UI

Rozšíření deklarují své rozhraní pomocí podporovaných UI komponent. Shopify renderuje UI nativně, takže je výkonné, dobře dostupné a funguje ve všech podporovaných prohlížečích. Stejně jako u rozšíření Pokladny (Checkout) můžete použít nabízené předdefinované komponenty společně s komponenty Pokladny samotné.

Komponenty jsou navrženy tak, aby byly flexibilní, což umožňuje jejich vrstvení a kombinování a vytváření vysoce přizpůsobených rozšíření aplikací, která v rámci prostředí zákaznického účtu hladce fungují. Komponenty, které převezmou nastavení značky obchodníka a CSS, nelze měnit ani přepisovat. K vytvoření rozšíření můžete použít komponenty pokladny a zákaznického účtu.

Jak můžete vylepšit stránky zákaznických účtů?

Personalizovaná doporučení produktů
Výchozí stránku s rejstříkem objednávek, na kterou se zákazníci dostanou po přihlášení do svého účtu a kde vidí svoji historii objednávek, můžete nyní vylepšit přidáním navrhovaných/doporučených produktů a zvýšit tak konverzi.

Připomínky věrnostního programu
Zákaznický profil lze přizpůsobit tak, aby zobrazoval aktuální zůstatek věrnostních bodů zákazníka. Toto připomenutí je dobrý způsob, jak ho povzbudit k dalším nákupům. Zároveň lze na stránku s rejstříkem objednávek přidat např. banner se slevovým kódem nebo jinou akční nabídkou.

Nové možnosti zákaznického servisu
Rozšířit můžete i stránku se stavem objednávky a umožnit zákazníkům např. požádat o výměnu zboží nebo nahlásit problém. Uvolníte tak ruce vašemu zákaznickému servisu a zákazník bude cítit větší kontrolu nad objednávkou.

Vylepšené profily zákazníků
Čím více údajů o svých zákaznících budete mít, tím lépe personalizujete jejich nákupní zážitky. Zvažte rozšíření profilu o další údaje, například o zákazníkovu oblíbenou barvu nebo velikost oblečení.

Seznam přání
Kromě optimalizace stávajících stránek můžete vytvářet i zcela nové, např. stránku “Seznam přání”, kam si může zákazník při procházení stránek ukládat oblíbené položky a později z nich vybírat.

Základní kroky pro vytvoření UI extension

Vytvoření UI extension: Použijte Shopify CLI k vytvoření základní struktury pro vaši extension. Tento nástroj automatizuje běžné úkoly vývojářů a pomáhá s rychlým začátkem vývoje.
Konfigurace extension: Každá UI extension vyžaduje konfigurační soubor shopify.extension.toml, který obsahuje nastavení, jak extension funguje a kde se bude ve Shopify zobrazovat. Více informací naleznete v dokumentaci pro konfiguraci app extensions.
Lokalizace: Lokalizace UI extension umožňuje přizpůsobit extension pro různé jazyky a měny, což je užitečné pro obchody působící v různých regionech. Můžete definovat, jak se mají čísla, měny a texty zobrazovat v závislosti na jazykovém nastavení uživatele. Podrobnější postupy naleznete v části o lokalizaci.
Nasazení a testování: Po vývoji a lokalizaci je možné UI extension nasadit a testovat v rámci vývojového obchodu na Shopify. To umožňuje vývojářům zkontrolovat, jak se extension chová v reálném prostředí a zda správně interaguje s dalšími částmi Shopify. Informace o nasazení a testování najdete v dokumentaci pro deployment.

Příklad

Úprava profilového panelu uživatele

Zde je základní příklad kódu pro Customer UI extension, který zobrazí upravený profilový panel uživatele:

import { extend } from '@shopify/admin-ui-extensions';

extend('Admin::Product::SubscriptionPlan::Add', (root, api) => {
  const group = root.createComponent('Group');
  const textField = root.createComponent('TextField', {
    label: 'Profile bio',
    onChange: (value) => console.log(`New bio: ${value}`),
  });

  group.appendChild(textField);
  root.appendChild(group);

  root.mount();
});

Tento kód vytvoří textové pole na stránce profilu, kde uživatelé mohou upravit svůj bio. Jakmile uživatel vloží text, změna se zaznamená prostřednictvím konzole.

Pro další informace a pokročilé návody můžete navštívit dokumentaci Shopify Customer UI Extensions.

Zpět na články