How Click Here Labs Odblokowany komponowany handel z Atlasem

WP Engine obecnie ułatwia największą współpracującą społeczność agencji WordPress za pośrednictwem naszego programu partnerskiego dla agencji.

W tej sesji na żądanie od DE{CODE} 2023 dowiesz się, w jaki sposób firma WP Engine Agency Partner Click Here Labs wykorzystała nowy plan Atlas BigCommerce do ponownego wyobrażenia sobie sklepu internetowego Combat Corner. Otrzymasz również wersję demonstracyjną BigCommerce Blueprint, dzięki czemu możesz zbudować własną witrynę e-commerce Atlas w zaledwie 10 minut!

Głośniki:

• Jonathan Jeter, dyrektor produkcji technicznej w Click Here Labs
• Bryan Smith, główny menedżer produktu w WP Engine

Slajdy sesji:

Transkrypcja:

BRYAN SMITH: Witam wszystkich. Nazywam się Bryan Smith, główny menedżer produktu w WP Engine. Dzisiaj porozmawiamy o tym, jak firma Click Here Labs odblokowała komponowalny handel za pomocą Atlasu.

Dziś dołączył do mnie Jonathan Jeter, dyrektor ds. produkcji technicznej w Click Here Labs. Kieruje tamtejszą drużyną. To partner agencji WP Engine, z którym bardzo blisko współpracowaliśmy przez ostatnie kilka miesięcy, aby wprowadzić do Atlasa naszego pierwszego klienta handlu bezgłowego lub komponowalnego.

Za chwilę zajmiemy się tym studium przypadku, ale zanim to zrobimy, chciałbym porozmawiać trochę o stanie rynku w przypadku tworzenia aplikacji do komponowania. Tak komponowalny i bezgłowy – używamy ich tutaj zamiennie. Bezgłowy często oznacza komponowalny.

Popyt na nie rośnie nie tylko dlatego, że są one tak wydajne. Można je w dużym stopniu dostosowywać i szybko dostosowywać do zmieniającego się krajobrazu technologicznego, a także do ciągle zmieniającego się środowiska biznesowego, w którym wyniki biznesowe mogą często się zmieniać. Zapewniają dynamiczne wrażenia z szybkością statyczną, co omówimy później.

Możesz je także skalować bez konieczności zmiany platformy. W studium przypadku, które dzisiaj przedstawimy, klient Click Here Labs był w stanie pozostać w BigCommerce, swoim zapleczu e-commerce, zintegrować WordPress jako swój CMS i przenieść to wszystko do bezgłowej witryny sklepowej. Ale cała ta nowa technologia często może być nieopłacalna, dlatego ostatnie kilka lat poświęciliśmy na rozwiązywanie w ten sposób najpoważniejszych problemów rozwojowych za pomocą Atlasu placów budowy.

A Atlas to oczywiście coś więcej niż tylko host. To coś więcej niż framework front-end. Ma warstwę API, wtyczkę pól niestandardowych, lokalną aplikację programistyczną, wszystkie te rzeczy, których potrzebujesz, aby zacząć. Ale może najważniejsze jest to, że ma uczącą się społeczność i wsparcie.

Jednak mając wszystkie te narzędzia na wyciągnięcie ręki, nie winimy Cię za zmęczenie decyzją. Nawet rozpoczęcie pracy może być trudne, gdy masz tak wiele opcji na wyciągnięcie ręki i właśnie tam pojawiają się plany.

Opracowaliśmy więc plany, które umożliwiają skonfigurowanie witryny startowej ze wszystkimi potrzebnymi wtyczkami kodu, modelami treści i płatną strukturą. Możesz je uruchomić w mniej niż 10 minut. Możesz naprawdę usprawnić ten proces rozpoczynania nowego projektu.

Poza tym pomaga również poznać platformę i nasze najlepsze praktyki. Dzięki temu przygotujesz się do następnego projektu, ale do tej pory plany, które mieliśmy, ograniczały się do bardziej statycznych przypadków użycia witryn, takich jak witryny typu portfolio lub blogi — nic tak dynamicznego nie jest bezgłową witryną sklepową.

I dlatego stworzyliśmy plan BigCommerce. Tak więc ten plan, który za chwilę zademonstrujemy tutaj — jest wstępnie skonfigurowany z WPGraphQL, narzędziem Atlas Content Modeler, frameworkiem Faust JS, a także kilkoma nowymi rzeczami — wtyczką do blokowania handlu w Atlasie, która umożliwia aby wprowadzić dane produktu do edytora WordPress, a następnie także złącze handlowe, które łączy Cię z interfejsem API BigCommerce, umożliwiając synchronizację danych z BigCommerce do WordPress, utrzymując je w synchronizacji.

