Wie Click Here Labs Composable Commerce mit Atlas entsperrt hat

WP Engine ermöglicht derzeit die größte kollaborative Gemeinschaft von WordPress-Agenturen durch unser Agentur-Partnerprogramm.

In dieser On-Demand-Sitzung von DE{CODE} 2023 erfahren Sie, wie Click Here Labs, Partner der WP Engine Agency, den neuen Atlas BigCommerce Blueprint verwendet hat, um den Online-Shop von Combat Corner neu zu gestalten. Sie erhalten außerdem eine Demo des BigCommerce Blueprint, sodass Sie in nur 10 Minuten Ihre eigene Atlas eCommerce-Site erstellen können!

Lautsprecher:

• Jonathan Jeter, Leiter der technischen Produktion bei Click Here Labs
• Bryan Smith, Hauptproduktmanager bei WP Engine

Sitzungsfolien:

Transkript:

BRYAN SMITH: Hallo zusammen. Mein Name ist Bryan Smith, Hauptproduktmanager hier bei WP Engine. Heute werden wir darüber sprechen, wie Click Here Labs Composable Commerce mit Atlas freigeschaltet hat.

Zu mir gesellt sich heute Jonathan Jeter, Leiter der technischen Produktion bei Click Here Labs. Dort leitet er das Team. Sie sind ein WP Engine-Agenturpartner und einer, mit dem wir in den letzten Monaten sehr eng zusammengearbeitet haben, um unseren ersten Headless- oder Composable-Commerce-Kunden zu Atlas zu bringen.

Auf diese Fallstudie werden wir in einer Minute näher eingehen, aber bevor wir das tun, möchte ich ein wenig über die Marktlage bei der Composable-Entwicklung sprechen. So komponierbar und kopflos – wir verwenden sie hier austauschbar. Kopflos impliziert oft zusammensetzbar.

Und nicht nur, weil diese Seiten so performant sind, wächst die Nachfrage danach. Sie sind stark anpassbar und können sich schnell an eine sich ändernde Technologielandschaft sowie an ein sich ständig änderndes Geschäftsumfeld anpassen, in dem sich Ihre Geschäftsergebnisse häufig ändern können. Sie liefern dynamische Erfahrungen mit statischer Geschwindigkeit, auf die wir später noch eingehen werden.

Und Sie können sie auch skalieren, ohne die Plattform ändern zu müssen. In der Fallstudie, die wir heute vorstellen, war der Kunde von Click Here Labs tatsächlich in der Lage, auf BigCommerce, ihrem E-Commerce-Backend, zu bleiben, WordPress als ihr CMS zu integrieren und all dies in eine Headless-Storefront zu bringen. Aber all diese neuen Technologien können oft unerschwinglich sein, weshalb wir die letzten Jahre damit verbracht haben, die schwerwiegendsten Entwicklungsprobleme mit Atlas of Building Sites auf diese Weise anzugehen.

Und Atlas ist natürlich mehr als nur ein Gastgeber. Es ist mehr als ein Front-End-Framework. Es verfügt über die API-Schicht, das Plugin für benutzerdefinierte Felder, die lokale Entwicklungs-App und all diese Dinge, die Sie für den Einstieg benötigen. Aber vielleicht am wichtigsten ist, dass es eine Lerngemeinschaft und Unterstützung hat.

Mit all diesen Tools, die Ihnen zur Verfügung stehen, würden wir Ihnen jedoch nicht vorwerfen, dass Sie ein wenig Entscheidungsmüdigkeit haben. Es kann schwierig sein, überhaupt anzufangen, wenn Sie so viele Optionen zur Hand haben, und hier kommen Blaupausen ins Spiel.

Deshalb haben wir Blaupausen entwickelt, die es Ihnen ermöglichen, eine Starter-Site mit allen Code-Plugins, Inhaltsmodellen und bezahlten Strukturen einzurichten, die Sie benötigen. Sie können sie in weniger als 10 Minuten zum Laufen bringen. Sie können diesen Prozess des Starts eines neuen Projekts wirklich rationalisieren.

