Andrej Srna

Case study: E-shop najsilnejsiaklbovavyziva.sk

Case study: E-shop najsilnejsiaklbovavyziva.sk

Cieľom projektu bolo vytvoriť moderný a výkonný e-shop pre značku Najsilnejšia kĺbová výživa na doméne najsilnejsiaklbovavyziva.sk. Web mal byť rýchly, responzívny a optimalizovaný pre používateľov na rôznych zariadeniach. Zároveň mal poskytovať jednoduchú správu obsahu a bezproblémovú integráciu s externými službami na spracovanie objednávok, platieb a dopravy. Riešenie bolo navrhnuté s využitím headless architektúry, kde frontend beží na Next.js a backend spravuje WooCommerce.

Technológie

Na projekte boli použité nasledujúce technológie a nástroje:

  • Frontend: Next.js 15 pre rýchly a moderný používateľský zážitok.
  • Backend: WooCommerce ako robustné riešenie na správu produktov, objednávok a zákazníkov.
  • Doprava: Integrácia Packeta widgetu na výber spôsobu doručenia a spracovanie zásielok.
  • Platby: Stripe API na spracovanie platieb s podporou Apple Pay a Google Pay.
  • API integrácie: Dynamická synchronizácia údajov medzi frontendom a backendom prostredníctvom REST API.

Tento projekt bol navrhnutý s dôrazom na škálovateľnosť a budúce rozšírenie, aby mohol e-shop rásť spolu so značkou.

Vycuc z kódu: Hlavné funkcie stránky „Môj účet“

1. Prihlásenie a odhlásenie

  • Prihlásenie:
    • Formulár umožňuje užívateľovi prihlásiť sa pomocou e-mailu a hesla.
    • Po úspešnom prihlásení sa stránka znova načíta.
    • Ak sa prihlásenie nepodarí, zobrazí sa chybová správa.

Ukážka kódu pre prihlásenie:

const handleLogin = async (e: React.FormEvent) => {
  e.preventDefault();
  try {
    await authLogin(formData.email, formData.password);
    toast.success('Prihlásenie úspešné');
    window.location.reload(); // Reload to fetch customer data
  } catch (error) {
    toast.error('Prihlásenie zlyhalo', {
      description: 'Nesprávne údaje alebo chyba servera',
    });
  }
};

2. Správa objednávok

  • Funkcie:
    • Načítanie objednávok zákazníka z WooCommerce API.
    • Zobrazenie: ID objednávky, dátum, produkty, stav objednávky.
    • Ak je k dispozícii, poskytuje odkaz na sledovanie zásielky cez Packeta.

Ukážka kódu pre zobrazenie objednávok:

{orders.map((order) => (
  <div key={order.id} className="p-4 hover:bg-gray-50">
    <div className="flex justify-between items-start">
      <div>
        <div className="text-sm font-medium text-gray-900">Objednávka #{order.id}</div>
        <div className="text-sm text-gray-500">
          {new Date(order.date_created).toLocaleDateString('sk-SK')}
        </div>
        <div className="mt-2">
          {order.line_items.map((item, index) => (
            <div key={index} className="text-sm text-gray-600">
              {item.name} × {item.quantity}
            </div>
          ))}
        </div>
      </div>
      <div className="text-right">
        <div className="text-sm font-medium text-gray-900">{order.total} €</div>
        <div className="text-sm text-gray-500">{order.status}</div>
      </div>
    </div>
  </div>
))}

3. Údaje účtu

  • Užívatelia môžu zobraziť a upraviť svoje osobné a fakturačné údaje.

Ukážka kódu na úpravu údajov:

<form onSubmit={handleBillingSubmit} className="space-y-6">
  <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
    <div>
      <label className="block text-sm font-medium text-gray-700">Meno</label>
      <input
        type="text"
        value={billingFormData.first_name}
        onChange={(e) => setBillingFormData({ ...billingFormData, first_name: e.target.value })}
        className="mt-1 block w-full rounded-lg border-gray-300 shadow-sm"
      />
    </div>
    <div>
      <label className="block text-sm font-medium text-gray-700">Priezvisko</label>
      <input
        type="text"
        value={billingFormData.last_name}
        onChange={(e) => setBillingFormData({ ...billingFormData, last_name: e.target.value })}
        className="mt-1 block w-full rounded-lg border-gray-300 shadow-sm"
      />
    </div>
  </div>
  <button type="submit" className="px-4 py-2 bg-green-600 text-white rounded-lg">Uložiť zmeny</button>
