Szybka galeria na stronie CMS, zastępuje moduł galerii w Presta Shop 1.6

Niestety Presta Shop nie posiada wbudowanego modułu galerii.. A szkoda, bo do dość duża niedoskonałość. Nie ma też solidnego i sprawdzonego darmowego modułu, który by to zapewniał.

» Przeczytaj koniecznie artykuł jak łatwo osadzić w Presta Shop rewelacyjny skrypt galerii Unitegallery: https://pskrk.com/presta-shop-osadzenie-galerii-unitegallery-na-stronie-cms/

W dzisiejszym artykule pokażemy jak łatwo dodać taką galerię na wydzielonej do tego stronie CMS. Nie jest to sposób doskonały, bo zdjęcia będą osadzone tam w pełnym rozmiarze, jednak takie prowizoryczne rozwiązanie do czasu wdrożenia rozbudowanej galerii może tymczasowo wystarczyć.

Dodatkowo taka galeria jest dostosowana do RWD.

1. Tworzymy stronę CMS gdzie będzie galeria:

Preferencje -> CMS -> (przycisk) Dodaj nową stronę CMS

Podajemy:

1. Tytuł
2. Wyświetlany: TAK

Natomiast w treści umieszczamy zdjęcia naszej galerii.

Dobrze jest tutaj wykorzystać parę elementów z wbudowanego edytora treści:

• Zdjęcia rozmieścić poprzez narzędzie tabeli. Wstawić np. tabelę o 3 kolumnach i 4 wierszach następnie w każdej komórce z osobna wstawiać zdjęcie. Pomiędzy kolejnymi komórkami przesuwamy się strzałkami na klawiaturze.
• Zdjęcia, które będą tam osadzone niech mają identyczny rozmiar. Ewentualnie takie samo ratio (stosunek szerokości do wysokości). Następnie po wstawieniu w treść niech mają takie same wymiary:

Jak widać na obrazku mimo, że każde ze zdjęć ma oryginalnie inny rozmiar (na niebiesko),

to mają te same ratio. Tutaj 3:4. Po przeskalowaniu do rozmiaru 200×267 wszystkie są takie same.

W następnym wierszu wstawiamy następne obrazy itd.

Tak przygotowaną stronę z galerią zapisujemy.

Warto zapisywać tworzoną stronę w miarę często. Presta Shop posiada dość krótki czas sesji i gdy długo nie zapisujemy możemy wprowadzoną treść utracić!

2. Załadowanie wymaganych bibliotek i modyfikacja kontrolera.

Namierzenie biblioteki

Sprawdzamy czy nasz sklep dysponuje plikiem CSS dla biblioteki jQuery FancyBox.

Włączamy adres:

http://{ADRES-NASZEGO-SKLEPU}/js/jquery/plugins/fancybox/jquery.fancybox.css

(W instalacjach pod 1.6 a także 1.5 powinien on bezproblemowo działać)

Jeśli pojawia się tam plik CSS – wszystko jest w porządku. W innym wypadku poprzez FTP lokalizujemy ten plik aby znaleźć jego poprawną ścieżkę.

Nadpisanie kotrolera

Edytujemy plik:

controllers/front/CmsController.php

Znajdujemy metodę (funkcję) o nazwie:

setMedia()

Na jej końcu dopisujemy kod:

$this->addCSS('/js/jquery/plugins/fancybox/jquery.fancybox.css', 'screen');
$this->addJqueryPlugin('fancybox');

Gdy link do naszego pliku jquery.fancybox.css jest inny uwzględniamy to w tym kodzie.

3. Zmiany w szablonie

Otwieramy plik

/themes/default-bootstrap/cms.tpl

Lub:

/themes/{TWÓJ SZABLON}/cms.tpl

następnie na jego końcu dopisujemy ten kod tworzący galerię:

{literal}

<script type="text/javascript">

$(document).ready(function() {

$('#center_column .rte img').addClass('fancyboxwrap')

$('.fancyboxwrap').each(function() {
var src = $(this).attr('src');
var a = $('').attr('href', src).attr('class', 'fancybox').attr('rel', 'galeria');
$(this).wrap(a);

});

$("a.fancybox").fancybox();

});

</script>

{/literal}

4. Odświeżenie cache.

Parametry zaawansowane -> Wydajność -> Odśwież pamięć podręczną / Odśwież cache

Ewentualnie usuwamy (lub zmieniamy jego nazwę) folder /cache przez FTP i zakładamy nowy o tej samej nazwie.

5. Wynik naszych prac.

Edytujemy ponownie naszą stronę CMS gdzie jest galeria i wciskamy „podgląd” lub „zapisz i podejrzyj”

Możemy wejść też na adres http://{ADRES-SKLEPU}/index.php?id_cms=6&controller=cms

Gdzie numer 6 to ID dodanej przez nas strony CMS.