Jeśli nasz sklep internetowy wymaga zaprezentowania na stronie głównej boxów z linkami do kategorii – poniżej „przepis” jak to wykonać.
Taka forma prezentacji może zwiększyć klikalność i sprawić, że klienci szybciej dotrą do interesujących ich przedmiotów nie przeszukując menu głównego sklepu. Jeśli jeszcze w okładkach kategorii zastosujemy „clickbait-owe” grafiki – mamy szansę zwiększyć konwersję sprzedaży przez takie rozwiązanie.
Co warte podkreślenia – nasze rozwiązanie jest dynamiczne. Tzn. jeśli jakaś kategoria zostanie wyłączona – zniknie także na stronie głównej. Dodanie nowej podkategorii też sprawi że się ona pojawi na stronie startowej sklepu. Jednak należy pamiętać aby przypisać do niej okładkę 🙂
Sposób został opracowany dla wersji 1.6. Jeśli poszukujesz wersji dla 1.7 – możesz spróbować odp. zmodyfikować podany kod. Jest on w dużej mierze natywny w stosunku do nowszej wersji.
Dodatkowa uwaga. W zależności od Twojego szablonu możliwe, że będą potrzebne dodatkowe prace webmasterskie aby dostosować wygląd boxów stricte pod Twój szablon. My stosujemy tutaj domyślny styl CSS dla wyglądu boxów podkategorii (subcategories) w kategoriach.
Zawartość artykułu
Moduł polecanych produktów na stronie głównej.
Wejdź w „Moduły -> Pozycje” i upewnij się, że na stronie głównej jest przypięty moduł „Polecane produkty na stronie głównej” (homefeatured) jeśli nie – przypnij je do strony głównej albo zresetuj ten moduł.
Edycja kodu PHP
Uwaga! Przed pojęciem działań na plikach – warto wykonać ich kopie zapasową 🙂
Otwórz plik:
modules/homefeatured/homefeatured.php
Dopisz w nim funkcję:
public function assignSubcategories()
{
$category = new Category(52, $this->context->language->id);
if ($sub_categories = $category->getSubCategories($this->context->language->id)) {
$this->context->smarty->assign(array(
'subcategories' => $sub_categories,
'subcategories_nb_total' => count($sub_categories),
'subcategories_nb_half' => ceil(count($sub_categories) / 2)
));
}
}
I tutaj w miejscu cyfry 52 podaj ID kategorii zbiorczej, której podkategorie mają być wyświetlane. Jeśli jest to kategoria główna – wejdź w dział „Katalog -> Kategorie” i przepisz ID tej kagegorii. To kategorie które są dla niej podkategoriami będą wyświetlane.
W funkcji hookDisplayHome() dopisz kod:
$this->assignSubcategories();
$this->context->smarty->assign('israndom',Configuration::get('HOME_FEATURED_RANDOMIZE'));
Wklej go przed:
return $this->display(__FILE__, 'homefeatured.tpl', $this->getCacheId());
W tym samym pliku znajdz funkcję hookHeader() i zamień kod w jej wnętrzu:
if (isset($this->context->controller->php_self) && $this->context->controller->php_self == 'index')
$this->context->controller->addCSS(_THEME_CSS_DIR_.'product_list.css');
na:
if (isset($this->context->controller->php_self) && $this->context->controller->php_self == 'index') {
$this->context->controller->addCSS(_THEME_CSS_DIR_.'category.css', 'all');
$this->context->controller->addCSS(_THEME_CSS_DIR_.'product_list.css');
}
Jeśli Twój kod jest inny – wykonaj to tak, aby plik category.css był include’owany w nagłówku i aby ten styl CSS był dostępny.
Edycja kodu HTML i bazowa konfiguracja
Teraz przechodzimy do sedna. W pliku .tpl który wyświetlany jest na stronie głównej:
themes/{TWÓJ-SZABLON}/modules/homefeatured/homefeatured.tpl
Na początku tego pliku wklej:
{if $israndom}
Natomiast na końcu:
{else}
{if isset($subcategories)}
{if (isset($display_subcategories) && $display_subcategories eq 1) || !isset($display_subcategories)}
<!-- Subcategories -->
<div id="subcategories" style="border: 0">
<ul class="clearfix">
{foreach from=$subcategories item=subcategory}
<li>
<div class="subcategory-image">
<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
{if $subcategory.id_image}
<img class="replace-2x" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'tm_home_default')|escape:'html':'UTF-8'}" alt="{$subcategory.name|escape:'html':'UTF-8'}" />
{else}
<img class="replace-2x" src="{$img_cat_dir}{$lang_iso}-default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
{/if}
</a>
</div>
{if $subcategory.description}
<div class="cat_desc">{$subcategory.description}</div>
{/if}
</li>
{/foreach}
</ul>
</div>
{/if}
{/if}
{literal}
<style>
#subcategories ul li {
width: 196px!important;
}
</style>
{/literal}
{/if}
Jaka jest idea takiego kodu? Jak widać w pliku PHP przekazujemy zmienną $israndom. Jest ona określana przez „wajhę” TAK/NIE o tytule „Losowe wyświetlanie produktów polecanych” w konfiguracji modułu homefeatured:
W ten sposób mamy takie zachowanie:
- Jak jest ustalana losowość: pokazuj domyślnie produkty polecane na stronie głównej
- Jesli nie jest ustalana losowoć: pokazuj okładki kategorii (tego czego dotyczy ten artykuł).
Czyli mozna uznać, że jest to „bazowa konfiguracja” czy pokazywać kategorie na głównej czy nie.
Oczywiście możemy pokazać to i to – po prostu pozbywając się
1) klauzuli {if $israndom}
2) klauzuli środkowej {else}
3) klauzuli końcowej {/if}
To jak ma się to wyświetlać – zależy od Ciebie.
Gotowe! Po przebudowaniu cache szablonu i wyczyszenu pamięci podręczniej – na stronie głównej pojawią się boxy kategorii. Tak jak zostało napisane to wyżej – jeśli potrzebujesz dodatkowych styli CSS – dopisz je do pliku category.css aby dotyczyły tylko kodu zestrony głównej.
Znacznik <body> na stronie głównej posiada atrybut ID o wartości
<body id="index"I zawsze mozesz z tego skorzystac w dyrektywach CSS:)
Wymiar grafiki boxa kagegorii na stronie głównej
Warto też dobrać odp. rozmiar grafik. Czy to kwadratowe, czy prostokątne. Ich rozmiar określisz w dziale „Zdjęcia” w PrestaShop 1.6 w adminie. My w kodzie używamy rozmiaru tm_home_default – zupełnie typowy dla danego szablonu. Ty możesz stworzyć wręcz dodatkowy np. home_cetegory_cover + nadać mu określone wymiary (unikalne dla Twojego szablonu) i przebudować następnie miniatury kategorii tylko dla tego wymiaru. W ten sposób nie naruszysz okładek z kategorii a tego wymiaru będziesz używać tylko do strony głównej. Tutaj PrestaShop 1.6 jest bardzo elastycznym systemem.
grafika: pexels.com
