Come Click Here Labs ha sbloccato il commercio componibile con Atlas

WP Engine attualmente facilita la più grande comunità collaborativa di agenzie WordPress attraverso il nostro Programma partner per agenzie.

In questa sessione on-demand di DE{CODE} 2023, imparerai come Click Here Labs, partner di WP Engine Agency, ha utilizzato il nuovo Atlas BigCommerce Blueprint per reinventare il negozio online di Combat Corner. Riceverai anche una demo di BigCommerce Blueprint in modo da poter creare il tuo sito di eCommerce Atlas in soli 10 minuti!

Altoparlanti:

• Jonathan Jeter, direttore della produzione tecnica presso Click Here Labs
• Bryan Smith, Principal Product Manager di WP Engine

Slide della sessione:

Trascrizione:

BRYAN SMITH: Salve a tutti. Mi chiamo Bryan Smith, principale product manager qui a WP Engine. Oggi parleremo di come Click Here Labs ha sbloccato il commercio componibile con Atlas.

Insieme a me oggi c'è Jonathan Jeter, direttore della produzione tecnica presso Click Here Labs. È a capo della squadra laggiù. È un'agenzia partner di WP Engine e uno con cui abbiamo lavorato a stretto contatto negli ultimi mesi per portare il nostro primo cliente commerciale headless o componibile in Atlas.

Approfondiremo questo caso di studio tra un minuto, ma prima di farlo, vorrei parlare un po' dello stato del mercato con lo sviluppo componibile. Così componibili e senza testa, li stiamo usando in modo intercambiabile qui. Senza testa spesso implica componibilità.

E non è solo perché questi siti sono così performanti che la loro domanda è in crescita. Sono altamente personalizzabili e possono adattarsi rapidamente a un panorama tecnologico in evoluzione, nonché a un ambiente aziendale in continua evoluzione, in cui i risultati aziendali possono cambiare frequentemente. Offrono esperienze dinamiche alla velocità dell'elettricità statica, che tratteremo più tardi oggi.

E puoi anche ridimensionarli senza dover sostituire la piattaforma. Nel caso di studio che presenteremo oggi, il cliente di Click Here Labs è stato effettivamente in grado di rimanere su BigCommerce, il loro backend di e-commerce, integrare WordPress come CMS e portare tutto ciò in un negozio headless. Ma tutta questa nuova tecnologia può spesso essere proibitiva in termini di costi, motivo per cui abbiamo passato gli ultimi anni ad affrontare i punti deboli di sviluppo più gravi con Atlas dei cantieri in questo modo.

E Atlas, ovviamente, è più di un semplice host. È più di un framework front-end. Ha il livello API, il plug-in dei campi personalizzati, l'app di sviluppo locale, tutte queste cose di cui hai bisogno per iniziare. Ma forse la cosa più importante è che ha una comunità di apprendimento e supporto.

Con tutti questi strumenti a portata di mano, tuttavia, non ti biasimeremo per avere un po' di affaticamento decisionale. Può essere difficile persino iniziare quando hai così tante opzioni a portata di mano ed è qui che entrano in gioco i progetti.

Quindi abbiamo sviluppato progetti che ti consentono di creare un sito iniziale con tutti i plug-in di codice, i modelli di contenuto e la struttura a pagamento di cui hai bisogno. Puoi metterli in funzione in meno di 10 minuti. Puoi davvero semplificare il processo di avvio di un nuovo progetto.

E oltre a ciò, ti aiuta anche a conoscere la piattaforma e anche le nostre migliori pratiche. Quindi ti prepara per il prossimo progetto, ma fino ad ora, i progetti che avevamo erano limitati a casi d'uso di siti di tipo più statico, come portfolio o siti di tipo blog: niente di così dinamico è una vetrina senza testa.

Ed è per questo che abbiamo creato il progetto BigCommerce. Quindi questo progetto che mostreremo qui per te tra un minuto– è preconfigurato con WPGraphQL, Atlas Content Modeler, il framework Faust JS e anche un paio di nuove cose– un plug-in Atlas Commerce Blocks, che ti consente per portare i dati di prodotto nell'editor di WordPress, e poi anche un connettore commerciale, che ti connette all'API BigCommerce, consentendoti di sincronizzare i dati da BigCommerce a WordPress, mantenendoli sincronizzati.

