Cum Faceți clic aici Labs a deblocat Comerțul compus cu Atlas

WP Engine facilitează în prezent cea mai mare comunitate colaborativă de agenții WordPress prin Programul nostru de parteneriat pentru agenții.

În această sesiune la cerere din DE{CODE} 2023, veți afla cum WP Engine Agency Partner Click Here Labs a folosit noul Atlas BigCommerce Blueprint pentru a reimagina magazinul online Combat Corner. Veți primi, de asemenea, o demonstrație a BigCommerce Blueprint, astfel încât să vă puteți crea propriul site de comerț electronic Atlas în doar 10 minute!

Difuzoare:

• Jonathan Jeter, director de producție tehnică la Click Here Labs
• Bryan Smith, director de produs principal la WP Engine

Slide-urile sesiunii:

Transcriere:

BRYAN SMITH: Bună, tuturor. Numele meu este Bryan Smith, director de produs principal aici la WP Engine. Astăzi, vom vorbi despre modul în care Click Here Labs a deblocat comerțul compus cu Atlas.

Mi se alătură astăzi Jonathan Jeter, director de producție tehnică la Click Here Labs. El conduce echipa de acolo. Sunt un partener al agenției WP Engine și unul cu care am colaborat foarte strâns în ultimele luni pentru a aduce primul nostru client de comerț fără cap sau composable la Atlas.

Vom intra mai multe în acel studiu de caz în doar un minut, dar înainte de a face asta, aș dori să vorbesc puțin despre starea pieței cu dezvoltarea composable. Atât de composabile și fără cap – le folosim interschimbabil aici. Fără cap implică adesea composable.

Și nu doar pentru că aceste site-uri sunt atât de performante, cererea pentru ele este în creștere. Sunt foarte personalizabile și se pot adapta rapid la un peisaj tehnologic în schimbare, precum și la un mediu de afaceri în continuă schimbare, în care rezultatele afacerii dvs. se pot schimba frecvent. Ele oferă experiențe dinamice cu viteza statică, pe care le vom trata mai târziu astăzi.

Și, de asemenea, le puteți scala fără a fi nevoie să replatformați. În studiul de caz pe care îl vom prezenta astăzi, clientul Click Here Labs a putut să rămână pe BigCommerce, backend-ul lor de comerț electronic, să integreze WordPress ca CMS și să aducă toate acestea într-o vitrină fără cap. Dar toată această nouă tehnologie poate fi adesea prohibitivă din punct de vedere al costurilor, motiv pentru care ne-am petrecut ultimii ani abordând cele mai severe probleme de dezvoltare cu Atlas de șantiere în acest fel.

Și Atlas, desigur, este mai mult decât o simplă gazdă. Este mai mult decât un cadru frontal. Are stratul API, pluginul de câmpuri personalizate, aplicația de dezvoltare locală, toate aceste lucruri de care aveți nevoie pentru a începe. Dar poate cel mai important, are o comunitate de învățare și sprijin.

Cu toate aceste instrumente la îndemână, totuși, nu v-am reproșa că aveți puțină oboseală de decizie. Poate fi greu să începi chiar și atunci când ai atât de multe opțiuni la îndemână și de aici intervin planurile.

Așa că am dezvoltat planuri și acestea vă permit să configurați un site de pornire cu toate pluginurile de cod, modelele de conținut, structura plătită de care aveți nevoie. Le puteți pune în funcțiune în mai puțin de 10 minute. Puteți eficientiza cu adevărat acest proces de începere a unui nou proiect.

Pe lângă asta, te ajută să înveți platforma și cele mai bune practici ale noastre. Așa că te pregătește pentru următorul proiect, dar până acum, planurile pe care le aveam s-au limitat la cazuri de utilizare a site-urilor de tip mai static, cum ar fi site-uri de portofoliu sau de tip blog – nimic atât de dinamic nu este o vitrină fără cap.

Și de aceea am creat planul BigCommerce. Deci, acest plan pe care îl vom demonstra aici în doar un minut – vine preconfigurat cu WPGraphQL, Atlas Content Modeler, cadrul Faust JS și, de asemenea, câteva lucruri noi – un plugin pentru blocuri comerciale Atlas, care vă permite pentru a aduce datele despre produse în editorul WordPress și apoi, de asemenea, un conector de comerț, care vă conectează la API-ul BigCommerce, permițându-vă să sincronizați datele de la BigCommerce cu WordPress, să le păstrați sincronizate.