Możesz z nich zbudować modele treści, a także zasilić wtyczkę tego bloku. Więc może pokażę ci, jak to działa, i przejdziemy do wersji demonstracyjnej…

W porządku, więc jesteśmy w portalu WP Engine na stronie Atlas. Więc kiedy tworzysz nową aplikację Atlas, możesz zacząć od planu i tutaj będziesz mieć kilka opcji. To, co zamierzamy tutaj zrobić, to wybrać schemat BigCommerce po prawej stronie.

Tutaj możesz również wyświetlić podgląd tej witryny sklepowej lub wyświetlić kod w GitHub. Wybierzemy ten plan i klikniemy Kontynuuj. Następnym krokiem jest połączenie z kontem GitHub.

A potem sklonujemy nasze repozytorium do twojego. Więc wybierasz swoje konto GitHub, nazwę repozytorium, a następnie klikamy Utwórz aplikację.

Tak więc podczas tego procesu dzieje się kilka rzeczy. Najpierw udostępniamy witrynę WordPress. Tworzymy kod Atlas dla aplikacji Atlas. A potem zostaje wdrożony. Ten proces zwykle trwa około pięciu minut, ale tutaj go przyspieszyliśmy.

Po zbudowaniu witryny WordPress możemy przejść do złącza BigCommerce, które zobaczysz na ekranie tutaj. Ekran konfiguracji – wprowadzimy poświadczenia, a następnie możemy rozpocząć synchronizację tego produktu.

Mam to połączone z kontem piaskownicy Atlas, a także kontem piaskownicy BigCommerce. I mogę importować produkty, które mam na tym koncie BigCommerce. Właśnie mam około 13 produktów demonstracyjnych.

Chciałem tutaj zauważyć, że po tej początkowej synchronizacji nie musisz uruchamiać jej ponownie, aby złapać aktualizacje. Wtyczka obsługuje webhooki, a także nocne zadanie crona. Po zakończeniu importowania tych produktów zsynchronizuje również obrazy.

A potem pójdziemy i obejrzymy produkty. W porządku, więc mamy załadowane nasze produkty. Możesz je zobaczyć tutaj na stronie Produkty. To są produkty demonstracyjne ze strony BigCommerce.

Wejdziemy na stronę Szczegóły jednego z nich i wszystko, co tutaj pokażę, to tylko wszystkie pola danych, które wprowadziliśmy – tytuł, obrazy, opisy. Wszystko tam jest.

Więc teraz jest tam w WordPress. Jest zsynchronizowany dla Ciebie. Dokonasz zmiany na stronie BigCommerce, która natychmiast się zaktualizuje.

Teraz chcę pokazać modele treści, które zbudowaliśmy za pomocą narzędzia Atlas Content Modeler. To tylko przykład. I myślę, że pamiętaj o tym z tymi. To naprawdę miejsce, w którym możesz zacząć, aby pokazać, jak to zrobiliśmy.

Te modele treści zasilają naszą stronę ze szczegółowymi informacjami o produkcie w bezobsługowej witrynie sklepowej, której przyjrzymy się tutaj za chwilę. To tylko przykład tego, jak elastyczne jest modelowanie zawartości za pomocą narzędzia Atlas Content Modeler. OK, teraz pokażę ci wtyczkę Commerce Blocks, o której mówiliśmy wcześniej.

Przejdziemy do strony głównej w edytorze bloków w WordPress. A tutaj widzisz tę sekcję Kup nasz najnowszy produkt. To są bloki handlowe.

Możesz więc wybrać typ bloku, najnowsze produkty, popularne produkty, liczbę wyświetleń, które chcesz pokazać. Pokazujemy tam cztery. Wszystko to pochodzi ze strony BigCommerce. Oto kolejny przykład w dalszej części strony – przedmioty z wyprzedaży, jako alternatywa dla tego, jak możesz ich użyć.

Do tej pory widzieliśmy modele treści i wtyczkę bloków. Oto wszystko, co jest zainstalowane w witrynie WordPress. To wszystkie te wtyczki, o których wspominaliśmy wcześniej.

OK. Oto jesteśmy w sklepie. To jest nasza bezgłowa witryna sklepowa, którą możesz zobaczyć w adresie URL. Możesz zobaczyć nasze bloki produktów na stronie.

A to jest prosta witryna sklepowa. To naprawdę ma być miejsce startowe. Z tego powodu staraliśmy się, aby było to tak proste, jak to tylko możliwe. Następnie przejdę do strony sklepu.

