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.
Zawartość artykułu
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:
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ć?
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ć
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ć?
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?
zwraca NULL czyli nie przekazuje…
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ć.
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());
}
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ć 🙂
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 🙂