Puteți construi un model de conținut din ele și puteți, de asemenea, să alimentați pluginul blocului respectiv. Deci, cu asta, de ce nu vă arăt cum funcționează asta și vom intra într-o demonstrație...

În regulă, deci iată-ne în portalul WP Engine pe pagina Atlas. Deci, atunci când creați o nouă aplicație Atlas, puteți începe de la un plan și aici veți avea câteva opțiuni. Ceea ce vom face aici este să alegem planul BigCommerce acolo, în dreapta.

Și de aici puteți, de asemenea, să previzualizați acea vitrină sau să vizualizați codul în GitHub. Vom selecta acel plan și vom apăsa Continuare. Deci, următorul pas este să vă conectați la contul dvs. GitHub.

Și apoi ceea ce vom face este să clonăm depozitul nostru în al tău. Așa că vă selectați contul GitHub, numele depozitului și apoi vom apăsa Creare aplicație.

Deci câteva lucruri se întâmplă în timpul acestui proces. În primul rând, punem la dispoziție site-ul WordPress. Construim codul Atlas pentru aplicația Atlas. Și apoi este implementat. Și acest proces durează de obicei aproximativ cinci minute, dar l-am accelerat aici.

Odată ce site-ul WordPress este construit, putem intra în conectorul BigCommerce, pe care îl veți vedea pe ecran aici. Ecran de configurare – vom intra în acreditările și apoi putem începe sincronizarea produsului respectiv.

Și l-am conectat la un cont sandbox Atlas, precum și la un cont sandbox BigCommerce. Și pot importa produsele pe care le am în acel cont BigCommerce. Tocmai am aproximativ 13 produse demonstrative.

Am vrut să remarc aici că după această sincronizare inițială, de fapt, nu trebuie să o rulați din nou pentru a prinde actualizări. Pluginul acceptă webhook-uri, precum și un job cron nocturn. Și apoi, odată ce aceste produse sunt importate, va sincroniza și imaginile.

Și apoi ne vom uita la produse. Bine, deci avem produsele încărcate. Le puteți vedea aici pe pagina Produse. Acestea sunt produsele demonstrative de pe site-ul BigCommerce.

Vom intra în pagina Detalii a unuia dintre acestea și tot ceea ce arăt aici sunt doar toate câmpurile de date pe care le-am adus – titlu, imagini, descrieri. Totul este acolo.

Deci, acum, este acolo în WordPress. Este sincronizat pentru tine. Faceți o modificare pe site-ul BigCommerce, se actualizează imediat.

Acum, vreau să vă arăt modelele de conținut pe care le-am construit cu Atlas Content Modeler. Acesta este doar un exemplu. Și cred că ține cont de asta cu acestea. Este într-adevăr un loc de plecare pentru tine doar pentru a-ți arăta cum am făcut-o.

Aceste modele de conținut alimentează pagina noastră cu detaliile produsului din vitrina fără cap, pe care o vom analiza aici în doar un minut. Doar un exemplu despre cât de flexibilă este modelarea conținutului cu Atlas Content Modeler. OK, în continuare, vă voi arăta pluginul Commerce blocks despre care am vorbit mai devreme.

Vom intra în pagina de pornire în editorul de blocuri din WordPress. Și aici vezi acest Cumpărături secțiunea Cele mai recente produse. Acesta este blocurile comerciale.

Deci, ceea ce puteți face este să alegeți tipul de bloc, cele mai recente produse, produse populare, numărul de afișare pe care doriți să îl afișați. Arătăm patru acolo. Toate acestea vin din partea BigCommerce. Iată un alt exemplu mai jos în pagină – articole de vânzare, doar ca o alternativă la modul în care le puteți folosi.

Până acum, am văzut modele de conținut și pluginul blocuri. Iată tot ce este instalat pe site-ul WordPress. Sunt toate acele pluginuri pe care le-am menționat mai devreme.

BINE. Iată-ne în vitrină. Aceasta este vitrina noastră fără cap, pe care o puteți vedea în adresa URL. Puteți vedea blocurile noastre de produse pe pagină.

Și aceasta este o simplă vitrină. Este cu adevărat menit să fie un loc de plecare. Și din acest motiv, am încercat să menținem totul cât mai simplu posibil. Apoi, voi merge la pagina Magazin.