</form>

4. Obnovenie hesla

  • Ak používateľ zabudne heslo, môže si vyžiadať odkaz na obnovenie hesla.

Ukážka kódu pre obnovenie hesla:

const handleForgotPassword = async (e: React.FormEvent) => {
  e.preventDefault();
  setIsResetting(true);
  try {
    const response = await fetch('/api/auth/forgot-password', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: resetEmail }),
    });
    if (!response.ok) throw new Error('Chyba pri odoslaní emailu');
    toast.success('Email na obnovenie hesla bol odoslaný');
  } catch (error) {
    toast.error('Nepodarilo sa odoslať email');
  } finally {
    setIsResetting(false);
  }
};

Stránka „Môj účet“ ponúka:

  1. Prihlásenie a odhlásenie pre správu účtu.
  2. Históriu objednávok s detailmi o produktoch a stavom zásielok.
  3. Úpravu osobných údajov prostredníctvom formulára.
  4. Obnovenie hesla jednoduchým formulárom.

Všetko je intuitívne a prehľadne implementované s použitím moderných technológií.

Výzvy projektu

Motivácia pre headless riešenie

Oddelenie frontendu od backendu bolo zvolené z niekoľkých dôvodov:

  • Výkon a rýchlosť: Headless architektúra s Next.js umožnila výrazné zlepšenie rýchlosti načítania stránok vďaka optimalizovanému renderovaniu (SSR/CSR).
  • Flexibilita dizajnu: Oddelenie frontendu poskytlo väčšiu slobodu pri navrhovaní a vývoji používateľského rozhrania bez obmedzení klasickej WordPress témy.
  • Škálovateľnosť: Headless riešenie umožňuje jednoduché budúce rozšírenia o nové funkcie a integrácie.
  • SEO optimalizácia: Server-side rendering v Next.js podporuje lepšie indexovanie stránok vo vyhľadávačoch, čo bolo dôležité pre zvýšenie viditeľnosti značky.

Výzvy

  1. Prepojenie WooCommerce API
    • Synchronizácia údajov medzi frontendom a backendom pomocou WooCommerce REST API bola technicky náročná, najmä pri dynamických operáciách, ako sú aktualizácie stavu zásob, spracovanie objednávok či zobrazovanie cien vrátane dopravy.
    • Riešenie zahŕňalo implementáciu bezpečných API volaní s dôrazom na výkon a správu chýb pri komunikácii.
  2. Správa platieb a dopravy cez externé integrácie
    • Integrácia Stripe API pre spracovanie platieb bola zložitá z hľadiska podpory rôznych spôsobov platby, ako sú kreditné karty, Apple Pay a Google Pay. Bolo nutné zaistiť bezproblémovú a bezpečnú autentifikáciu transakcií (3D Secure).
    • Implementácia Packeta widgetu vyžadovala prispôsobenie API na načítanie pobočiek, výpočet cien dopravy a sledovanie zásielok. Táto integrácia musela byť tiež synchronizovaná s WooCommerce backendom.
  3. Optimalizácia výkonu pri dynamickom obsahu
    • Dynamické operácie, ako sú filtrovanie produktov, aktualizácia košíka a spracovanie objednávok, si vyžadovali efektívne cacheovanie a minimalizáciu načítavania nepotrebných údajov.
    • Lazy loading a optimalizácia obrázkov boli implementované na minimalizáciu času načítania, pričom bolo potrebné zabezpečiť hladkú interakciu používateľov bez oneskorení.

Tieto výzvy boli prekonané pomocou kombinácie osvedčených postupov vo vývoji, dôsledného testovania a iteratívneho prístupu k implementácii.

Architektúra riešenia

Frontend

