Realizácia jún – október 2024 · odvtedy dlhodobá správa

Sharp Consumer Electronics

Jedna platforma. 12 európskych trhov. Tisíce produktov.

Pre značku Sharp sme prevzali pomalý a ťažko udržateľný produktový web a prestavali ho na rýchlu multisite platformu pre 12 európskych trhov.

Jadrom riešenia je takmer okamžitá synchronizácia produktových dát z centrálneho PIM systému a bleskové vyhľadávanie postavené na Typesense.

sharpconsumer.com

Východisková situácia

Projekt sme prebrali od nemeckej agentúry, ktorá web pôvodne postavila. Prevzatie cudzieho kódu sme využili na to, aby sme pomenovali a odstránili jeho najväčšie bolesti.

Web sa pomaly načítaval — pôvodná implementácia nezvládala výkon pri veľkom produktovom katalógu, čo brzdilo používateľov aj SEO. Ešte väčším problémom bol nestabilný a pomalý sync z PIM: produktové dáta sa tlačili priamo do databázy WordPressu zložitým procesom, takže kým sa nové informácie reálne prejavili na webe, trvalo to aj niekoľko dní — a celý proces bol krehký a náchylný na chyby.

Súčasťou zadania bol zároveň redizajn webu, ktorý sme implementovali na základe dodaných podkladov.

Pôvodný stav

PIMproduktové dáta

⏱ aj niekoľko dnízložitý, krehký sync

WordPress databázapomalé dotazy pri veľkom katalógu

Ako sme to vyriešili

Navrhli sme kompletnú infraštruktúru a technický scope nového riešenia s dvoma nekompromisnými cieľmi: rýchlosť načítania a bezproblémový, takmer okamžitý synchron dát z PIM. Kľúčovým rozhodnutím bolo vyviesť produktové dáta z databázy WordPressu do dedikovaného vyhľadávacieho enginu Typesense.

Zdroj pravdy

PIMcentrálne produktové dáta — vyše 4 000 produktov

webhook + buffer
takmer okamžite

Vyhľadávací index

Typesensefulltext a fasetové filtre nad celým katalógom

dotazy
v milisekundách

Redakcia

WordPress multisiteBedrock · Sage 11 · 33 vlastných blokov

jeden kód,
dizajn a médiá

Trhy

12 regionálnych verziíATDEESFRIEITNLPLPTRSUKEU

Hybridná architektúra: PIM ako zdroj pravdy, Typesense pre rýchlosť, WordPress pre redakciu.

Výsledkom je hybridná architektúra, ktorá spája redakčný komfort WordPressu, výkon dedikovaného search enginu a jeden zdroj pravdy v podobe PIM systému.

Technické highlighty

Vyhľadávanie v milisekundách

Produktový katalóg a fasetové filtrovanie beží nad vyhľadávacím enginom Typesense namiesto klasických databázových dotazov. Spracúvame vyše 4 000 produktov z PIM a do vyhľadávania pridávame aj staršie produkty, ktoré už v PIM nie sú — fulltext aj filtre odpovedajú okamžite aj pri veľkom katalógu.

Takmer okamžitý sync z PIM

Vlastný konektor synchronizuje dáta spoľahlivo a odolne — s opakovanými pokusmi pri výpadku a ochranou proti kolíznym zápisom. Zmena v PIM spustí webhook, hromadné zmeny zbierame do bufferu a spracúvame dávkovo. Namiesto niekoľkých dní sú tak dáta na webe takmer okamžite.

12 trhov na jednej platforme

Celá prezentácia beží ako WordPress multisite so zdieľaným kódom, dizajnom a mediálnou knižnicou. Jazykové verzie sú vzájomne prepojené, takže jedna zmena sa premietne všade a pridanie ďalšieho trhu je otázka konfigurácie.

Komponentový redakčný systém

Redakcia skladá stránky z 33 vlastných blokov — produktové sekcie, listingy, vyhľadávanie aj stavebné prvky stránok — vizuálne a bez zásahu vývojára.

Vyhľadávanie postavené na Typesense

Fasetové filtrovanie a fulltext bežia na Typesense — odpovede v milisekundách

Okamžitý fulltext aj filtrovanie — aj pri veľkom katalógu.

Produktový výpis Sharp s fasetovými filtrami — Produktový výpis TV s fasetovými filtrami.

Detail produktovej stránky Sharp so špecifikáciami a dokumentmi na stiahnutie

Produktová stránka poskladaná z blokov

Galéria, varianty veľkostí, kotviaca navigácia, energetický štítok aj dokumenty na stiahnutie — celý detail produktu skladá redakcia z komponentových blokov a dáta doň tečú z Typesense.

Čitateľné adresy ako /tv/75jp7265e/ rieši vlastný routing nad „virtuálnymi" produktovými stránkami.

Výkon na prvom mieste

Rýchlosť bola od začiatku hlavným cieľom, nie dodatočnou optimalizáciou. Okrem presunu produktových dát mimo databázy sme nasadili viacúrovňové cachovanie (Redis object cache a WP Rocket), optimalizáciu obrázkov a ďalšie výkonové opatrenia s ohľadom na Core Web Vitals od Google.

Priebeh spolupráce

Kompletnú prestavbu webu vrátane redizajnu sme dodali za päť mesiacov — od júna do októbra 2024. Projekt sme viedli agilne, s pravidelným dodávaním a spätnou väzbou. Klient tak mal počas celého vývoja prehľad o stave prác a mohol operatívne prioritizovať.

Dvojtýždňové šprintyAsanaSlackPravidelné online meetingy

Staráme sa dlhodobo

O projekt sa staráme aj po spustení. Sharp má jedného spoľahlivého partnera pre celý životný cyklus platformy.

Kompletná SLA

Monitoring, aktualizácie a garantované reakčné časy.

Kontinuálny rozvoj

Nové funkcie, bloky a trhy podľa potrieb značky.

Maintenance

Priebežné ladenie výkonu a starostlivosť o platformu.

Výsledok

12európskych trhov
na jednej platforme

4 000+produktov
spracúvaných z PIM

5mesiacov od prevzatia
po spustenie

33vlastných blokov
pre redakciu

Sharp dnes beží na jednom udržateľnom kódovom základe namiesto 12 samostatných webov. Produktové dáta sú vždy aktuálne — namiesto niekoľkých dní sa z PIM synchronizujú takmer okamžite — vyhľadávanie a listingy sú rýchle aj pri veľkom katalógu a redakcia si stránky spravuje sama. Pridanie ďalšieho trhu či produktového radu je otázka konfigurácie, nie prepisovania webu.

Prepínač regiónov webu Sharp so zoznamom 12 európskych trhov — Jeden základ, 12 regionálnych trhov.

Naše ďalšie projekty

Active24.cz

Jeden dizajnový systém pre celé portfólio hostingových značiek

Pre hostingovú značku Active24 sme postavili nový web na multi-brand dizajnovom systéme, ktorý sme navrhli pre celé portfólio hostingových značiek medzinárodnej skupiny — Active24.cz bol prvý web spustený naživo na tomto základe.

Zobraziť štúdiu