Magazin online Simba's Group

E-commerce construit pe V-CMS 2.0

Această implementare beneficiază de toate tehnologiile moderne de dezvoltare, folosind PHP 8.4+ strongly typed (poți vedea aici mai multe detalii despre baza platformei).

Pe partea de e-commerce și specific în acest proiect, platforma aduce:

• Integrări cu diverși terți pentru livrare, plată cu cardul și facturare.
• Un sistem simplificat de gestiune a stocurilor.
• Jurnalizare și urmărire a modificărilor efectuate de administratori.
• Istoric complet al prețurilor pentru produse.
• Sistem de redirecționare (301) pentru linkurile invalide.
• Sistem de notificări în dashboard, pe lângă cele clasice prin email.
• Sistem diversificat de raportare și analitice.
• Gestiune dinamică a TVA-ului.
• Sistem de încărcare a documentației produselor, folosind o bază comună de fișiere.
• Căutare rapidă în panoul de administrare și în zona publică folosind fuzzy search.
• Utilizarea extensiei BCMath pentru eliminarea erorilor de rotunjire ale tipurilor float în PHP.
• Securitate avansată: politici CSP și protecție CSRF.
• Respectarea standardelor de accesibilitate WCAG 2 A/AA.

Frontend fără React

Deși framework-urile Single Page Application (precum React) sunt foarte populare în e-commerce, consider că pentru un magazin online această abordare aduce un overhead nejustificat. Ideea de a livra megabiți de JavaScript doar pentru a face un site funcțional contravine principiilor mele de performanță. De aceea, pentru zonele dinamice, am ales un mix mult mai light și eficient: HTMX și Alpine.js.

Pentru dezvoltare

Mediul de dezvoltare implementează Unit Tests, PHPStan, CS Fixer și Playwright. Întregul mediu de lucru este containerizat folosind Docker.

Partea mea favorită

Sliderul de pe pagina principală este special: poate prelua date direct din produse, permite încărcarea de imagini custom sau selectarea celor deja existente în galeria produsului și, cel mai interesant, culorile de fundal și accent se setează automat, extrăgând nuanțele predominante din poza selectată.

Toate celelalte sisteme și implementări din aplicație au presupus multă muncă brută și au fost frumoase prin complexitatea lor, însă acest slider a fost un proiect de suflet. A fost gândit special pentru că operatorul nu are o echipă de marketing în spate, iar designul unui slider poate fi compromis estetic foarte ușor. Această automatizare garantează un design consistent, curat și plăcut, indiferent de imaginea aleasă.

Rezultate după lansare

În primul rând aceste screenshoturi, nu foarte mulți oameni văd aceste rezultate la o aplicație live: 100 puncte la toate testele pe desktop.

Din păcate pe mobil, după ce toate etichetele de tracking au fost configurate avem aceste numere de performanță: 67 în medie la preformanță și 100 de puncte la restul testelor.

Este totuși un standard foarte înalt, iar la operare se simte fluid. Un lucru amuzant este că etichetele ocupă cu aproximativ 60% mai mult din threadul principal decât tot JS-ul din aplicație. Dintr-un punct de vedere bun, toată această ocupare nu este inutilă. Tracking-ul este setat impecabil ca evenimente și conversii. Totul se livrează prin Google Tag Manager, iar setările se pot exporta și importa, asigurând fluiditate și ușurință în deploy-uri noi.

Ca notă, traficul după lansare a crescut cu aproximativ 25%, păstrând exact aceeași investiție în marketing.

Un alt lucru impresionant este că indexarea organică nu a fost afectată. Cu câteva reguli 301 bine plasate și o construcție care ține cont de regulile vechi, tranziția a fost impecabilă.

Probleme după lansare

Inițial am făcut o greșeală. Checkout-ul și sistemul de conturi erau optimizate pentru comenzi recurente, lucru care, la acest proiect specific, nu este cazul. În această zonă de produse, utilizatorii plasează o comandă care în medie este destul de mare din punct de vedere al costului, însă rata de recurență este mică. Asta a însemnat un redesign de checkout după prima săptămână.

Checkout-ul acum permite și utilizatori de tip guest, iar câmpurile necesar a fi completate pentru finalizarea unei comenzi sunt minime.

Pentru utilizatorii care totuși optează pentru cont, comenzile ulterioare se pot face cu 1-click, bazat pe datele anterioare. Deci am atins un sweet spot între ușurința pentru clienți noi și cei existenți.

Încă o problemă pe care nu am prevăzut-o au fost problemele legate de INP. În retrospectivă are sens, având în vedere modul implicit de funcționare al Alpine și HTMX. Componentele HTMX, cum ar fi modalele, apar după ce request-ul către server se finalizează. În condiții de operare normale totul este fluid, însă când se operează pe rețele slabe sau de pe dispozitive vechi, poate apărea o întârziere destul de mare din momentul apăsării butonului până când se întâmplă ceva. Ca rezolvare, mai toate butoanele din storefront vin acum cu stare de loading și disabled. Acest lucru face ca utilizatorul să aibă feedback instant la interfață, indiferent de condițiile de operare.

Un alt rezultat interesant este consumul de bandă. Pentru 10.000 de vizitatori unici și 100.000 de pagini încărcate, serverul raportează o reducere de aproape 50% în consumul de bandă. Nu este ceva la care țintteam neapărat, dar se pare că vine la pachet cu o aplicație optimizată.

În concluzie, sistemul pare foarte promițător. Scopul nativ al aplicației, ce vizează performanța, accesibilitatea, SEO, fluiditatea și ușurința în operare atât pentru admini, cât și pentru clienți, a fost atins. Spam-ul a fost redus semnificativ cu ajutorul sistemului de request throttle și ban automat pe IP. Google Analytics și AdWords folosesc date reale de conversie, care încet duc și la campanii mult mai bine optimizate, bazate pe date reale.

În continuare, aplicația este monitorizată constant pentru probleme în operare cu ajutorul sistemului de Audit Log, pentru a corecta eventualele probleme sau nereguli în cel mai scurt timp de la apariție.