Press "Enter" to skip to content

PrestaShop 1.6 – sposób na umieszczenie na stronie głównej sklepu listy kategorii w formie boxów. Proste programowanie.

Admin 0

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.

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:

Konfiguracja 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

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.

Zobacz także !
Ustawienie okładek kategorii dla 150 albo 2000 kategorii na Twoim…