Außerdem hilft es Ihnen, die Plattform und unsere Best Practices kennenzulernen. Es bereitet Sie also auf das nächste Projekt vor, aber bis jetzt waren die Blaupausen, die wir hatten, auf eher statische Website-Anwendungsfälle wie Portfolio- oder Blog-Websites beschränkt – nichts so Dynamisches ist eine Headless Storefront.

Und deshalb haben wir die BigCommerce-Blaupause erstellt. Also diese Blaupause, die wir Ihnen hier in nur einer Minute vorführen werden – sie ist vorkonfiguriert mit WPGraphQL, dem Atlas Content Modeler, dem Faust JS-Framework und ein paar neuen Dingen – ein Atlas-Commerce-Block-Plugin, das Sie ermöglicht um Produktdaten in den WordPress-Editor zu bringen, und dann auch ein Commerce-Connector, der Sie mit der BigCommerce-API verbindet und es Ihnen ermöglicht, Daten von BigCommerce mit WordPress zu synchronisieren und diese synchron zu halten.

Sie können daraus Inhaltsmodelle erstellen und das Plugin dieses Blocks mit Strom versorgen. Also, warum zeige ich Ihnen nicht tatsächlich, wie das funktioniert, und wir springen in eine Demo ...

In Ordnung, hier sind wir also im WP Engine-Portal auf der Atlas-Seite. Wenn Sie also eine neue Atlas-App erstellen, können Sie mit der Blaupause beginnen, und hier haben Sie einige Optionen. Was wir hier tun werden, ist die BigCommerce-Blaupause dort drüben rechts auszuwählen.

Und von hier aus können Sie auch eine Vorschau dieser Storefront anzeigen oder den Code in GitHub anzeigen. Wir wählen diese Blaupause aus und klicken auf Weiter. Der nächste Schritt besteht also darin, sich mit Ihrem GitHub-Konto zu verbinden.

Und dann klonen wir unser Repository in Ihres. Sie wählen also Ihr GitHub-Konto und den Repository-Namen aus, und dann klicken wir auf „Create App“.

Während dieses Vorgangs passieren also einige Dinge. Zuerst stellen wir die WordPress-Site bereit. Wir erstellen den Atlas-Code für die Atlas-App. Und dann wird es eingesetzt. Und dieser Vorgang dauert normalerweise etwa fünf Minuten, aber wir haben ihn hier beschleunigt.

Sobald die WordPress-Site erstellt ist, können wir in den BigCommerce-Connector springen, den Sie hier auf dem Bildschirm sehen. Konfigurationsbildschirm – Wir geben die Anmeldeinformationen ein und können dann die Produktsynchronisierung starten.

Und ich habe dies mit einem Atlas-Sandbox-Konto sowie einem BigCommerce-Sandbox-Konto verbunden. Und ich kann die Produkte importieren, die ich in diesem BigCommerce-Konto habe. Ich habe gerade ungefähr 13 Demoprodukte bekommen.

Ich möchte hier anmerken, dass Sie nach dieser anfänglichen Synchronisierung diese nicht erneut ausführen müssen, um Updates abzufangen. Das Plugin unterstützt Webhooks sowie einen nächtlichen Cronjob. Und sobald diese Produkte importiert sind, werden auch die Bilder synchronisiert.

Und dann schauen wir uns die Produkte an. In Ordnung, also haben wir unsere Produkte geladen. Sie können sie hier auf der Produktseite sehen. Dies sind die Demoprodukte von der BigCommerce-Website.

Wir gehen auf die Detailseite einer davon und alles, was ich hier zeige, sind nur alle Datenfelder, die wir eingebracht haben – Titel, Bilder, Beschreibungen. Es ist alles da.

Jetzt ist es also in WordPress vorhanden. Es wird für Sie synchronisiert. Sie nehmen eine Änderung auf der BigCommerce-Site vor, sie wird sofort aktualisiert.