Frontend bol postavený na Next.js 15, čo poskytlo moderné a efektívne riešenie pre rýchly a responzívny e-shop:

  • Server-side rendering (SSR): SSR bolo použité na generovanie obsahu na strane servera, čo zlepšilo rýchlosť načítania stránok a SEO skóre. To bolo obzvlášť dôležité pre optimalizáciu pre vyhľadávače a lepšiu viditeľnosť produktov.
  • Client-side rendering (CSR): CSR sa uplatnilo pri dynamických častiach stránky, ako je košík, aktualizácie cien a interaktívne formuláre. Tým bola zabezpečená rýchla a plynulá interakcia používateľa.
  • Komponentový dizajn: Použitie React komponentov umožnilo opätovné využitie kódu a jednoduchú správu rozhrania.

Backend

WooCommerce bol nasadený ako backendový systém, ktorý poskytoval robustné a spoľahlivé riešenie pre správu e-shopu:

  • Správa obsahu: WooCommerce umožnil jednoduchú správu produktov, kategórií, cien, akcií a skladových zásob.
  • Spracovanie objednávok: Backend sa staral o sledovanie a správu objednávok, fakturáciu a notifikácie pre zákazníkov.
  • REST API: WooCommerce REST API bolo použité na synchronizáciu údajov medzi frontendom a backendom. To zahŕňalo operácie ako načítanie produktov, aktualizácia stavu objednávok a výpočet cien vrátane dopravy.

Integrácie

Do riešenia boli implementované nasledovné integrácie:

  1. Packeta Widget:
    • Widget umožnil používateľom výber preferovanej pobočky Packety na doručenie.
    • API integrácia zabezpečila dynamické načítanie dostupných pobočiek, aktualizáciu cien dopravy a prenos údajov do WooCommerce.
  2. Platby (Stripe, Apple Pay, Google Pay):
    • Stripe API bolo integrované pre bezpečné spracovanie platieb.
    • Podpora Apple Pay a Google Pay umožnila rýchle platby cez mobilné zariadenia.
    • Využitie 3D Secure zabezpečilo vyššiu ochranu transakcií a dôveru zákazníkov.

Táto architektúra poskytla stabilné, výkonné a flexibilné riešenie, ktoré umožňuje ľahkú správu e-shopu a výbornú používateľskú skúsenosť.

Vybraná časť z produkt/single: Generovanie metadát pre SEO

// Generate metadata for SEO
export async function generateMetadata({ params }: ProductPageProps): Promise<Metadata> {
  const { slug } = await params;
  const product = await getProduct(slug);
  
  if (!product) {
    return {
      title: 'Produkt nenájdený',
    };
  }

  return {
    title: `${product.name} | NKV Shop`,
    description: product.short_description.replace(/(<([^>]+)>)/gi, ''), // Odstránenie HTML tagov
    openGraph: {
      images: product.images[0]?.src ? [product.images[0].src] : [], // Pridanie obrázka produktu
    },
  };
}

opis:

  1. Funkcia generateMetadata:
    • Dynamicky generuje metadáta pre každú produktovú stránku.
    • Ak produkt neexistuje, nastaví jednoduchý názov „Produkt nenájdený“.
  2. Generované metadáta:
    • Názov (title): Kombinuje názov produktu a názov obchodu.
    • Popis (description): Používa krátky popis produktu a odstráni z neho HTML značky pomocou regulárneho výrazu.
    • OpenGraph (openGraph): Zahŕňa URL hlavného obrázka produktu, ak je k dispozícii.
  3. Dôležité detaily:
    • SEO optimalizácia: Tieto metadáta sú nevyhnutné pre lepšiu viditeľnosť stránky vo vyhľadávačoch a na sociálnych sieťach.
    • Použitie WooCommerce API: Funkcia getProduct získava údaje o produkte z WooCommerce.

Kľúčové funkcie

Správa používateľských účtov

  • Registrácia a prihlasovanie: Zákazníci môžu vytvoriť účet a prihlásiť sa, čo umožňuje ukladanie údajov pre rýchlejší nákup v budúcnosti.
  • História objednávok: Používatelia majú prístup k prehľadu svojich predchádzajúcich objednávok, čo uľahčuje opakovanie nákupov alebo kontrolu stavu zásielok.

