Telefono: +39 392 33 73 731
Email: info@zod.it
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:
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.
Nel 2018 ho scelto Serverplan, leggi l'articolo "La mia esperienza con gli hosting" per conoscere la mia opinione sui servizi e le prestazioni di alcuni famosi provider italiani.
Commento di figaro
Venerdì 21 Febbraio 2014bello, 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 2014Vorrei 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