Presta Shop dodanie strony powitalnej [Aktualizacja]

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: https://pskrk.com/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' => $runIntro,
'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:

{if $active_intro}

{literal}
<script type="text/javascript" src="/themes/{SZABLON}/js/jquery.fullbg.js"></script>
<script type="text/javascript">
$(window).load(function() {
	$("#backgroundintro").fullBg();
});
</script>
<style type="text/css">
.fullBg {
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
}
#maincontent {
	position: absolute;
	left: 0;
	z-index: 50;
	width: 100%;
	}
</style>
{/literal}

<img src="/themes/{SZABLON}/img/introback.jpg" alt="" id="backgroundintro" />

<div id="maincontent">
<div id="introwrapper">
	<div style="text-align: center;" class="introwrapperimg">
	<a href="{$smarty.server.REQUEST_URI}">
	<img class="img-responsive" src="/themes/{SZABLON}/img/logointro.png" />
	</a>
	</div>
	
	<div class="contenttextintro">
	
	<div class="contenttextintroinner">
	
	{$intro_text}
		
	</div>
	
	</div>
	
	<div style="text-align: center;">
	<a class="buttonbottom" href="{$smarty.server.REQUEST_URI}">START</a>
	</div>
	
	</div>
	</div>

{else}

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:

https://pskrk.com/wp-content/uploads/2017/07/logointro.png

https://pskrk.com/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

Gotowe!

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 !

grafika: wallscover.com