Objednávkový proces

  • Viackrokový proces objednávky: E-shop ponúka jasný a plynulý proces objednávky, kde zákazníci prechádzajú krokmi ako výber produktov, zadanie doručovacích údajov, výber spôsobu platby a dopravy.
  • Výber dopravy: Zákazník si môže vybrať spôsob doručenia prostredníctvom Packeta widgetu s možnosťou vybrať pobočku a zobraziť dostupné spôsoby doručenia.
  • Platba: Užívatelia môžu vybrať medzi rôznymi platobnými metódami, ako je platba kartou cez Stripe, alebo prostredníctvom Apple Pay a Google Pay pre mobilné zariadenia.

Doprava cez Packeta

  • Widget pre výber pobočky: Používatelia môžu jednoducho zvoliť najbližšiu Packeta pobočku na vyzdvihnutie zásielky. Integrácia widgetu umožňuje bezproblémový výber pobočky priamo na stránke.
  • Dynamická aktualizácia cien dopravy: Ceny dopravy sa automaticky aktualizujú v závislosti od vybraného spôsobu doručenia, hmotnosti balíka a destinácie, čo poskytuje transparentnosť a presné informácie pre používateľov.

Platby

  • Bezpečné spracovanie platieb cez Stripe: Používateľské platby sú bezpečne spracovávané cez Stripe, ktorý podporuje rôzne platobné metódy a zabezpečuje ochranu údajov zákazníkov.
  • Podpora Apple Pay a Google Pay: Na zjednodušenie platobného procesu sú podporované moderné mobilné platobné systémy, ako sú Apple Pay a Google Pay, čo je ideálne pre používateľov mobilných zariadení.

Responzívny dizajn

  • Optimalizácia pre rôzne zariadenia: Webová stránka bola navrhnutá a optimalizovaná tak, aby poskytovala bezproblémový zážitok na desktopoch, tabletoch a mobilných zariadeniach. Automatické prispôsobenie sa veľkosti obrazovky zabezpečuje plynulý a intuitívny nákupný proces bez ohľadu na zariadenie.

Tieto kľúčové funkcie prispievajú k vynikajúcej používateľskej skúsenosti, efektívnej správe objednávok a zabezpečeniu bezpečných a pohodlných platieb.

Implementácia Packeta

Tu je vybraná časť kódu, ktorá sa zaoberá správou výdajného miesta Packeta. Táto časť obsahuje logiku pre výber pobočky, spracovanie údajov a ich priradenie k objednávke.

interface PacketaPoint {
  id: string;
  name: string;
  street: string;
  city: string;
  zip: string;
}

const handlePacketaPointSelect = (point: PacketaPoint) => {
  setFormData(prev => ({
    ...prev,
    meta_data: [
      { key: 'packeta_point_id', value: point.id },
      { key: 'packeta_point_name', value: point.name },
      { key: 'packeta_point_address', value: `${point.street}, ${point.city} ${point.zip}` },
    ]
  }));
  setShowPacketaSelector(false);
};

if (showPacketaSelector) {
  return (
    <div className="max-w-2xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-6">Výber výdajného miesta</h1>
      <PacketaPointSelector onSelect={handlePacketaPointSelect} />
    </div>
  );
}
  1. Interface PacketaPoint:
    • Definuje štruktúru údajov výdajného miesta: ID, názov, ulica, mesto, a PSČ.
  2. Funkcia handlePacketaPointSelect:
    • Ukladá vybrané výdajné miesto do formData pomocou setFormData.
    • Meta údaje ako ID pobočky, názov a adresa sú priradené na použitie v objednávke.
    • Zavrie výberový widget nastavením setShowPacketaSelector(false).
  3. UI Komponent:
    • Zobrazí widget pre výber pobočky pomocou komponentu PacketaPointSelector.
    • Pri výbere pobočky sa zavolá onSelect, ktorý odovzdá údaje do funkcie handlePacketaPointSelect.

Implementácia