Nun möchte ich Ihnen die Inhaltsmodelle zeigen, die wir mit dem Atlas Content Modeler erstellt haben. Dies ist nur ein Beispiel. Und ich denke, das sollte man bei diesen im Hinterkopf behalten. Es ist wirklich ein Ausgangspunkt für Sie, um Ihnen zu zeigen, wie wir es gemacht haben.

Diese Inhaltsmodelle unterstützen unsere Produktdetailseite auf der Headless-Storefront, die wir uns gleich hier ansehen werden. Nur ein Beispiel dafür, wie flexibel die Inhaltsmodellierung mit dem Atlas Content Modeler ist. OK, als nächstes zeige ich Ihnen das Plugin für Handelsblöcke, über das wir zuvor gesprochen haben.

Wir gehen auf die Startseite im Blockeditor in WordPress. Und hier sehen Sie den Abschnitt Shop our Latest Product. Dies sind die Handelsblöcke.

Sie können also den Blocktyp, die neuesten Produkte, beliebte Produkte und die Anzeigeanzahl auswählen, die Sie anzeigen möchten. Wir zeigen dort vier. All dies kommt von der BigCommerce-Seite. Hier ist ein weiteres Beispiel weiter unten auf der Seite – Verkaufsartikel, nur als Alternative dazu, wie Sie diese verwenden können.

Bisher haben wir Inhaltsmodelle und das Block-Plugin gesehen. Hier ist alles, was auf der WordPress-Site installiert ist. Es sind all die Plugins, die wir zuvor erwähnt haben.

OK. Hier sind wir auf der Ladenfront. Dies ist unsere Headless-Storefront, die Sie in der URL sehen können. Sie können unsere Produktblöcke auf der Seite sehen.

Und das ist ein einfaches Schaufenster. Es soll wirklich ein Ausgangspunkt sein. Aus diesem Grund haben wir versucht, es so einfach wie möglich zu halten. Als nächstes gehe ich zur Shop-Seite.

Hier können Sie alle unsere Produkte sehen. Diese Seite ist also eigentlich ein Inhaltsmodell, die Produktdetailseite. Sie können sehen, dass wir dort unten einen Platz für Rezensionen haben. Unser nächster Schritt wird sein, dies in den Warenkorb zu legen.

Und Sie werden sehen, dass der Wagen auch tatsächlich kopflos ist. All dies befindet sich also im Atlas-Frontend. Jetzt leiten wir für den Checkout zu BigCommerce weiter. Für die Zwecke dieser Blaupause hielten wir das für am sinnvollsten, aber alles andere befindet sich im kopflosen Atlas-Frontend.

Hier sind wir wieder beim Schaufenster. Hier ist die About-Seite – nur ein Beispiel dafür, was Sie mit dem Layout dieser verschiedenen Seitenbereiche tun können. Also kannst du es nehmen, es nutzen, daraus lernen. Das ist wirklich die Absicht hier, Ihnen den Einstieg zu erleichtern.

In Ordnung, das war's, und damit übergebe ich es an Jonathan, um näher darauf einzugehen, wie Click Here Labs diesen Entwurf genommen und für einen echten Kundenanwendungsfall erweitert hat. Zu dir, Jonathan.

JONATHAN JETER: Danke, Bryan. Bevor wir über die Erweiterung des Blueprints sprechen, wollte ich zunächst ein wenig über die Planung der Lösung sprechen. Bevor wir eine sehr flexible Composable Commerce-Lösung starten, möchten wir sicherstellen, dass wir sie richtig geplant haben, um sicherzustellen, dass wir die richtigen Teile verwenden.

Und wir beginnen immer mit der API-Dokumentation und den funktionalen Anforderungen. In diesem Fall haben wir für BigCommerce die API-Dokumentation durchgesehen, um sicherzustellen, dass alle Funktionen, die der Kunde in seinem Geschäft benötigt, über die API verfügbar sind. Und für diejenigen, bei denen dies nicht der Fall war, mussten wir planen, wie wir diese Bedürfnisse erfüllen, diese Anforderungen erfüllen würden.

Als Teil dieses Plans müssen Sie also bestimmen, wo jede Anforderung erfüllt wird, richtig? Ist es durch den nativen BigCommerce? Geht es über WordPress? Ist es über die Front-End-Anwendung, die Sie erstellen, oder über Apps von Drittanbietern?

In diesem Fall mussten wir einige Entscheidungen treffen, und da die Plattform so flexibel ist, war das Hauptziel hier, die Website zu beschleunigen, um, wie wir bereits gesagt haben, die Geschwindigkeit der Statik in der Front-End-Anwendung zu erreichen. Wir wollten also sicherstellen, dass alle Teile der Website, alle Komponenten der Website, die Google sehen würde, in der Headless-Front-End-Anwendung enthalten waren.

Und dann mussten wir zum Beispiel einen Blick darauf werfen – Bryan sprach über den Warenkorb, sprach über den Kontobereich. Er sprach über diese verschiedenen Dinge. Welche dieser Teile wollten wir in den verschiedenen Systemen machen? So haben wir uns in diesem Fall zum Beispiel für den Warenkorb entschieden, für den Checkout, für das Kundenkonto, um das innerhalb der nativen Anwendung zu tun.

Dann der Seiteninhalt – wir wollten sicherstellen, dass dieser korrekt kategorisiert werden kann, dass der Kunde diesen Inhalt bequem über eine Standard-WordPress-Oberfläche hinzufügen kann. Wir haben auch einige Daten innerhalb von WordPress aggregiert, um sie im Frontend anders darstellen zu können. Dies wären Dinge, die in BigCommerce selbst möglicherweise nicht verfügbar waren, und dann mussten wir Anwendungen von Drittanbietern berücksichtigen.

Wohin kamen oder gingen Daten für ihr CRM, für das Tracking, für solche Dinge und schließlich müssen Sie planen – welche Komponenten Sie in dieses Frontend einbauen werden und wo sie ziehen werden die Daten aus?

Ultimative Flexibilität bedeutet also, dass Sie viele Entscheidungen treffen müssen und sich daran erinnern müssen, dass Sie im Grunde eine E-Commerce-Anwendung mit allen Tools erstellen, die in Atlas und in diesem Fall BigCommerce verfügbar sind, um diesen Shop erstellen zu können. Also wollte ich nur betonen, dass es sehr wichtig ist, diesen Plan zu machen, um zu verstehen, worauf man sich einlässt.

Und führen Sie diese Gespräche auch mit dem Kunden und sagen Sie, das ist es, was wir bauen. Dies wird in der nativen Anwendung bleiben. Das wird im Frontend sein.

Die passwortgeschützten Teile – zum Beispiel „Mein Konto“, „Abrechnungshistorie“ und solche Dinge – wiederum sind Dinge, die nicht indiziert werden. Daher ist es weniger wichtig, dass sich diese in der Front-End-Anwendung befinden. Sobald Sie das herausgefunden haben und wir die Blaupause erstellt haben, können Sie jetzt loslegen.

Jetzt reden wir über die Erweiterung der Blaupause, richtig? Also, was ist daran beteiligt? Wir werden hier sehen, dass die Frontend-Anwendung gestartet wird. Und jetzt müssen Sie all diese zusätzlichen Elemente aufbauen, die das Geschäft einzigartig machen, damit es das tut, was Ihr Kunde tun muss.

So gibt es beispielsweise in BigCommerce einige native Funktionen, die in der API verfügbar sind, wie z. B. Begleitprodukte, Kundengruppen und solche Dinge. Und so verwendet der Kunde immer noch BigCommerce native, um diese Begleitprodukte zu verwalten, um die verschiedenen Kundengruppen zu verwalten, um zu verwalten, wann Dinge in den Verkauf gehen, Rabattcodes und solche Dinge.

