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:

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:

Hervasztó é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:

És a módosított:

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:

Eredmény:

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:

Eredmény:

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! 🙂

Szerkesztés 2019.04.10.:

Prestashop 1.7-ben az alábbi módon lehetséges eljárni:

A mypresta.eu-ról érdemes beszerezni valamelyik modult ezek közül (attól függően hogy top termékeket szeretnénk-e megjeleníteni vagy újakat):

https://mypresta.eu/modules/front-office-features/homepage-tab-best-sellers.html

https://mypresta.eu/modules/front-office-features/homepage-tab-new-products.html

Én az újat használtam. Ha letöltötted, akkor telepítsd, majd állítsd be a modulban hogy hány terméket mutasson.

Ezek után keresd ki azt a TPL-t ami azért a helyért felel ahová tenni szeretnéd (például: themes/TÉMANEVE/templates/errors/not-found.tpl), majd keresd ki az utolsó section-t és dobd utána ezt:

{assign var='HOOK_HOME_TAB_CONTENT' value=Hook::exec('displayHomeTabContent')}
{assign var='HOOK_HOME_TAB' value=Hook::exec('displayHomeTab')}
{if isset($HOOK_HOME_TAB_CONTENT) && $HOOK_HOME_TAB_CONTENT|trim}
<div class="tabs">
{if isset($HOOK_HOME_TAB) && $HOOK_HOME_TAB|trim}
<ul id="home-page-tabs" class="nav nav-tabs clearfix">
{* {$HOOK_HOME_TAB nofilter} *}
<h4 style="padding-top: 30px;">NOVE PRODUKTY:</h4>
</ul>
{/if}
<div class="tab-content" id="tab-content">{$HOOK_HOME_TAB_CONTENT nofilter}</div>
</div>
{/if}

Majd próba 🙂

Szükséges lehet a kinézetet testre szabni (például bootstrap-el).