Technické detaily

  1. Nastavenie WooCommerce REST API
    • WooCommerce REST API bolo nakonfigurované na bezpečné a efektívne spracovanie dát medzi backendom a frontendom.
    • API bolo použité na načítanie produktov, správu objednávok, aktualizáciu stavu zásob a výpočet cien dopravy.
    • Autentifikácia API volaní bola zabezpečená pomocou OAuth a šifrovania, aby sa minimalizovali bezpečnostné riziká.
  2. Konfigurácia Stripe API a ďalších platobných brán
    • Stripe API bolo integrované na spracovanie online platieb, vrátane podpory pre Apple Pay a Google Pay.
    • Implementácia zahŕňala konfiguráciu 3D Secure na zvýšenie bezpečnosti platieb a zlepšenie dôvery zákazníkov.
    • Platobné formuláre boli optimalizované na rýchlu a bezproblémovú interakciu používateľov.
  3. Využitie Packeta API na načítanie pobočiek a spracovanie dopravy
    • Packeta API bolo implementované na načítanie dostupných pobočiek v reálnom čase.
    • Dynamické výpočty cien dopravy boli synchronizované s WooCommerce backendom.
    • Automatizované spracovanie údajov pre odosielanie zásielok bolo integrované priamo do backendu, čo zefektívnilo logistiku.

Vývojový proces

  1. Agile metodika na iteratívny vývoj
    • Projekt bol vyvíjaný v rámci Agile cyklov, ktoré umožnili pravidelné testovanie a postupné zlepšovanie funkcionalít.
    • Krátke iterácie a spätná väzba od tímu a zainteresovaných strán pomohli prioritizovať najdôležitejšie funkcie.
  2. Testovanie API spojení a zabezpečenie platobných procesov
    • Všetky API spojenia (WooCommerce, Stripe, Packeta) boli dôkladne otestované na správnosť a výkon.
    • Platobné procesy boli testované na rôznych zariadeniach a pre rôzne scenáre, aby sa zabezpečila ich bezchybnosť.

Optimalizácia

  1. Cacheovanie obsahu na frontende
    • Statický obsah, ako sú produktové obrázky a často používané API odpovede, bol cacheovaný na zníženie času načítania a zníženie záťaže servera.
  2. Minimalizácia HTTP požiadaviek
    • Kombinácia a minifikácia CSS a JavaScript súborov znížila počet požiadaviek na server.
    • Použitie CDN na distribúciu statických súborov prispelo k zlepšeniu výkonu pre globálnych používateľov.
  3. Lazy loading pre rýchlejšie načítanie stránok
    • Obrázky a ďalšie médiá sa načítavali len vtedy, keď boli potrebné, čo urýchlilo počiatočné načítanie stránky.
    • Tým sa dosiahlo lepšie skóre Core Web Vitals a zvýšila sa spokojnosť používateľov.

Táto implementácia zabezpečila stabilný, bezpečný a výkonný e-shop, ktorý je pripravený na ďalší rast a rozšírenie.

Výsledky

Výkon

  • Rýchlosť načítania stránok: Vďaka implementácii Next.js 15 a optimalizácii frontendu sa čas načítania hlavných stránok znížil o 40%, čo významne zlepšilo používateľský zážitok.
  • SEO skóre: Server-side rendering (SSR) a optimalizácia obsahu viedli k zvýšeniu SEO skóre o 25%, čo prispelo k lepšiemu umiestneniu stránky vo výsledkoch vyhľadávania.

Používateľská skúsenosť

  • Spätná väzba: Používatelia oceňovali rýchlosť webu, intuitívnosť rozhrania a plynulý objednávkový proces. Výber pobočky cez Packeta widget a jednoduché platobné metódy (Apple Pay a Google Pay) boli identifikované ako obzvlášť pozitívne aspekty.
  • Mobilná optimalizácia: Responzívny dizajn zabezpečil bezproblémové používanie na mobilných zariadeniach, čo viedlo k zvýšeniu mobilných konverzií o 30%.

Rozšíriteľnosť

  • Pridávanie produktov: Systém WooCommerce umožnil rýchle a jednoduché pridávanie nových produktov a ich spravovanie.
  • Integrácie: Architektúra bola navrhnutá tak, aby umožnila ľahké zapojenie nových funkcií alebo služieb, ako napríklad ďalšie platobné metódy, personalizácia produktových odporúčaní alebo viacjazyčná podpora.
  • Budúce rozšírenia: Projekt je pripravený na integráciu automatizácie marketingu (napr. e-mailové kampane) alebo pokročilých analytických nástrojov na sledovanie správania používateľov.

Celkový dopad

