[PrestaShop 1.5] slider z przesuwanymi się logami producentów na stronie głównej

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 Presta Shop o nazwie default. Wersja naszej Presty Shop 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:

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:

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