Wir nehmen diese Daten und präsentieren sie im Frontend. Wir hatten auch Anwendungen von Drittanbietern, die – Plugins sind in BigCommerce installiert, richtig? Es gibt einen Produktanpasser.

Und dann Daten von verschiedenen Standorten – die mussten berücksichtigt werden. Und diese Komponenten können dann beispielsweise auf einer Produktdetailseite erstellt werden, richtig? Wenn es ein Produkt gibt, das angepasst werden kann, können Sie die Farben ändern.

Sie können Logos hinzufügen. Sie können solche Dinge tun, oder? Mit diesem Customizer können Sie das tun. Dies sind also verschiedene Teile, die auf der Funktionalität von Drittanbietern aufgebaut wurden.

Und schließlich gibt es Funktionen, die direkt in das Frontend eingebaut wurden. Zum Beispiel die Produktvergleichsmatrix – wir haben das also alle an verschiedenen Orten gesehen. Vergleichen Sie drei verschiedene Produkte, sehen Sie, welche unterschiedlichen Eigenschaften sie haben, wie sie sich vergleichen, die Möglichkeit, Produkte zu einem Verkauf zu bündeln, einen Rabatt für ein Bündel. Und dann gibt es Dinge, die zum Beispiel in BigCommerce nativ verfügbar sind, aber aus irgendeinem Grund übernimmt die API die Funktionalität nicht.

Der Datei-Uploader ist also ein Beispiel für etwas, das wir im Grunde im Frontend erstellen mussten, indem wir verschiedene Funktionen im Backend verwenden. Das sind also alles Dinge, die Sie bauen, um diesen Blueprint zu erweitern, und einige davon werden in den erweiterten Blueprint oder den Premium-Blueprint aufgenommen, über den Bryan hier ziemlich bald sprechen wird.

BRYAN SMITH: Danke, Jonathan. Jetzt werde ich die Atlas-Roadmap ganz schnell behandeln. Wir haben dies in die Spalten „Jetzt“, „Nächstes“ und „Später“ unterteilt.

Unter der Spalte Jetzt sehen Sie unsere E-Commerce-spezifischen Atlas-Initiativen in Fettdruck. Darunter auf der linken Seite, BigCommerce-Blaupause – das ist live und steht jedem zum Ausprobieren zur Verfügung. Wir arbeiten auch an einer Storefront-API.

Dies ist eine Datenschicht, die den Inhalt von WordPress, BigCommerce oder anderen Quellen von Drittanbietern, an denen Sie interessiert sind, zusammenführt. Hier ist also eine Möglichkeit, sie alle zu integrieren. Wir arbeiten gerade an der Beta, also bleiben Sie dran für weitere Details, wenn dies weiter voranschreitet.

Als nächstes werden wir an einem Shopify-Blueprint arbeiten. Dies ist eine ähnliche Integration wie bei BigCommerce, in diesem Fall jedoch bei Shopify. Und wenn wir darüber hinausgehen, werden wir uns auf die kopflose Personalisierung und Lokalisierung konzentrieren. Wir wissen, dass diese Dinge für dynamische Schaufenster wirklich wichtig sind. Und wir möchten sicherstellen, dass es eng in die Handelsplattform von Atlas integriert ist.

Wenn Sie also bereit sind, mit dem BigCommerce-Blueprint zu beginnen, können Sie noch heute ein kostenloses Atlas-Sandbox-Konto eröffnen, um es auszuprobieren. Wenn Sie bereits ein Atlas-Konto haben, steht Ihnen natürlich auch die Blaupause zur Verfügung. Probieren Sie es noch heute aus.

Probieren Sie es bei Ihrem nächsten Projekt aus. Lass uns wissen was du denkst. Danke, alle. Wir wissen Ihre Zeit heute sehr zu schätzen. Ich wünsche ihnen einen wunderbaren Tag.