Tento projekt nielen zlepšil technickú kvalitu a používateľský zážitok na e-shope, ale tiež položil základy pre dlhodobý rast a rozvoj značky.

Záver a budúce plány

Hodnotenie projektu

Projekt e-shopu najsilnejsiaklbovavyziva.sk splnil stanovené ciele a priniesol významné zlepšenia vo viacerých oblastiach:

  • Efektívny e-shop: Vytvorený e-shop je rýchly, responzívny a používateľsky prívetivý, čo vedie k vyššej spokojnosti zákazníkov a lepšej konverzii.
  • Bezpečnosť a spoľahlivosť: Implementácia moderných platobných riešení (Stripe, Apple Pay, Google Pay) a zabezpečenie API spojení posilnili dôveru používateľov pri online nákupoch.
  • SEO a viditeľnosť: Zlepšené SEO skóre a rýchlosť načítania stránok prispeli k zvýšeniu návštevnosti a viditeľnosti značky.
  • Rozšíriteľnosť: Architektúra systému umožňuje jednoduché pridávanie funkcií, produktov a integrácií, čo poskytuje flexibilitu pre budúci rast.

Celkový dopad projektu je pozitívny – e-shop výrazne zlepšil online prítomnosť značky a poskytuje zákazníkom profesionálny a moderný nákupný zážitok.

Možnosti ďalšieho rozvoja

  1. Integrácia AI pre odporúčania produktov
    • Nasadenie umelej inteligencie pre analýzu nákupného správania zákazníkov a odporúčanie produktov na mieru.
    • Zlepšenie personalizácie, čo môže zvýšiť priemernú hodnotu objednávky a mieru konverzie.
  2. Rozšírenie o viacjazyčnú podporu
    • Pridanie viacjazyčnej funkcionality, ktorá umožní osloviť širšie publikum vrátane medzinárodných zákazníkov.
    • Lokalizácia webu vrátane meny, spôsobov dopravy a platobných metód.
  3. Automatizácia marketingu cez e-maily a notifikácie
    • Implementácia automatizovaných e-mailových kampaní pre opustené košíky, odporúčania produktov a zákaznícke výročia.
    • Push notifikácie pre rýchlu komunikáciu o akciách, zľavách a novinkách.

Tieto kroky by mohli ďalej posilniť obchodné výsledky e-shopu a zvýšiť spokojnosť a lojalitu zákazníkov, čím by značka získala ešte silnejšiu pozíciu na trhu.

Vybraná časť kódu z Cookie Consent: Spracovanie užívateľských preferencií pre cookies

Táto časť kódu ukazuje logiku na spracovanie a uloženie preferencií používateľov týkajúcich sa rôznych typov cookies:

const handleAcceptAll = () => {
  setConsent({
    necessary: true,
    analytics: true,
    marketing: true,
  });
  setModalOpen(false);
};

const handleRejectAll = () => {
  setConsent({
    necessary: true,
    analytics: false,
    marketing: false,
  });
  setModalOpen(false);
};

const handleSavePreferences = () => {
  setConsent({ ...consent });
  setModalOpen(false);
};

Popis:

  1. Funkcia handleAcceptAll:
    • Používateľ prijme všetky typy cookies.
    • Nastaví stav consent na hodnotu true pre všetky cookies.
    • Zatvorí modálne okno nastavenia cookies.
  2. Funkcia handleRejectAll:
    • Používateľ odmietne analytické a marketingové cookies, ale nevyhnutné cookies ostávajú aktívne.
    • Stav consent pre analytics a marketing sa nastaví na false.
  3. Funkcia handleSavePreferences:
    • Ukladá aktuálne preferencie používateľa zo stavu consent.
    • Umožňuje detailnejšie nastavenie podľa individuálnych požiadaviek.

Kde sa tieto funkcie používajú:

  • Tlačidlá na akciu:
    • „Prijať všetko“: Volá handleAcceptAll.
    • „Odmietnuť všetko“: Volá handleRejectAll.
    • „Uložiť nastavenia“: Volá handleSavePreferences po individuálnych úpravách preferencií.

Táto logika je súčasťou komponentu na správu cookies a je zodpovedná za zabezpečenie súladu s GDPR/CCPA.