Press "Enter" to skip to content

Dodanie wiadomości urlopowej, okienka pop-up w PrestaShop 1.7

Admin 1

Ten temat już poruszaliśmy w artykule:

Popup RWD z dowonym obrazkiem otwierany na stronie głównej – Presta Shop 1.4 – 1.6 [Aktualizacja]

Tak naprawdę jest to sposób na taką funkcjonalność w nowszej wersji PrestaShop.

Podstawowe funkcje tej modyfikacji:

  • komunikat można włączać/wyłaczać przez zaplecze sklepu
  • pojawia się tylko 1 raz podczas jednej sesji przeglądarki (korzysta z Cookies)
  • pojawia się na dowolnej podstronie sklepu
  • jest dostosowane do urządzeń mobilnych
  • można samodzielnie zmieniać treść obrazka

Uwaga! Z racji, że modyfikujemy tutaj core systemu – w momencie jak wykonasz np. aktualizację oprogramowania – poniższe zmiany musisz w niektórych plikach systemu wprowadzić ponownie, jak zależy CI na takim dodatku!

1. Przygotowanie obrazka z wiadomością o urlopie

Zanim zaczniesz zmieniać pliki, przygotuj obrazek z komunikatem i wgraj go do folderu:

img/cms/

pod nazwą:

intro.jpg

Przykładowy plik:

Przykład obrazka z komunikatem o urlopie

Obrazek będziesz mógł/mogła w przyszłości podmienić poprzez edytor treści i funkcję „wstaw obrazek” -> tam pojawia się manager plików i należy usunąć stary obrazek intro.jpg i wgrać nowy.

2. Dodanie biblioteki JS i pliku CSS

Pobierz plik ZIP z dodatkowymi plikami: wiadomosc_urlopowa.zip

Następnie rozpakuj zawartość do folderu głownego sklepu, tak aby pojawiły się tam pliki:

/css/jquery.fancybox-intro.css
/js/jquery/fancyCookie.js
/js/jquery/fancyIntro.js
/js/jquery/fancybox/fancybox_loading.gif
/js/jquery/fancybox/fancybox_overlay.png
/js/jquery/fancybox/fancybox_sprite.png
/js/jquery/jquery.fancybox.js

3. Modyfikacja plików PHP

W pliku:

/controllers/admin/AdminPreferencesController.php

Zamień kod:

'PS_DISPLAY_SUPPLIERS' => array(
    'title' => $this->trans('Display brands and suppliers', array(), 'Admin.Shopparameters.Feature'),
    'desc' => $this->trans('Enable brands and suppliers pages on your front office even when their respective modules are disabled.', array(), 'Admin.Shopparameters.Help'),
    'validation' => 'isBool',
    'cast' => 'intval',
    'type' => 'bool',
),

Na:

'PS_DISPLAY_SUPPLIERS' => array(
    'title' => $this->trans('Display brands and suppliers', array(), 'Admin.Shopparameters.Feature'),
    'desc' => $this->trans('Enable brands and suppliers pages on your front office even when their respective modules are disabled.', array(), 'Admin.Shopparameters.Help'),
    'validation' => 'isBool',
    'cast' => 'intval',
    'type' => 'bool',
),
'PS_DISPLAY_IMG_POPUP' => array(
    'title' => $this->l('Obrazkowy popup'),
    'desc' => $this->l('Włącz lub wyłącz pojawianie się okienka popup na sklepie'),
    'validation' => 'isBool',
    'cast' => 'intval',
    'type' => 'bool'
),

czyli dopisz nowy element:

'PS_DISPLAY_IMG_POPUP' => array(....

W pliku:

/src/Adapter/Preferences/PreferencesConfiguration.php

W funkcji

public function getConfiguration()

dopisz element:

'display_img_popup' => $this->configuration->getBoolean('PS_DISPLAY_IMG_POPUP'),

W funkcji:

public function updateConfiguration(array $configuration)

Dopisz element:

$this->configuration->set('PS_DISPLAY_IMG_POPUP', $configuration['display_img_popup']);

W funkcji:

public function validateConfiguration(array $configuration)

Dopisz element:

$configuration['display_img_popup'],

W pliku:

/src/PrestaShopBundle/Form/Admin/Configure/ShopParameters/General/PreferencesType.php

Znajdź kod:

->add('display_best_sellers', SwitchType::class)

I wklej pod nim:

->add('display_img_popup', SwitchType::class)

4. Modyfikacja plików szablonu zaplecza i szablonu sklepu

Otwórz plik:

/src/PrestaShopBundle/Resources/views/Admin/Configure/ShopParameters/preferences.html.twig

Znajdź fragment:

<div class="form-group row">
    <label class="form-control-label">{{ 'Display brands and suppliers'|trans }}</label>
    <div class="col-sm">
        {{ form_errors(generalForm.display_suppliers) }}
        {{ form_widget(generalForm.display_suppliers) }}
        <small class="form-text">{{ 'Enable brands and suppliers pages on your front office even when their respective modules are disabled.'|trans({}, 'Admin.Shopparameters.Help') }}</small>
    </div>
</div>

I wklej pod nim kod:

<div class="form-group row">
    <label class="form-control-label">{{ 'Obrazkowy popup'|trans }}</label>
    <div class="col-sm">
        {{ form_errors(generalForm.display_img_popup) }}
        {{ form_widget(generalForm.display_img_popup) }}
        <small class="form-text">{{ 'Włącz lub wyłącz pojawianie się okienka popup na sklepie.'|trans({}, 'Admin.Shopparameters.Help') }}</small>
    </div>
</div>

Ostatnim krokiem będzie wklejenie kodu uruchamiającego popup jeśli jest on aktywowany w zapleczu. Otwórz plik:

/themes/{SZABLON}/templates/layouts/layout-both-columns.tpl

I przed zamknięciem znacznika body:

</body>

Wklej:

{if Configuration::get('PS_DISPLAY_IMG_POPUP') == '1'}
<script type="text/javascript" src="/js/jquery/jquery.fancybox.js"></script>
<link href="/css/jquery.fancybox-intro.css" rel="stylesheet" type="text/css" media="{$media}" />
<script type="text/javascript" src="/js/jquery/fancyCookie.js"></script>
<script type="text/javascript" src="/js/jquery/fancyIntro.js"></script>
{/if}

Uwaga! czasami w szablonie jest już wcześniej include’owana biblioteka Fancybox.

Wtedy z w/w kodu usuń:

<script type="text/javascript" src="/js/jquery/jquery.fancybox.js"></script>

Gotowe!

W zapleczu powinna się pojawić opcja:

Preferencje -> Ogólny -> Obrazkowy popup -> TAK/NIE

Dodatkowa opcja konfiguracyjna włączająca/wyłączająca komunikat

Natomiast po przebudowaniu cache sklepu (włączenie wymuszonej kompilacji, wyłączeniu cache – więcej informacji jak to z robić) klientom powinien pojawić się komunikat o urlopie. Lub dowolnie inny – np. denerwujące życzenia bożonarodzeniowe 🙂

Widok okna z komunikatem

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.

Zobacz także !
Jak naprawić kolejność kategorii CMS w sklepie PrestaShop 1.7 ?