Puoi creare un modello di contenuto da loro e puoi anche alimentare il plug-in di quel blocco. Quindi, con questo, perché non ti mostro davvero come funziona e faremo un salto in una demo...

Va bene, quindi eccoci qui nel portale WP Engine nella pagina Atlas. Quindi, quando crei una nuova app Atlas, puoi iniziare dal progetto e qui avrai un paio di opzioni. Quello che faremo qui è scegliere il progetto BigCommerce laggiù a destra.

E da qui puoi anche visualizzare l'anteprima di quella vetrina o visualizzare il codice in GitHub. Selezioneremo quel progetto e faremo clic su Continua. Quindi il prossimo passo è connettersi al tuo account GitHub.

E poi quello che faremo è clonare il nostro repository nel tuo. Quindi selezioni il tuo account GitHub, il nome del repository e poi premiamo Crea app.

Quindi alcune cose accadono durante questo processo. Innanzitutto, eseguiamo il provisioning del sito WordPress. Costruiamo il codice Atlas per l'app Atlas. E poi viene distribuito. E quel processo di solito richiede circa cinque minuti, ma qui l'abbiamo velocizzato.

Una volta creato il sito WordPress, possiamo accedere al connettore BigCommerce, che vedrai sullo schermo qui. Schermata di configurazione: inseriremo le credenziali e quindi potremo avviare la sincronizzazione del prodotto.

E l'ho collegato a un account sandbox Atlas e a un account sandbox BigCommerce. E posso importare i prodotti che ho in quell'account BigCommerce. Ho appena ricevuto circa 13 prodotti demo.

Volevo notare qui che dopo questa sincronizzazione iniziale, in realtà non è necessario eseguirlo di nuovo per rilevare gli aggiornamenti. Il plug-in supporta i webhook e un cron job notturno. E poi, una volta completata l'importazione di quei prodotti, sincronizzerà anche le immagini.

E poi andremo a vedere i prodotti. Va bene, quindi abbiamo caricato i nostri prodotti. Puoi vederli qui nella pagina Prodotti. Questi sono i prodotti demo dal sito BigCommerce.

Entreremo nella pagina Dettagli di uno di questi e tutto ciò che sto mostrando qui sono solo tutti i campi di dati che abbiamo inserito: titolo, immagini, descrizioni. È tutto lì.

Così ora, è lì in WordPress. È sincronizzato per te. Apporti una modifica sul sito BigCommerce, si aggiorna immediatamente.

Ora voglio mostrarvi i modelli di contenuto che abbiamo creato con Atlas Content Modeler. Questo è solo un esempio. E immagino di tenerlo a mente con questi. È davvero un punto di partenza per te solo per mostrarti come l'abbiamo fatto.

Questi modelli di contenuto alimentano la nostra pagina dei dettagli del prodotto sulla vetrina headless, che esamineremo qui tra un minuto. Solo un esempio di quanto sia flessibile la modellazione dei contenuti con Atlas Content Modeler. OK, ora ti mostrerò il plug-in dei blocchi di commercio di cui abbiamo parlato in precedenza.

Entreremo nella Home page nell'editor di blocchi in WordPress. E qui vedi questa sezione Acquista il nostro ultimo prodotto. Questi sono i blocchi commerciali.

Quindi quello che puoi fare è scegliere il tipo di blocco, i prodotti più recenti, i prodotti popolari, il numero di display che vuoi mostrare. Qui ne mostriamo quattro. Tutto questo viene dal lato BigCommerce. Ecco un altro esempio più in basso nella pagina: articoli in saldo, proprio come alternativa a come puoi usarli.

Finora abbiamo visto i modelli di contenuto e il plug-in dei blocchi. Ecco tutto ciò che è installato sul sito WordPress. Sono tutti quei plugin che abbiamo menzionato prima.

OK. Eccoci in vetrina. Questa è la nostra vetrina senza testa, che puoi vedere nell'URL. Puoi vedere i nostri blocchi di prodotti sulla pagina.

E questa è una semplice vetrina. È davvero pensato per essere un punto di partenza. E quindi, per questo motivo, abbiamo cercato di mantenerlo il più semplice possibile. Successivamente, andrò alla pagina Negozio.