Aici puteți vedea toate produsele noastre. Deci această pagină este de fapt un model de conținut, pagina Detalii produs. Puteți vedea că avem un loc în partea de jos pentru recenzii. Următorul nostru pas va fi să îl adăugăm în coș.

Și vei vedea că și căruciorul este de fapt fără cap. Deci toate acestea se află pe partea frontală a Atlasului. Acum, pentru finalizare, redirecționăm către BigCommerce. În scopul acestui plan, am simțit că are cel mai mult sens, dar totul se află pe partea frontală fără cap Atlas.

Iată-ne înapoi în vitrină. Iată pagina Despre – doar un exemplu de ceea ce puteți face cu aranjarea acestor diferite secțiuni ale paginii. Așa că poți să-l iei, să îl folosești, să înveți din el. Aceasta este într-adevăr intenția aici este de a începe rapid.

În regulă, asta este și, cu asta, îi voi transmite lui Jonathan pentru a aprofunda cum Click Here Labs a luat acest plan și l-a extins pentru un caz real de utilizare a clientului. La tine, Jonathan.

JONATHAN JETER: Mulțumesc, Bryan. Înainte de a vorbi despre extinderea planului, am vrut mai întâi să discut puțin despre planificarea soluției. Înainte de a începe o soluție de comerț composable foarte flexibilă, vrem să ne asigurăm că am planificat-o corect pentru a ne asigura că folosim piesele adecvate.

Și începem întotdeauna cu documentația API și cerințele funcționale. Deci, în acest caz, pentru BigCommerce, am analizat documentația API-ului lor pentru a ne asigura că toate funcțiile de care clientul avea nevoie în magazinul lor sunt disponibile prin intermediul API-ului. Și cei care nu au fost, trebuia să planificăm cum vom îndeplini acele nevoi, cum vom îndeplini acele cerințe.

Deci, ca parte a acestui plan, trebuie să determinați unde va fi îndeplinită fiecare cerință, nu? Este prin BigCommerce nativ? Este prin WordPress? Este prin aplicația frontală pe care o creați sau prin aplicații terțe?

În acest caz, a trebuit să luăm niște decizii și pentru că platforma este atât de flexibilă, scopul principal aici a fost să accelerăm site-ul, pentru a obține, așa cum am spus mai înainte, viteza statiei în aplicația front-end. Așa că am vrut să ne asigurăm că toate piesele site-ului, toate componentele site-ului pe care Google urma să le vadă sunt în aplicația frontală fără cap.

Și apoi a trebuit să aruncăm o privire la, de exemplu – Bryan a vorbit despre cărucior, a vorbit despre secțiunea de cont. El a vorbit despre acele lucruri diferite. Pe care dintre acele piese urma să le facem în diferitele sisteme? Așa că, de exemplu, am decis în acest caz pentru coș, pentru casă, pentru contul de client să facă asta în cadrul aplicației native.

Apoi, conținutul site-ului – am vrut să ne asigurăm că acesta poate fi clasificat corect, că clientul se poate simți confortabil să adauge acel conținut printr-o interfață standard WordPress. De asemenea, am agregat unele date în interiorul WordPress pentru a le putea prezenta în front end într-un mod diferit. Acestea ar fi lucruri care poate nu erau disponibile în BigCommerce în sine și apoi a trebuit să luăm în considerare aplicațiile terțelor părți.

Unde au venit sau au plecat datele pentru CRM-ul lor, pentru urmărire, pentru astfel de lucruri și apoi, în sfârșit, trebuie să planificați – care sunt componentele pe care le veți construi în acel front end și unde vor trage ele datele de la?

Prin urmare, flexibilitatea supremă înseamnă că aveți o mulțime de decizii de luat și să vă amintiți că, practic, construiți o aplicație de comerț electronic cu toate instrumentele disponibile în Atlas și, în acest caz, BigCommerce, pentru a putea crea acel magazin. Așa că am vrut doar să subliniez că este foarte important să faci acel plan, să înțelegi în ce te bagi.

Și să purtați acele discuții și cu clientul și să spuneți, asta este ceea ce construim. Acesta este ceea ce va rămâne în aplicația nativă. Acesta este ceea ce va fi în partea din față.