Tutaj możesz zobaczyć wszystkie nasze produkty. Tak więc ta strona jest w rzeczywistości modelem treści, stroną Szczegóły produktu. Możesz zobaczyć, że mamy miejsce na dole na recenzje. Następnym krokiem będzie dodanie tego do koszyka.

I zobaczysz, że wózek jest właściwie bez głowy. Wszystko to znajduje się na froncie Atlasa. Teraz, do kasy, przekierowujemy do BigCommerce. Na potrzeby tego planu uznaliśmy, że ma to największy sens, ale wszystko inne znajduje się w bezgłowym interfejsie Atlasa.

Tutaj wracamy do sklepu. Oto strona Informacje — tylko przykład tego, co można zrobić z układem tych różnych sekcji strony. Więc możesz to wziąć, wykorzystać, uczyć się z tego. Naprawdę chodzi o to, abyś szybko zaczął.

W porządku, to wszystko, a wraz z tym przekażę Jonathanowi, aby dokładniej omówił, w jaki sposób firma Click Here Labs wzięła ten plan i rozszerzyła go na rzeczywisty przypadek użycia klienta. Do ciebie, Jonathanie.

JONATHAN JETER: Dzięki, Bryan. Zanim porozmawiamy o rozszerzeniu planu, chciałem najpierw omówić trochę planowanie rozwiązania. Zanim uruchomimy bardzo elastyczne, komponowalne rozwiązanie handlowe, chcemy się upewnić, że prawidłowo je zaplanowaliśmy, aby upewnić się, że używamy odpowiednich elementów.

I zawsze zaczynamy od dokumentacji API i wymagań funkcjonalnych. W tym przypadku w przypadku BigCommerce przejrzeliśmy dokumentację API, aby upewnić się, że wszystkie funkcje, których klient potrzebował w swoim sklepie, były dostępne za pośrednictwem API. A tych, których nie było, trzeba było zaplanować, jak zaspokoimy te potrzeby, spełnimy te wymagania.

Więc w ramach tego planu musisz określić, gdzie każde wymaganie zostanie spełnione, prawda? Czy to przez rodzimy BigCommerce? Czy to przez WordPressa? Czy tworzysz aplikację front-end, czy aplikacje innych firm?

W tym przypadku musieliśmy podjąć pewne decyzje, a ponieważ platforma jest tak elastyczna, głównym celem było przyspieszenie strony, aby uzyskać, jak mówiliśmy wcześniej, szybkość statyczną w aplikacji front-endowej. Chcieliśmy więc upewnić się, że wszystkie elementy witryny, wszystkie komponenty witryny, które Google zamierza zobaczyć, znajdują się w bezgłowej aplikacji front-end.

A potem musieliśmy się przyjrzeć, na przykład – Bryan mówił o wózku, mówił o sekcji konta. Mówił o tych różnych rzeczach. Które z tych elementów zamierzaliśmy wykonać w różnych systemach? Na przykład zdecydowaliśmy w tym przypadku, aby koszyk, kasa, konto klienta robiły to w ramach natywnej aplikacji.

Potem treść strony – chcieliśmy mieć pewność, że da się ją poprawnie skategoryzować, aby klient mógł swobodnie dodawać te treści przez standardowy interfejs WordPress. Zagregowaliśmy również niektóre dane wewnątrz WordPressa, aby móc zaprezentować je w interfejsie użytkownika w inny sposób. Byłyby to rzeczy, które być może nie były dostępne w samym BigCommerce i wtedy musieliśmy wziąć pod uwagę aplikacje innych firm.

Gdzie były dane przychodzące lub wychodzące dla ich CRM, do śledzenia, dla tego rodzaju rzeczy, a na koniec musisz zaplanować - jakie komponenty zamierzasz zbudować w tym interfejsie użytkownika i gdzie zamierzają wyciągnąć dane z?

Tak więc najwyższa elastyczność oznacza, że ​​musisz podjąć wiele decyzji i pamiętać, że zasadniczo budujesz aplikację e-commerce ze wszystkimi narzędziami dostępnymi w Atlasie, aw tym przypadku BigCommerce, aby móc stworzyć ten sklep. Chciałem tylko podkreślić, że bardzo ważne jest, aby zrobić ten plan, aby zrozumieć, w co się pakujesz.

Porozmawiaj również z klientem i powiedz, że właśnie to budujemy. To właśnie pozostanie w aplikacji natywnej. To będzie na froncie.