Qui puoi vedere tutti i nostri prodotti. Quindi questa pagina è in realtà un modello di contenuto, la pagina dei dettagli del prodotto. Puoi vedere che abbiamo un posto laggiù in fondo per le recensioni. Il nostro prossimo passo sarà aggiungerlo al carrello.

E vedrai che anche il carrello è effettivamente senza testa. Quindi tutto questo è sul front-end Atlas. Ora, per il checkout, reindirizziamo a BigCommerce. Ai fini di questo progetto, abbiamo ritenuto che avesse più senso, ma tutto il resto è sul front-end Atlas senza testa.

Eccoci di nuovo alla vetrina. Ecco la pagina Informazioni: solo un esempio di cosa puoi fare con la disposizione di queste diverse sezioni di pagina. Quindi puoi prenderlo, usarlo, imparare da esso. Questo è davvero l'intento qui è farti iniziare rapidamente.

Va bene, questo è tutto e con questo, lo passerò a Jonathan per approfondire il modo in cui Click Here Labs ha preso questo progetto e lo ha esteso per un vero caso d'uso del cliente. Passo a te, Jonathan.

JONATHAN JETER: Grazie, Bryan. Prima di parlare dell'estensione del progetto, volevo innanzitutto discutere un po' della pianificazione della soluzione. Prima di avviare una soluzione di commercio componibile molto flessibile, vogliamo assicurarci di averla pianificata correttamente per assicurarci di utilizzare i pezzi appropriati.

E iniziamo sempre con la documentazione API e i requisiti funzionali. Quindi in questo caso, per BigCommerce, abbiamo esaminato la loro documentazione API per assicurarci che tutte le funzionalità di cui il cliente aveva bisogno nel loro negozio fossero disponibili tramite l'API. E quelli che non lo erano, dovevamo pianificare come avremmo soddisfatto quei bisogni, soddisfare quei requisiti.

Quindi, come parte di quel piano, devi determinare dove ogni requisito verrà soddisfatto, giusto? È attraverso il BigCommerce nativo? È tramite WordPress? È tramite l'applicazione front-end che stai creando o tramite app di terze parti?

In questo caso, abbiamo dovuto prendere alcune decisioni e poiché la piattaforma è così flessibile, l'obiettivo principale qui era velocizzare il sito, ottenere, come abbiamo detto prima, la velocità dell'elettricità statica nell'applicazione front-end. Quindi volevamo assicurarci che tutti i pezzi del sito, tutti i componenti del sito che Google avrebbe visto fossero nell'applicazione front-end headless.

E poi abbiamo dovuto dare un'occhiata, per esempio... Bryan ha parlato del carrello, ha parlato della sezione dell'account. Ha parlato di quelle cose diverse. Quale di quei pezzi avremmo fatto nei diversi sistemi? Quindi, ad esempio, abbiamo deciso in questo caso per il carrello, per il checkout, per l'account cliente di farlo all'interno dell'applicazione nativa.

Quindi il contenuto del sito: volevamo assicurarci che potesse essere classificato correttamente, che il cliente potesse sentirsi a proprio agio nell'aggiungere quel contenuto tramite un'interfaccia WordPress standard. Abbiamo anche aggregato alcuni dati all'interno di WordPress per poterlo presentare nel front-end in modo diverso. Sarebbero cose che forse non erano disponibili nello stesso BigCommerce e quindi dovevamo tenere conto delle applicazioni di terze parti.

Dove andavano o venivano i dati per il loro CRM, per il monitoraggio, per quel genere di cose e poi, infine, devi pianificare: quali sono i componenti che costruirai in quel front-end e dove tireranno i dati da?

Quindi la massima flessibilità significa che devi prendere molte decisioni e ricordare che stai fondamentalmente costruendo un'applicazione di e-commerce con tutti gli strumenti disponibili in Atlas, e in questo caso, BigCommerce, per poter creare quel negozio. Quindi volevo solo sottolineare che è molto importante fare quel piano, per capire in cosa ti stai cacciando.

E discuti anche con il cliente e dì, questo è ciò che stiamo costruendo. Questo è ciò che rimarrà nell'applicazione nativa. Questo è ciò che sarà nel front-end.

