Telefono: +39 392 33 73 731

Prestashop: modifiche per avere Fancybox in tutto il sito

In un articolo precedente avevo scritto come creare un avviso popup da mostrare in determinate categorie di prodotti di Prestashop. Nei commenti qualcuno aveva chiesto come si poteva inserire Fancybox anche in altre pagine, oggi rispondo a quel quesito.
Questa volta devo mettere un avviso in tutte le pagine del sito, per avvisare i clienti che gli ordini devono arrivare entro una certa data, se vogliono i loro regali in tempo per Natale.
Il Prestashop che su cui opero è nella versione 1.4, ma penso che, con i dovuti aggiustamenti, si possano adattare le modifiche anche per altre versioni.
In pratica devo fare queste cose:

  • aggiungere lo script ed il css di Fancybox in tutte le pagine nel sito (normalmente sarebbe presente solo nella scheda prodotto).
  • Lanciare il popup automaticamente all'apertura della pagina, settare un cookie che scada in 10 minuti, così da non ripetere troppo spesso il messaggio annoiando i clienti.

Risolviamo il problema in 4 semplici punti.

1. Caricare in js/jquery il file jquery.cookie-plugin.js
Prima di tutto dobbiamo quindi caricare via FTP una plugin di JQuery non presente in versione 1.4 (mentre in Prestashop 1.5 c'è già, quindi eventualmente scaricate quel pacchetto e prendetela).

2. Modificare override/classes/frontController.php (se il file non è presente createlo) aggiungendo nella funzione setMedia le due righe Fancybox, e la piccola plugin per i cookie, il file diviene come indicato di seguito

<?php

class FrontController extends FrontControllerCore
{
	public function setMedia()
	{

	parent::setMedia();
	Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css');
	Tools::addJS(_PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js');
	Tools::addJS(_PS_JS_DIR_.'jquery/jquery.cookie-plugin.js');
	}

}

3. aggiungere adesso il lancio del popup in header.tpl del vostro tema, modificare il codice quindi come di seguito, aggiungendo le righe necessare subito dopo l'apertura del <body>
L'immagine del popup l'ho messa nella cartella delle immagini di Prestashop.

{* -- inizio popup auto --- *}

<script language="javascript">
{literal}
$(document).ready(function() {
//$.cookie("visitato", null);    // togli il commento per svuotare il cookie
 
var handle = $.cookie("visitato"); // ottenere il valore del cookie
if (handle != "si") {
var tempo = new Date();
var minuti = 10;
tempo.setTime(tempo.getTime() + (minuti * 60 * 1000));
$.cookie("visitato", "si", { expires: tempo }); 
//$.cookie("visitato", "si", { expires: 1 }); // esempio se si vuole la durata 1 giorno
 
$('#natalepop').fancybox({
	'speedIn': 300,
	'speedOut': 300,
	'transitionIn': 'elastic',
	'transitionOut': 'elastic',
	'easingIn': 'swing',
	'easingOut': 'swing',
	'titleShow': false,
	'showCloseButton': false,
	'hideOnContentClick': true,
	'hideOnOverlayClick': true
});
$("#natalepop").trigger('click');

}  
});
{/literal}
</script>
<a href="{$img_ps_dir}natale_consegna.jpg" id="natalepop"></a>

{* -- fine popup auto --- *}

4. A questo punto faccio un po' di pulizia, tolgo in override/controllers/ParentOrderCOntroller.php e override/controllers/ProductController.php le righe seguenti che riguardano la plugin Fancybox, sono presenti nella funzione setMedia, così evitiamo che facciano conflitto con il caricamento precedente.

Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css');
...
_PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js'

Quindi ProductController diventa come segue, io cancello le righe direttamente, ma potete anche commentarle.

<?php

class ProductController extends ProductControllerCore
{
	public function setMedia()
	{
		parent::setMedia();

		Tools::addCSS(_THEME_CSS_DIR_.'product.css');
		Tools::addJS(array(
			_PS_JS_DIR_.'jquery/jquery.idTabs.modified.js',
			_PS_JS_DIR_.'jquery/jquery.scrollTo-1.4.2-min.js',
			_PS_JS_DIR_.'jquery/jquery.serialScroll-1.2.2-min.js',
			_THEME_JS_DIR_.'tools.js',
			_THEME_JS_DIR_.'product.js'));

		if (Configuration::get('PS_DISPLAY_JQZOOM') == 1)
		{
			Tools::addCSS(_PS_CSS_DIR_.'jqzoom.css', 'screen');
			Tools::addJS(_PS_JS_DIR_.'jquery/jquery.jqzoom.js');
		}
	}

}

E questo è ParentOrderCOntroller...

<?php

class ParentOrderController extends ParentOrderControllerCore
{
	public function setMedia()
	{
		parent::setMedia();

		Tools::addCSS(_THEME_CSS_DIR_.'addresses.css');
		Tools::addJS(_THEME_JS_DIR_.'tools.js');
		if ((Configuration::get('PS_ORDER_PROCESS_TYPE') == 0 AND Tools::getValue('step') == 1) OR Configuration::get('PS_ORDER_PROCESS_TYPE') == 1)
			Tools::addJS(_THEME_JS_DIR_.'order-address.js');

		if ((int)(Configuration::get('PS_BLOCK_CART_AJAX')) OR Configuration::get('PS_ORDER_PROCESS_TYPE') == 1)
		{
			Tools::addJS(_THEME_JS_DIR_.'cart-summary.js');
			Tools::addJS(_PS_JS_DIR_.'jquery/jquery-typewatch.pack.js');
		}

	}

}

Questo è tutto, potete usare questa tecnica per numerosi altri scopi, come invitare gli utenti ad iscriversi alla newsletter oppure promuovere offerte durante l'anno. Per esempio nelle pagine extra adesso è possibile sfruttare Fancybox per mettere una galleria fotografica.

Buon lavoro.

Giovedì 19 Dicembre 2013
(2 commenti)
PHP

Commento di figaro

Venerdì 21 Febbraio 2014

bello, ma anche così il visitatore può bypassare il popup chiudendolo col pulsante.
'showCloseButton': false non funziona….

Risposta di Marco

Fancybox è uscito in varie versioni, ed hanno deciso di cambiare nomi ai parametri. Quindi, bisogna controllare che release si ha, e consultare la documentazione appropriata.

Poi, oltre a questo bottone abbiamo numerose altre opzioni, per permettere o meno la chiusura al click dell'overlay, o del contenuto, dipende dal risultato che vogliamo ottenere.

Commento di Marcello

Venerdì 18 Luglio 2014

Vorrei inserire fancybox nel mio sito di prestashop 1.6.0.8: come posso fare? Ho visto che fancybox è già inerito, ma vorrei, ad esempio, che, nel momento in cui un utente si iscrive, comparisse una immagine nel centro della pagina con le varie frasi. Grazie per la disponibilità.

Risposta di Marco

Purtroppo non ho ancora guardato se nel Prestashop 1.6 tutti i file corrispondono al 1.5.

Aggiungi un commento

Nome
E-mail (non verrà pubblicata)
Sito Web
Commento