- Software e-commerce Prestashop
- Cosa è un modulo Prestashop?
- Come si crea un banner Gdpr per Prestashop?
- Come creare il popup in jquery
- Procedura per inserire il codice cookies consent
- Dove richiamare la libreria javascript dei cookies
- Il popup in azione
Software e-commerce Prestashop
La maggior parte dei moduli per Prestashop sono a pagamento ed alcuni con prezzi proibitivi, ma esistono soluzioni gratuite messe a disposizione dalle più disparate software house che volteggiano attorno a questo potente strumento di vendita online, che ricordiamo essere un software gratuito liberamente scaricabile dal sito ufficiale Scaricare Prestashop, mentre una versione demo la si può vedere su demo negozio e-commerce con Prestashop
L'installazione di Prestashop è relativamente semplice, ovviamente è necessario aver accesso ad un server sul quale poter installare il software, altrimenti è possibile utilizzare spazi condivisi web hosting con database e pannello di controllo per installare i vari software messi a disposizione gratuitamente.
In ogni caso dopo aver installato l'e-commerce noterete che il sistema viene provvisto solo di alcuni moduli nativi necessari per il funzionamento standard del negozio e da alcuni moduli scaricabili gratuitamente dal catalogo presente anche all'interno del pannello di controllo prestashop.
Cosa è un modulo Prestashop?
Come detto prima, prestashop è un sistema gratuito open source sviluppato per creare siti di e-commerce, potente e configurabile liberamente (o almeno per gli esperti addetti ai lavori), l'unico neo è quello che per gestire molti aspetti della vendita online, vedi ad esempio il sistema delivery con tracciamento della spedizione, Pixel Facebook,ecc, è necessario acquistare un modulo sviluppato da terzi e venduto sulla piattaforma Addons Marketplace di prestashop.
Esistono molte software house che commercializzano i loro ottimi moduli fuori dal Marketplace, ma il suggerimento è quello di utilizzare i canali ufficiali per gli acquisti sopratutto per l'assistenza, va ricordato che il rimborso dell'acquisto viene quasi sempre negato per ovvi motivi, quindi è sempre meglio verificare che il modulo da acquistare risponda alle caratteristiche della versione di Pretashop installato, inoltre è sempre possibile visionare in tempo reale il funzionamento sia lato front-end che back-office del modulo direttamente nell'area di vendita dello sviluppatore
Come si crea un banner Gdpr per Prestashop?
Prima di proseguire è bene sapere che creare o modificare il codice di Prestashop non è molto semplice e non alla portata di tutti, pertanto mi limiterò a spiegare come modificare i file che interagiscono con il sistema senza addentrarci nella programmazione di moduli o altro, in questo caso modificare i file header ed altri presenti nella root del tema di prestashop.
Come la maggior parte dei cms ad esempio Worpress, anche prestashop dispone di una vasta gamma, sempre in aumento, di temi (non gratis) installabili in base alle esigenze, vedi qui il marketplace di temi di prestashop e localizzare tali file non è sempre intuitivo, ma analizziamo quelli che occorrono a noi per creare un popup GDPR privacy, innanzitutto accediamo alla root del nostro sito ad esempio tramite FileZilla e andiamo ad individuare la cartella dove è memorizzato il nostro tema prestashop in questo caso quello Classic che è quello di default installato e visibile ad ogni installazione ex novo di prestashop.
Una volta individuata la cartella themes clicchiamoci sopra per aprire le altre cartelle fino a quella chiamata _partial e visualizzare cosi quelle che ci interessano, javascript.tpl e head.tpl.
Non spiegheremo del perchè di questa estensione TPL ci basti sapere che all'interno di questi file sono scritti ne più e ne meno che il classico dom e html, nel caso del file head.tpl troviamo i tag Meta, Title e il tag Head, oltre ad altri parametri dentro delle parentesi graffe che in questo caso non utilizzeremo.
Come creare il popup in jquery
Ora che abbiamo individuato i nostri file da modificare passiamo ad elencare cosa ci serve per far apparire il popup con la ormai sempre presente dicitura sulla privacy e il suo pulsante di accettazione, e sono:
- coockieprivacy.css
- coockie_Jquery.js
- Script da inserire tra i tag Head del file head.tpl
In questa articolo utilizzeremo una versione un po ridotta e senza controlli sulle preferenze dei cookies, ma è possibile utilizzare quella integrale prelevandola da jQuery Cookie Consent
Procedura per inserire il codice cookies consent
Apriamo il nostro file head.tpl con un editor e inseriamo il codice per richiamare la libreria jquery, il codice coockie consent e il codice javascript per il popup privacy:
{block name='head_charset'}
<meta charset="utf-8">
{/block}
{block name='head_ie_compatibility'}
<meta http-equiv="x-ua-compatible" content="ie=edge">
{/block}
{block name='head_seo'}
<title>{block name='head_seo_title'}{$page.meta.title}{/block}</title>
<meta name="description" content="{block name='head_seo_description'}{$page.meta.description}{/block}">
<meta name="keywords" content="{block name='head_seo_keywords'}{$page.meta.keywords}{/block}">
{if $page.meta.robots !== 'index'}
<meta name="robots" content="{$page.meta.robots}">
{/if}
{if $page.canonical}
<link rel="canonical" href="{$page.canonical}">
{/if}
{block name='head_hreflang'}
{foreach from=$urls.alternative_langs item=pageUrl key=code}
<link rel="alternate" href="{$pageUrl}" hreflang="{$code}">
{/foreach}
{/block}
{/block}
{block name='head_viewport'}
<meta name="viewport" content="width=device-width, initial-scale=1">
{/block}
{block name='head_icons'}
<link rel="icon" type="image/vnd.microsoft.icon" href="{$shop.favicon}?{$shop.favicon_update_time}">
<link rel="shortcut icon" type="image/x-icon" href="{$shop.favicon}?{$shop.favicon_update_time}">
<link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!---INIZIO SCRIPT GDPR----------------------------------------------------------------------->
<link rel="stylesheet" href="css/coockieprivacy.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var options = {
title: 'INFORMAZIONI SUI COOKIE',
message: 'I cookies sono composti da ...........',
delay: 600,
expires: 1,
link: 'privacy.html',
onAccept: function(){
var myPreferences = $.fn.ihavecookies.cookie();
},
uncheckBoxes: true,
acceptBtnLabel: 'Accettare i cookie',
moreInfoLabel: 'Informazioni',
cookieTypesTitle: 'Select which cookies you want to accept',
fixedCookieTypeLabel: 'Essential',
fixedCookieTypeDesc: 'These are essential for the website to work correctly.'
}
$(document).ready(function() {
$('body').ihavecookies(options);
if ($.fn.ihavecookies.preference('marketing') === true) {
}
$('#ihavecookiesBtn').on('click', function(){
$('body').ihavecookies(options, 'reinit');
});
});
</script>
<!---------FINE SCRIPT GDPR--------------------------------------------------------------------->
{/block}
{block name='stylesheets'}
{include file="_partials/stylesheets.tpl" stylesheets=$stylesheets}
{/block}
{block name='javascript_head'}
{include file="_partials/javascript.tpl" javascript=$javascript.head vars=$js_custom_vars}
{/block}
{block name='hook_header'}
{$HOOK_HEADER nofilter}
{/block}
{block name='hook_extra'}{/block}
Dentro il file head.tpl vedrete numerosi richiami di blocchi di codice racchiusi all'interno delle parentesi graffe, questi non vanno alterati altrimenti si comprometterebbe l'intero sito, per meglio comprendere il sistema di gestione del template e layout di prestashop e possibile leggere Motore di modelli Smarty 3 e templates e layouts Prestashop.
Il codice necessario per poter visualizzare il popup Cookie privacy viene inserito all'interno del blocco
{block name='head_icons'} .... {/block}
essendo un blocco di richiamo relativo alle icone del sito come la favicon ed altri quindi un blocco sempre presente in ogni pagine del sito con la certezza quindi di aver sempre attivo il nostro popup qualora l'utente acceda al sito anche da pagine diverse dalla home del sito.
All'interno di questo blocco andremo ad inserire il javascript per richiamare la libreria jquery e il foglio di stile del nostro popup:
<link rel="stylesheet" href="css/coockieprivacy.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
seguito a ruota dal codice che genererà il popup con il pulsante di accettazione privacy:
<script>
var options = {
title: 'INFORMAZIONI SUI COOKIE',
message: 'I cookies sono composti ecc ecc ',
delay: 600,
expires: 1,
link: 'privacy.html',
onAccept: function(){
var myPreferences = $.fn.ihavecookies.cookie();
},
uncheckBoxes: true,
acceptBtnLabel: 'Accetta i cookie',
moreInfoLabel: 'Informazioni',
cookieTypesTitle: 'Select which cookies you want to accept',
fixedCookieTypeLabel: 'Essential',
fixedCookieTypeDesc: 'These are essential for the website to work correctly.'
}
$(document).ready(function() {
$('body').ihavecookies(options);
if ($.fn.ihavecookies.preference('marketing') === true) {
}
$('#ihavecookiesBtn').on('click', function(){
$('body').ihavecookies(options, 'reinit');
});
});
</script>
Il tutto racchiuso come già detto all'interno del blocco {block name='head_icons'} .... {/block}
Dove richiamare la libreria javascript dei cookies
Ora non ci rimane altro che richiamare lo script coockie_Jquery.js ma questa volta dentro il file javascript.tpl, in questo modo verrà automaticamente aggiunto dentro i tag head di ogni pagina del nostro sito:
{foreach $javascript.external as $js}
<script type="text/javascript" src="{$js.uri}" {$js.attribute}></script>
{/foreach}
{foreach $javascript.inline as $js}
<script type="text/javascript">
{$js.content nofilter}
</script>
{/foreach}
{if isset($vars) && $vars|@count}
<script type="text/javascript">
{foreach from=$vars key=var_name item=var_value}
var {$var_name} = {$var_value|json_encode nofilter};
{/foreach}
</script>
{/if}
<!----------POPUP PRIVACY--------------------------------------->
<script src="/js/coockie_Jquery.js"></script>
<!------------------------------------------------------------->
Lo script deve essere inserito fuori da ogni blocco {...} in maniera tale che sia sempre richiamato, come detto, dentro ogni tag HEAD di ogni pagina del sito.
Prima di effettuare ogni modifica si consiglia di fare sempre il backup dei file originali che andrete a modificare o ancora meglio dell'intera root del sito, leggere anche come effettuare il backup di Prestashop dal pannello di controllo Plesk del vostro server.
Perfetto, abbiamo fatto le modifiche e sostituito i file originali con le nostre modifiche, ora non ci resta altro che testare il nostro popop cookie consent sul sito per scoprire che agendo sul pulsante di accettazione, automaticamente ci verranno memorizzati i cookie del consenso dentro il nostro pc.
Per tener traccia e visualizzare i cookie è possibile installare l'estensione EditThisCookie per Chrome cosi da poterli eliminare e testare nuovamente il sito.
Il popup in azione
Anche la grafica del popup ovviamente può essere modificata agendo sul foglio di stile coockieprivacy.css cosi come la possibilità di intercettare il click del pulsante per inviare i dati come data, ip, e altri valori al nostro ipotetico database, tramite una funzione ajax.
Questo sistema ovviamente deve essere migliorato ma di base risponde pienamente alle direttive della privacy per informare l'utente su come intendere trattare i suoi dati all'interno del vostro sito... non dimentichiamoci di collegare una pagina dedicata alla privacy dove far approdare i nostri utenti.