Te elementy, które są chronione hasłem – na przykład Moje konto, Historia rozliczeń i tego rodzaju rzeczy – to znowu rzeczy, które nie będą indeksowane. Więc mniej ważne jest, aby były one w aplikacji front-end. Więc kiedy już to rozgryziesz i ustalimy plan, teraz możesz iść.

Teraz mówimy o rozszerzeniu planu, prawda? Więc co się z tym wiąże? Zobaczymy tutaj, że aplikacja front-end jest uruchomiona. A teraz musisz zbudować wszystkie te dodatkowe elementy, które uczynią sklep wyjątkowym, które sprawią, że będzie robił to, czego potrzebuje twój klient.

Na przykład w BigCommerce istnieje kilka natywnych funkcji dostępnych w interfejsie API, takich jak produkty towarzyszące, grupy klientów i tego typu rzeczy. Tak więc klient nadal używa natywnego BigCommerce do zarządzania tymi produktami towarzyszącymi, zarządzania różnymi grupami klientów, zarządzania terminami sprzedaży, kodami rabatowymi i tego rodzaju rzeczami.

Bierzemy te dane i prezentujemy je w interfejsie. Mieliśmy również aplikacje innych firm, które były… wtyczki są instalowane w BigCommerce, prawda? Istnieje narzędzie do dostosowywania produktów.

A potem dane z różnych lokalizacji – te trzeba było wziąć pod uwagę. A te komponenty można następnie zbudować, na przykład, na stronie szczegółów produktu, prawda? Jeśli istnieje produkt, który ma personalizację – możesz więc zmieniać kolory.

Możesz dodać logo. Umiesz robić takie rzeczy, prawda? Ten konfigurator pozwala to zrobić. Są to więc różne elementy, które zostały zbudowane w oparciu o funkcjonalność strony trzeciej.

I wreszcie, istnieje funkcjonalność, która została wbudowana bezpośrednio w interfejs użytkownika. Na przykład macierz porównawcza produktów – wszyscy widzieliśmy to w różnych miejscach. Porównaj trzy różne produkty, zobacz, jakie mają różne atrybuty, jak się porównują, możliwość łączenia produktów w wyprzedaż, rabat za pakiet. A potem są rzeczy, które na przykład są dostępne w natywnym BigCommerce, ale z jakiegoś powodu interfejs API nie wykonuje tej funkcji.

Tak więc narzędzie do przesyłania plików jest przykładem czegoś, co w zasadzie musieliśmy stworzyć w interfejsie użytkownika, używając różnych funkcji w zapleczu. Więc to są wszystkie rzeczy, które budujesz, aby rozszerzyć ten plan, a niektóre z nich zostaną uwzględnione w rozszerzonym planie lub planie premium, o którym, jak sądzę, wkrótce Bryan będzie tutaj mówił.

BRYAN SMITH: Dzięki, Jonathanie. Teraz szybko omówię mapę drogową Atlasu. Podzieliliśmy to na kolumny Teraz, Dalej i Później.

W kolumnie Teraz zobaczysz pogrubioną czcionką nasze inicjatywy Atlas dotyczące e-commerce. Pod spodem, po lewej stronie, plan BigCommerce – który jest na żywo, dostępny dla każdego do wypróbowania w tej chwili. Pracujemy również nad sklepowym interfejsem API.

Jest to warstwa danych, która łączy treści z WordPress, BigCommerce lub innych źródeł zewnętrznych, które Cię interesują. Oto sposób na zintegrowanie ich wszystkich. Pracujemy teraz nad wersją beta, więc bądź na bieżąco, aby uzyskać więcej szczegółów, gdy to się rozwinie.

Następnie będziemy pracować nad planem Shopify. Jest to podobna integracja do tego, co zrobiliśmy z BigCommerce, ale w tym przypadku będzie to z Shopify. A kiedy przejdziemy dalej, skupimy się na bezgłowej personalizacji i lokalizacji. Wiemy, że te rzeczy są naprawdę ważne dla dynamicznych witryn sklepowych. Chcemy mieć pewność, że jest to ściśle zintegrowane z platformą handlową Atlas.

Więc jeśli jesteś gotowy, aby zacząć korzystać z planu BigCommerce, możesz już dziś otworzyć bezpłatne konto piaskownicy Atlas, aby je wypróbować. Jeśli masz już konto w Atlasie, plan jest oczywiście również dostępny dla Ciebie. Idź wypróbuj już dziś.

Wypróbuj to w swoim następnym projekcie. Pozwól nam wiedzieć co myślisz. Dziękuję wszystkim. Naprawdę doceniamy Twój dzisiejszy czas. Miłego dnia.