Piesele care sunt protejate prin parolă – de exemplu, Contul meu, Istoricul facturării, astfel de lucruri – din nou, acestea sunt lucruri care nu vor fi indexate. Deci, este mai puțin important ca acestea să fie în aplicația frontală. Așa că, odată ce îți dai seama și am stabilit planul, acum ești gata să pleci.

Acum vorbim despre extinderea planului, nu? Deci, ce este implicat în asta? Vom vedea aici că aplicația front end este pornită. Și acum, trebuie să construiți toate acele piese suplimentare care vor face magazinul unic, care îl vor face să facă ceea ce trebuie să facă clientul dvs.

Deci, de exemplu, în BigCommerce, există unele funcționalități native disponibile în API, cum ar fi produse însoțitoare, grupuri de clienți, astfel de lucruri. Și astfel clientul folosește în continuare BigCommerce nativ pentru a gestiona acele produse însoțitoare, pentru a gestiona diferitele grupuri de clienți, pentru a gestiona când lucrurile vor fi puse în vânzare, și coduri de reducere și astfel de lucruri.

Luăm acele date și le prezentăm în front-end. Aveam și aplicații terțe care erau – pluginurile sunt instalate în BigCommerce, nu? Există un dispozitiv de personalizare a produsului.

Și apoi date din diferite locații – cele care trebuiau luate în considerare. Și acele componente pot fi apoi construite, de exemplu, pe o pagină cu detalii despre produs, nu? Dacă există un produs care are personalizare, astfel încât să puteți schimba culorile.

Puteți adăuga logo-uri. Poți să faci astfel de lucruri, nu? Acest personalizare vă permite să faceți asta. Deci, acestea sunt piese diferite care au fost construite pe funcționalități terțe.

Și apoi, în sfârșit, există o funcționalitate care a fost construită direct în partea frontală. De exemplu, matricea de comparare a produselor – așa că toți am văzut asta în diferite locații. Comparați trei produse diferite, vedeți ce atribute diferite, cum se compară, capacitatea de a grupa produse într-o vânzare, o reducere pentru un pachet. Și apoi sunt lucruri care, de exemplu, sunt disponibile în BigCommerce nativ, dar din anumite motive, API-ul nu face funcționalitatea.

Așadar, încărcătorul de fișiere este un exemplu de ceva pe care a trebuit să-l creăm practic în front-end folosind diferite funcționalități în back-end. Deci, acestea sunt toate lucrurile pe care le construiți pentru a extinde acel plan și unele dintre acestea vor fi incluse în planul extins sau în planul premium despre care cred că Bryan va vorbi aici destul de curând.

BRYAN SMITH: Mulțumesc, Jonathan. Acum voi acoperi foarte repede foaia de parcurs Atlas. Am împărțit acest lucru în coloanele Acum, Următorul și Mai târziu.

În coloana Acum, veți vedea cu caractere aldine inițiativele noastre Atlas specifice comerțului electronic. Acolo, în partea stângă, planul BigCommerce – care este live, disponibil pentru oricine să încerce chiar acum. De asemenea, lucrăm la un API pentru vitrine.

Acesta este un strat de date care va reuni conținutul de la WordPress, BigCommerce sau orice alte surse terțe care vă interesează. Deci, iată o modalitate de a le integra pe toate. Lucrăm la versiunea beta chiar acum, așa că rămâneți pe fază pentru mai multe detalii, pe măsură ce acestea vor merge mai departe.

În continuare, vom lucra la un model Shopify. Aceasta este o integrare similară cu ceea ce am făcut cu BigCommerce, dar în acest caz, va fi cu Shopify. Și apoi, pe măsură ce trecem peste asta, ne vom concentra pe personalizarea și localizarea fără cap. Știm că aceste lucruri sunt cu adevărat importante pentru vitrinele dinamice. Și este ceva despre care vrem să ne asigurăm că este strâns integrat cu platforma de comerț Atlas.

Deci, dacă sunteți gata să începeți cu planul BigCommerce, puteți deschide un cont gratuit Atlas sandbox astăzi pentru a-l încerca. Dacă aveți deja un cont Atlas, planul, desigur, vă este disponibil și pentru dvs. Du-te și încearcă azi.

Încearcă-l la următorul tău proiect. Spune-ne ce crezi. Multumesc tuturor. Apreciem cu adevărat timpul acordat astăzi. O zi bună.