Quelle parti protette da password, ad esempio Il mio account, Cronologia fatturazione, quel genere di cose, ancora una volta, sono cose che non verranno indicizzate. Quindi è meno importante che quelli siano nell'applicazione front-end. Quindi, una volta che l'hai capito e abbiamo impostato il progetto, ora sei pronto per partire.

Ora parliamo di estendere il progetto, giusto? Quindi cosa c'entra? Vedremo qui che l'applicazione front-end è avviata. E ora, devi costruire tutti quei pezzi extra che renderanno unico il negozio, che gli faranno fare ciò che il tuo cliente deve fare.

Quindi, ad esempio, in BigCommerce, ci sono alcune funzionalità native disponibili nell'API, come prodotti complementari, gruppi di clienti, questo genere di cose. E così il cliente utilizza ancora BigCommerce nativo per gestire quei prodotti complementari, per gestire i diversi gruppi di clienti, per gestire quando le cose andranno in vendita, i codici sconto e quel genere di cose.

Stiamo prendendo quei dati e li presentiamo nel front-end. Avevamo anche applicazioni di terze parti che erano: i plug-in sono installati in BigCommerce, giusto? C'è un personalizzatore del prodotto.

E poi i dati provenienti da luoghi diversi, quelli dovevano essere considerati. E questi componenti possono quindi essere creati, ad esempio, in una pagina dei dettagli del prodotto, giusto? Se c'è un prodotto che ha la personalizzazione, puoi cambiare i colori.

Puoi aggiungere loghi. Puoi fare quel genere di cose, giusto? Questo personalizzatore ti consente di farlo. Quindi questi sono pezzi diversi che sono stati costruiti su funzionalità di terze parti.

E infine, c'è la funzionalità che è stata integrata direttamente nel front-end. Ad esempio, la matrice di confronto dei prodotti, quindi l'abbiamo vista tutti in luoghi diversi. Confronta tre prodotti diversi, guarda quali attributi diversi, come si confrontano, la possibilità di raggruppare i prodotti in una vendita, uno sconto per un pacchetto. E poi ci sono cose che, ad esempio, sono disponibili in BigCommerce nativo, ma per qualche motivo l'API non esegue la funzionalità.

E quindi l'uploader di file è un esempio di qualcosa che dovevamo sostanzialmente creare all'interno del front-end utilizzando diverse funzionalità nel back-end. Quindi queste sono tutte cose che costruisci per estendere quel progetto e alcune di queste saranno incluse nel progetto esteso, o nel progetto premium di cui penso che Bryan parlerà qui molto presto.

BRYAN SMITH: Grazie, Jonathan. Ora parlerò molto velocemente della tabella di marcia dell'Atlante. Lo abbiamo suddiviso nelle colonne Ora, Avanti e Dopo.

Sotto la colonna Adesso, vedrai in grassetto le nostre iniziative Atlas specifiche per l'e-commerce. Sotto sul lato sinistro, il progetto BigCommerce, che è attivo, disponibile per chiunque possa provare in questo momento. Stiamo anche lavorando su un'API Storefront.

Questo è un livello dati che riunirà il contenuto di WordPress, BigCommerce o qualsiasi altra fonte di terze parti a cui sei interessato. Quindi ecco un modo per integrarli tutti. Stiamo lavorando alla versione beta in questo momento, quindi rimanete sintonizzati per ulteriori dettagli man mano che procede.

Successivamente, lavoreremo su un progetto Shopify. Questa è un'integrazione simile a quella che abbiamo fatto con BigCommerce, ma in questo caso sarà con Shopify. E poi, mentre andiamo oltre, concentreremo la nostra attenzione sulla personalizzazione e localizzazione senza testa. Sappiamo che queste cose sono davvero importanti per le vetrine dinamiche. Ed è qualcosa che vogliamo assicurarci sia strettamente integrato con la piattaforma commerciale Atlas.

Quindi, se sei pronto per iniziare con il progetto BigCommerce, puoi aprire oggi stesso un account sandbox Atlas gratuito per provarlo. Se hai già un account Atlas, il progetto, ovviamente, è disponibile anche per te. Vai a provarlo oggi.

Provalo sul tuo prossimo progetto. Fateci sapere cosa ne pensate. Grazie a tutti. Apprezziamo molto il tuo tempo oggi. Vi auguro una buona giornata.