Press "Enter" to skip to content

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

Admin 9

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:

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:

Następnie zaraz przed zamknięciem znacznika

Wklejamy odwołanie do naszych bibliotek:

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

Oraz:

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

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

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:

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

zamieniamy na:

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:

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:

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

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

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

W jej wnętrzu kod:

Zastępujemy kodem:

Ostylowanie slidera.

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

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

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

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 Lukas

    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

      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 Lukas

        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

          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?

          • Lukas Lukas

            zwraca NULL czyli nie przekazuje…

          • Admin admin

            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 Lukas

            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 Lukas

            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

            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 🙂

Dodaj komentarz

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