W tym tutorialu przedstawimy jak wykonać efektowny slider z logami producentów na stronie głównej sklepu. Logotypy będą się przesuwać w poziomie. Będą pokoloryzowane na szaro a najechanie myszką będzie je koloryzowało. Oczywiście kliknięcie na dany logotyp pokaże listę produktów tego producenta w sklepie.

Instrukcję będziemy prezentować na przykładzie domyślnego szablonu PrestaShop o nazwie default. Wersja naszej PrestyShop to 1.5.6.2. Ale przy małych modyfikacjach powinno też to zadziałać pod innymi wersjami. Zapraszamy do dyskusji w razie problemów.

Efektem naszych działań będzie taki widok na stronie głównej:

Wdrożenia PrestaShop Kraków

Zatem po kolei.

Tworzenie producentów w sklepie.

Aby slider działał wszyscy producenci zdeklarowani w sklepie muszą mieć przypisane logotypy. W tym celu wchodzimy w:

Zaplecze sklepu » Katalog » Producenci

I na liście producentów edytujemy każdy z wpisów upewniając się że każdy ma przypisane logo.

Podłączenie wymaganych bibliotek w nagłówku.

Otwieramy plik:

/themes/default/header.tpl

Następnie zaraz przed zamknięciem znacznika

</head>

Wklejamy odwołanie do naszych bibliotek:

<link href="/themes/{$tpl_name}/css/jquery.simplyscroll-1.0.4.css" rel="stylesheet" type="text/css" />
<script src="/themes/{$tpl_name}/js/jquery.simplyscroll-1.0.4.js" type="text/javascript"></script>
<script src="/themes/{$tpl_name}/js/simplyscroll-trigger.js" type="text/javascript"></script>

Pliki te są dołączone do tego wpisu w spakowanym archiwum ZIP na końcu artykułu. Musimy je skopiować do folderu:

/themes/default/css/

Oraz:

/themes/default/js/

Jak widać w kodzie wklejanym do pliku header.tpl mamy zdelkarowaną dodatkową zamienną Smarty:

{$tpl_name}

Musimy ją zadeklarować. W tym celu edytujemy plik:

classes/controller/FrontController.php

Następnie odnajdujemy fukcję PHP (metodę) o nazwie init()

Jest ona w okolicach 90 linii. Następnie znacznie niżej, bo na wysokości 300 linii znajdujemy początek deklaracji wysyłania zmiennych Smarty do pliku .tpl:

$this->context->smarty->assign(array(

Jest to zwykła zmienna tablicowa. W dowolnym miejscu dodajemy kolejny element. Najzwyczajniej kod o postaci:

'tpl_dir' => _PS_THEME_DIR_,
'modules_dir' => _MODULE_DIR_,
'mail_dir' => _MAIL_DIR_,

zamieniamy na:

'tpl_dir' => _PS_THEME_DIR_,
'tpl_name' => _THEME_NAME_,
'modules_dir' => _MODULE_DIR_,
'mail_dir' => _MAIL_DIR_,

dodając brakujący klucz: tpl_name

Wgranie skryptu PHP wyświetlającego miniatury obrazków

Jest to plik image.php. Jest to bardzo pomocny skrypt który zmniejsza obrazki wg. zadanych parametrów _GET. W tym momencie nie będziemy się nad nim rozwodzić. Plik wgrywamy do katalogu głównego sklepu. Plik ten (jak inne nie będące w standardowym wyposażeniu PrestaShop) są dołączone do tego wpisu w spakowanym archiwum ZIP na końcu artykułu.

Ten plik PHP do działania potrzebuje folderu do zapisywania plików tymczasowych. W tym celu w katalogu głównym sklepu tworzymy pusty folder:

/tmp

i nadajemy mu prawa zapisu 755.

Wstawienie slidera w szablon.

Tutaj pokażemy jak wstawić ten element w miejscu pomiędzy głównym sliderem obrazkowym a listą produktów polecanych:

Wdrożenia PrestaShop Kraków

Oczywiście może on być wstawiony w dowolnym miejscu w szablonie. Zapraszamy do eksperymentów.

W tym celu edytujemy plik:

themes/default/modules/homefeatured/homefeatured.tpl

I zaraz na jego początku wstawiamy następujący kod:

<div id="brands">
{foreach from=$manufacturers item=manufacturer}
<a title="{$manufacturer.name|escape:'htmlall':'UTF-8'}"
href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)}"
style="background-image: url('/image.php?image=/img/m/{$manufacturer.id_manufacturer}.jpg&width=74&height=74&quality=100');">
</a>
{/foreach}
</div>

Jak widzimy operujemy tutaj na zmiennej $manufacturers musimy ją zadeklarować. W tym celu edytujemy plik:

modules/homefeatured/homefeatured.php

I znajdujemy w niej funkcję php (metodę) o nazwie: hookDisplayHome()

W jej wnętrzu kod:

$products = $category->getProducts((int)Context::getContext()->language->id, 1, ($nb ? $nb : 8), "position");

Zastępujemy kodem:

$products = $category->getProducts((int)Context::getContext()->language->id, 1, ($nb ? $nb : 8), "position");

$this->smarty->assign('manufacturers', Manufacturer::getManufacturers());

Ostylowanie slidera.

Otatnim etapem jest odpowiedni kod CSS opisujący wygląd slidera. W tym celu otwieramy plik:

themes/default/css/global.css

I na jego końcu dopisujemy następujace reguły CSS:

#brands {
position: relative;
height: 30px;
text-align: center;
padding-bottom: 62px;
margin: 14px auto 0;
}

#brands a {
background-position: center center;
background-repeat: no-repeat;
display: block;
float: left;
height: 76px;
margin: 0 5px;
width: 69px;
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

#brands a:hover {
filter: none;
-webkit-filter: grayscale(0);
}

#brands img {
vertical-align: middle;
margin-bottom: 18px
}

Jak widzimy w tym kodzie jest odwołanie do pliku graficznego filters.svg. W tym celu kopiujemy go do folderu:

themes/default/css/

Plik ten (jak inne nie będące w standardowym wyposażeniu PrestaShop) są dołączone do tego wpisu w spakowanym archiwum ZIP na końcu artykułu.

Gotowe! Slider został wstawiony i możemy teraz cieszyć oko na stronie głównej takim urozmaiceniem. Na pewno sprawi ono, że Twój sklep będzie się wyróżniał na tle konkurencji.

W naszych realizacjach w firmie SmartProjects.pl często wykonywaliśmy taką modyfikację. Zachęcamy wszystkich do wdrożenia tego elementu i w razie problemów – pozostajemy do dyspozycji.

Poniżej wspomniane w treści linki do archiwum ZIP z dodatkowymi plikami:

POBIERZ

Share This:

  1. Lukas says:

    zaktualizowałem prestę do wersji 1.6.1.4 i moduł przestał się wyświetlać. Sprawdziłem wszystkie wpisy i niby są ok ale jedna chyba jest to niekompatybilne. Da się to naprawić?

    • admin
      admin says:

      Ciężko powiedzieć. Może problem jest w PHP ? W jaki sposób przekazujesz zmienną do szablonu? Sposób $this->context->smarty może nie działać

      • Lukas says:

        no wszystko mam tak jak w artykule powyżej. w wersji 1.6.0.4 działało, po aktualizacji już nie… pomimo że sprawdziłem wpisy bo po aktualizacji wiadomo nadpisało niektóre pliki. poprawiłem i nie działa. no skoro po aktualizacji ten sposób nie działa to w w jaki sposób ją przekazać?

        • admin
          admin says:

          Aha to może w szablonie tpl tam gdzie wyświetlany jest kod HTML slidera upewnijmy się że zmienna (trzymająca wszystkich tych producentów) jest przekazywana. Wywołaj tam {$manufacturers|var_dump} i daj znać co Ci to zwraca?

          • admin
            admin says:

            Tak, albo przekazuje ale pustą zmienną. Czyli trzeba w takim wypadku wyciągnąć listę producentów w inny sposób w PHP. Możliwe że tamta metoda jest już nie wspierana w tej wersji. Sprawdź w PHP czy ta zmienna jest pusta i odpowiednio zmodyfikuj kod. Postaram się to sprawdzić.

          • Lukas says:

            teraz nie ma tego o czym pisałeś żeby podmienić:
            $products = $category->getProducts((int)Context::getContext()->language->id, 1, ($nb ? $nb : 8), „position”);

            tylko jest tak:
            public function hookDisplayHome($params)
            {
            if (!$this->isCached(‚homefeatured.tpl’, $this->getCacheId()))
            {
            $this->_cacheProducts();
            $this->smarty->assign(
            array(
            ‚products’ => HomeFeatured::$cache_products,
            ‚add_prod_display’ => Configuration::get(‚PS_ATTRIBUTE_CATEGORY_DISPLAY’),
            ‚homeSize’ => Image::getSize(ImageType::getFormatedName(‚home’)),
            )
            );
            }
            return $this->display(__FILE__, ‚homefeatured.tpl’, $this->getCacheId());
            }

          • Lukas says:

            ok już sam ogarnąłem 🙂
            w
            $this->smarty->assign(
            array(
            dodałem tylko linijkę
            ‚manufacturers’ => $manufacturers,

            w nowej wersji inaczej się poprostu przekazuje zmienną 🙂 nie tak jak podałeś powyżej tylko dodając linijkę którą podałem tutaj 🙂 ale dzięki za popdowiedź gdzie szukać 🙂

          • admin
            admin says:

            Super że się udało to zrobić! 🙂 przepraszam za brak odpowiedzi mieliśmy natłok pracy przez ostatnie dni i nie mogłem się tym zająć. W razie problemów pisz to postaram się pomóc 🙂

Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *