Czasem istnieje potrzeba aby na sklepie internetowym pierwszy jego widok był zupełnie odmienny niż reszta sklepu. Innymi słowy chodzi o odmienną stronę startową sklepu z tekstem albo grafiką – widoczną tylko jeden raz po pierwszym załadowaniu strony.

Ważne, aby podczas włączania strony nie zmieniał się jej adres. Czyli należy wykonać to bez użycia przekierowania np. na podstronę sklepu – tak jak np. opisaliśmy to tutaj: http://prestashopkrakow.pl/presta-shop-1-4-wybrana-strona-cms-jako-strona-startowa-sklepu/ ).

Kolejną istotną kwestią jest pokazywanie tej wiadomości tylko 1 raz podczas pojedynczej sesji. Tj. aby strona główna sklepu była to standardowa strona, a nasza wiadomość powitalna nie pojawiała się za każdym razem, jeśli ktoś chce na nią wrócić.

Takie rozwiązanie może mieć też cele pozycjonerskie. W wiadomości powitalnej możemy użyć wybranych słów kluczowych albo szerszego opisu o tym co można na sklepie kupić.

Przykład zastosowania takiego elementu jest widoczne na jednej z realizacji firmy SmartProjects.pl. Chodzi o sklep: http://naturalneizdrowe.pl/ . Jak widać, za pierwszym razem widźmy stronę powitalną, a potem już standardowo sklep z podstronami.

Poniżej przedstawiamy jak to wykonać. Wersja sklepu na którym będzie to wykonywane, to 1.6.14. Na nowszych instancjach też powinno to działać. Prosimy o wykonanie kopii bezpieczeństwa plików i bazy danych.

Treść wiadomości powitalnej.

Dodajemy nową stronę CMS.

Preferencje -> CMS

O dowolnej nazwie. Tekst, który będzie tam użyty pojawi się w wiadomości powitalnej. Ustawiamy stronę CMS jako włączoną.

Notujemy jej numer ID. Jest on widoczny na liście stron CMS.

Wskazówka:

Potem w przyszłości, aby wiadomość powitalna się nie pokazywała – wystarczy po prostu wyłączyć publikację strony CMS z jej treścią 😉

Modyfikacja kontrolera PHP

W pliku:


classes/controller/FrontController.php

Znajdujemy funcję o nazwie: initContent()

po kodzie:


if (!isset($this->context->cart)) {
$this->context->cart = new Cart();
}

Wklejamy:


$cms = new CMS(6, $this->context->language->id);
$link_intro = $this->context->link->getCMSLink($cms, $cms->link_rewrite, Configuration::get('PS_SSL_ENABLED'));

$runIntro = false;

session_start();

if (!$_SESSION['introshow'] && $cms->active == '1') {
$_SESSION['introshow'] = 'okay';
$runIntro = true;
} else {
$runIntro = false;
}

Uwaga! Cyfrę 6 zamieniamy na ID naszej strony CMS (patrz wyżej).

W tej samej funkcji initContent() zamieniamy kod:


$this->context->smarty->assign(array(
'HOOK_HEADER' => Hook::exec('displayHeader'),
'HOOK_TOP' => Hook::exec('displayTop'),
'HOOK_LEFT_COLUMN' => ($this->display_column_left ? Hook::exec('displayLeftColumn') : ''),
'HOOK_RIGHT_COLUMN' => ($this->display_column_right ? Hook::exec('displayRightColumn', array('cart' => $this->context->cart)) : ''),
));

na:


$this->context->smarty->assign(array(
'HOOK_HEADER' => Hook::exec('displayHeader'),
'HOOK_TOP' => Hook::exec('displayTop'),
'HOOK_LEFT_COLUMN' => ($this->display_column_left ? Hook::exec('displayLeftColumn') : ''),
'HOOK_RIGHT_COLUMN' => ($this->display_column_right ? Hook::exec('displayRightColumn', array('cart' => $this->context->cart)) : ''),
'active_intro' => $cms->active,
'intro_text' => $cms->content,
'content_only' => $runIntro
));

(po prostu dopisujemy 3 elementy do tablicy)

Zmiana szablonu strony startowej

Otwieramy plik:


themes/{SZABLON}/index.tpl

Wstawkę {SZABLON} – traktujmy jako nazwę naszego szablonu.

Na początku jego treści wstawiamy ten kod (znaki specjalne uniemożliwiają wklejenie go w treści artykułu):

kod-1

Uwaga, w kodzie występują wstawki {SZABLON} należy je zamienić na nazwę naszego szablonu.

Natomiast na końcu na końcu tego pliku:


{/if}

Wgranie wymaganych plików

Do folderu:


themes/{SZABLON}/img

Wgrywamy obrazek logo oraz tła wiadomości powitalnej:

http://prestashopkrakow.pl/wp-content/uploads/2017/07/logointro.png

http://prestashopkrakow.pl/wp-content/uploads/2017/07/introback.jpg

Do folderu:


themes/{SZABLON}/js

Darmową bibliotekę JavaScript skalującą tło w zależności od rozdzielczości ekranu:

jquery.fullbg

Ustawienie odpowiednich styli CSS


.contenttextintro {
background-color: rgba(0, 0, 0, 0.075);
background-position: 100% 100%;
padding: 20px;
line-height: 25px;
font-size: 16;
margin: 0 auto;
width: 70%;
}

.contenttextintro p {
color: #fff;
font-size: 17px;
font-weight: bold;
}

.contenttextintroinner {
width: 70%;
margin: 0 auto;
}

.introwrapperimg img {
margin: 0 auto;
}

a.buttonbottom {
display: inline-block;
padding: 10px 50px;
background-color: #2fb7eb;
color: #fff;
text-align: center;
margin-top: 20px
}

Dopisujemy je do pliku:


/themes/{SZABLON}/css/global.css

Wynik naszych działań: http://demo.prestashopkrakow.pl/  

Aby ponownie zobaczyć wiadomość powitalną wyczyść pliki cookie lub zresetować przeglądarkę WWW.

Oczywiście przy odrobinie znajomości HTML i CSS możemy wiadomość powitalną stworzyć taką jaką sobie życzymy. Jest to kwestia odp. modyfikacji pliku index.tpl oraz styli CSS i obrazków.

Uwaga! Aby wyłączyć ten element (aby wiadomość powitalna się nie pokazywała) wystarczy po prostu wyłączyć publikację strony CMS z jej treścią w:

Preferencje -> CMS

Powodzenia !

Share This:

Zostaw komentarz

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