404 és keresőoldal

Mi a közös a Prestashop 404-es és a sikertelen keresés oldala között?

Az, hogy tökéletesen üres és semmitmondó mindkettő. Egyenesen látogatóriasztó.

Ahogyan írtam erről a korábbi “10 tipp a jobb konverzióért” cikkemben;
 1. ne hagyjuk a látogatót “pörögni”,
 2. mindig meg kell mondanunk a látogatónak, hogy mit tegyen,
 3. nem hagyhatjuk, hogy sokat agyaljon, sokat gondolkodjon,
 4. mindig legyen előtte figyelemfelkeltő kép/szöveg, mindig kössük le a figyelmét.

Ennek tükrében nézzük meg mi történik, mikor a potenciális vevő 404-et kap:

404-es_alap_prestashop_oldal

Ez az alap default-bootstrap Prestashop téma egy picit más háttérszínnel. A keresőmező már egy továbblépés, de sajnos közel sem elég. Az emberek 90%-a vizuális típusú. Az eladást nem fogja elősegíteni, ha a képébe tolunk egy monitornyi 404-es képet.

Keresés esetében még rosszabb a helyzet:

alap_keresesoldal_prestashopHervasztó és elkeserítő. Kong az ürességtől az egész. Google Analytics elemzése során kiderül, hogy a legtöbben itt zárják be az ablakot és keresnek másik oldalt.

Miért érdemes ez ellen tenni?

Célunk kettős. Az első, egyértelműbb; ne riasszuk el ilyen banális hibák miatt a potenciális vásárlót.
A második: a Google figyeli, hogy egy adott keresés során az oldalunkra látogató látogató mennyi időt tölt Nálunk. Minél több az eltöltött idő, a Google szemében annál értékesebb lesz az oldal az adott, releváns keresés szempontjából melyet találati listán előrébb sorolással hálál meg.

Mit érdemes ez ellen tenni?

Tekintve azt a nézetet miszerint “legfőbb alapelv az egyszerűség” a legproduktívabb megoldás, ha a legtöbbet eladott termékek dinamikus listáját jelenítjük meg ezeken az oldalakon.

Egyszer kell csak megcsinálni, pár percnél több időráfordítást nem igényel és jó a végeredmény: mert vizuális, mert dinamikus és nem utolsó szempont, hogy eladási-statisztikai szempontból releváns termékeket jelenítünk meg. Dinamikusan maximalizáljuk a továbbkattintás lehetőségét.

Lássunk hozzá!

404-es oldal esetében két fájlra lesz szükségünk (egy vezérlő-kontroller fájlra és a sablon-tpl fájlra):
1. /controllers/front/PageNotFoundController.php
2. /themes/default-bootstrap/404.tpl

Egyértelműen, ha a témád nem default akkor a “default-bootstrap” helyett a témád neve fog szerepelni.

Keresőoldal esetében szintén kettőre:
1. /controllers/front/SearchController.php
2. /themes/default-bootstrap/search.tpl

A beépítési “szabály” ugyanaz mindkét kontroller esetében: a lent található kódrészletet

$this->context->smarty->assign(array(
'bestsales' => ProductSale::getBestSales($this->context->language->id,0,10)
));

illesszük be az elé a sor elé, ahol a kontroller megadja, hogy melyik tpl fájlnak kell az adatokat átadnia:

$this->setTemplate(_PS_THEME_DIR_.'404.tpl');

Ezek alapján az eredeti kód így néz ki:

404-es_oldal_eredeti_kod

És a módosított:

404-es_oldal_atprogramozasa
A sablonfájl (.tpl) esetében csak egy egyszerű include-olást végzünk (külső forrásból behúzott fájl, tartalom). Az alábbi sort kell beszúrni oda, ahol szeretnéd, hogy megjelenjenek a termékek:

{include file="./product-list.tpl" products=$bestsales}

Én a 404-es oldal esetében a <form> után illesztettem be a sort:

404-es_oldal_tpl

Eredmény:

404-es_prestashop_oldal

Máris sokkal jobb 🙂 Természetesen a hatalmas csúnya 404-es Prestashop-képet kiszedtem a kódból.

Keresőoldal esetében teljesen ugyanígy kell eljárni. A kontrollerfájlban (SearchController.php) meg kell keresni az alábbi sort (140. körül lesz):

$this->setTemplate(_PS_THEME_DIR_.'search.tpl');

Majd elé illeszteni a kódunkat:

$this->context->smarty->assign(array(
'bestsales' => ProductSale::getBestSales($this->context->language->id,0,10)
));

Ezek után pedig az include-sort beilleszteni a search.tpl-be:

{include file="./product-list.tpl" products=$bestsales}

Annyit érdemes még megemlíteni, hogy ezt a sort a search.tpl-ben a 49-58. sorok közti if elágazásba érdemes betenni (Prestashop 1.6.0.9 default-bootstrap esetén) mivel ez a rész a felelős a “keresésre nincs találat” részért. Én így oldottam meg:

kereso_oldal_beepites

Eredmény:

kereso_oldal_top_termekek_prestashop

 

Ez így már rendben van – sokkal jobb konverzióadatokat mérhetünk ennek az egyszerű trükknek a beépítésével.

Szerkesztés: ha Nekünk nem megfelelő a bestsales, beépíthetjük az új termékeket is:

'newproducts' => Product::getNewProducts($this->context->language->id,0,12)

 Eladásra fel! 🙂

Ha segített a cikk, meghívhatsz egy kávéra! 🙂


Puizl Attila Programozó

Az íróról: Puizl Attila

Puizl Attila vagyok, több éve készítek sikeres Webáruházakat Prestashop rendszerrel. Célom hogy a tudásom minőséggé, munkám pedig eredményessé váljon.

Weboldal: → Prestashop Készítés és Fejlesztés

Még megtalálsz:

Az eddigi tapasztalataimat osztanám meg 1.6.0.11-el ami a hibákat illeti. A Facebook-os Magyar Fórumban közzétett leírás alapján az első probléma a modulok fordítását illeti: Eddig 3 (két frissített és egy szűz) shopnál észleltem az alábbi fordítási anomáliát: első lépésként a fordításoknál kijelöltem lehívásra a modulok fordítását, beállítván a magyar nyelvet és a témát…
2013-ban EBBEN a cikkben írtam először a reszponzivitás fontosságáról és arról, hogy nem is olyan sokára már nem csak figyelmeztetésként lesz jelen a Google részéről a reszponzivitás hiánya, hanem végleg, kísérletezgetések sora után beépül a keresőalgoritmusba is. A Google idén bejelentette, hogy az ominózus időpont április 21.-e lesz ("Mobilegeddon" napja, az…