PERSONALIZZARE I WIDGET OVERPLACE
Personalizzare i widget Overplace è un operazione semplice e veloce che richiede basilare conscenze di codice html e css. Segui la procedura descritta per personalizzare i moduli Overplace all’interno del tuo sito.
Se il tuo sito è basato sul cms WordPress, è disponibile un plugin dedicato che ti consentirà di installare sul tuo sito un comodo editor per la personalizzazione dei widget direttamente dal pannello di amministrazione di WordPress. Clicca sul link sottostante per scaricare il pacchetto.
Plugin Overplace Widget (1842)GENERA IL CODICE DA INSERIRE
Ottieni gli snippet di codice da includere nel codice html delle tue pagine web attraverso l’apposito tool.
CREA UN FOGLIO DI STILE CSS
Crea il tuo file css e mettilo online, il foglio di stile deve essere raggiungibile da un url pubblica.
MODIFICA IL TUO SNIPPET DI CODICE
Prendi il codice generato al primo step e modificalo inserendo un commento tra i tag di apertura e chiusura del div, come mostrato di seguito a titolo esemplificativo.
|
1 2 3 4 5 |
<!-- Ricorda di includere all'interno del documento html il richiamo al javascript Overplace --> <div id="ovp_lista_orari_servizi" ovp_id="AA00"><!-- http://www.miosito.com/custom_style.css --></div> <!-- Sostituisci il parametro ovp_id con il codice vetrina reperibile dalla sezione QR Code all'interno della tua area riservata Overplace --> |
IMPOSTAZIONI DI VISUALIZZAZIONE
E’possibile modificare anche alcuni parametri relativi alla renderizzazione dei diversi widget, tali impostazioni devono essere inserite all’interno del tag body della pagina sotto forma di un semplicissimo oggetto javascript. Qui sotto trovate un esempio commentato di questo json di configurazione.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
<script type="text/javascript"> var ovp_widget_configuration = { ovp_lista_promozioni : { "titolo":"Promozioni", //titolo del modulo <string> "descrizione":"Usufruisci della nostra promozione", //descrizione del modulo <string> "powered":"1" //visualizzazione del badge Overplace("1" o "0") }, ovp_lista_eventi : { "titolo":"Eventi", //titolo del modulo <string> "descrizione":"Ho organizzato i seguenti eventi, partecipa!", //descrizione del modulo <string> "powered":"1", //visualizzazione del badge Overplace("1" o "0") "immagine":"1", //visualizzazione immagine evento("1" o "0") "data":"1", //visualizzazione date evento("1" o "0") "lunghezza_testo":"" //tronca il testo dopo n caratteri <int>, vuoto per escludere truncate }, ovp_lista_orari_servizi : { "titolo":"Orari e servizi offerti", //titolo del modulo <string> "descrizione":"Orari di apertura e informazioni generali", //descrizione del modulo <string> "pagamenti":"1", //visualizzazione blocco pagamenti accettati("1" o "0") "powered":"1", //visualizzazione del badge Overplace("1" o "0") "orari":"1", //visualizzazione blocco orari di apertura("1" o "0") "servizi":"1" //visualizzazione blocco servizi offerti("1" o "0") }, ovp_lista_news : { "titolo":"News", //titolo del modulo <string> "descrizione":"Elenco delle ultime notizie", //descrizione del modulo <string> "lunghezza_testo":"", //tronca il testo dopo n caratteri <int>, vuoto per escludere truncate "powered":"1", //visualizzazione del badge Overplace("1" o "0") "immagine":"1" //visualizzazione immagine news("1" o "0") }, ovp_lista_news_carousel : { "titolo":"News", //titolo del modulo <string> "descrizione":"Elenco delle ultime notizie", //descrizione del modulo <string> "lunghezza_testo":"", //tronca il testo dopo n caratteri <int>, vuoto per escludere truncate "powered":"1", //visualizzazione del badge Overplace("1" o "0") "immagine":"1", //visualizzazione immagine news("1" o "0") "data": "1", //visualizzazione data pubblicazione news ("1" o "0") "number": "6" //numero di news da visualizzare <int> ("0" per visualizzare tutte le news), "fancybox": "0" //Abilita la fancybox sull'immagine che si trova nel dettaglio della news ("1" o "0") }, //lista commenti + scrivi recensione ovp_lista_commenti : { "titolo":"Dicono di Noi", //titolo del modulo <string> "descrizione":"Elenco delle nostre recensioni", //descrizione del modulo <string> "data_commento":"1", //mostra la data del commento("1" o "0") "voto_commento":"1", //mostra la valutazione del commento("1" o "0") "powered":"1" //visualizzazione del badge Overplace("1" o "0") }, //lista commenti paginata ovp_lista_lista_commenti : { "titolo":"Dicono di Noi", //titolo del modulo <string> "descrizione":"Elenco delle nostre recensioni", //descrizione del modulo <string> "data_commento":"1", //mostra la data del commento("1" o "0") "voto_commento":"1", //mostra la valutazione del commento("1" o "0") "powered":"1" //visualizzazione del badge Overplace("1" o "0") }, //scrivi recensione ovp_lista_scrivi_recensioni : { "titolo":"Scrivi un commento", //titolo del modulo <string> "descrizione":"Lascia un breve commento con le tue personali impressioni", //descrizione del modulo <string> "powered":"1" //visualizzazione del badge Overplace("1" o "0") }, ovp_lista_coupon : { "titolo":"Coupon", //titolo del modulo <string> "descrizione":"Aggiudicati le nostre offerte shock!", //descrizione del modulo <string> "powered":"1", //visualizzazione del badge Overplace("1" o "0") "immagine":"1" //visualizzazione immagine coupon("1" o "0") }, ovp_lista_prenotazioni : { "titolo":"Prenotazioni", //titolo del modulo <string> "powered":"1" //visualizzazione del badge Overplace("1" o "0") }, ovp_lista_prenotazioni_hotel : { "titolo":"Prenotazioni Hotel", //titolo del modulo <string> "powered":"1", //visualizzazione del badge Overplace("1" o "0") "immagine":"1" //visualizzazione immagini camere("1" o "0") }, ovp_lista_ricetta : { "titolo":"Ricetta", //titolo del modulo <string> "powered":"1", //visualizzazione del badge Overplace("1" o "0") }, ovp_lista_menu : { "powered":"1", //visualizzazione del badge Overplace("1" o "0") }, ovp_lista_storytelling : { "titolo":"Storytelling", //titolo del modulo <string> "powered":"1", //visualizzazione del badge Overplace("1" o "0") }, ovp_lista_catalogo : { "titolo":"Catalogo", //titolo del modulo <string> "powered":"1", //visualizzazione del badge Overplace("1" o "0") }, ovp_lista_jumbotron : { "min_height":"400", //altezza minima in pixel <int> "max_height":"600" //altezza massima in pixel <int> }, ovp_lista_gallery : { "titolo":"Galleria fotografica", //titolo del modulo <string> "descrizione":"", //descrizione del modulo <string> "powered":"1", //visualizzazione del badge Overplace("1" o "0") "type":"vetrina", //tipologia di galleria ("vetrina", "prenotazione", "hotel", "menu", "catalogo", "ricetta", "storytelling") "thumbnails":"xl", //dimensione delle thumbnails, impostare a 0 se si desidera la thumbnails a dimensioni naturali ("xl", "lg", "md", "sm", "xs", "0") "number":"0", //numero massimo di immagini da mostrare, impostare 0 se non si vuole nessun limite <int> "carousel_desktop":"1", //utilizza la gallery carousel in versione desktop, altrimenti utilizza la griglia ("1" o "0") "carousel_mobile":"1" //utilizza la gallery carousel in versione mobile, altrimenti utilizza la griglia ("1" o "0") }, ovp_lista_meteo : { "titolo":"", //titolo del modulo <string> "descrizione":"", //descrizione del modulo <string> "powered":"1", //visualizzazione del badge Overplace("1" o "0") "codice_istat":"" //specificare codice istat del comune se diverso da quello della vetrina <int> }, ovp_lista_contatta_attivita : { "titolo":"Contattaci", //titolo del modulo <string> "descrizione":"Contattaci per richiedere qualunque <strong>informazione</strong>, per un <strong>preventivo</strong> o per inviare il tuo <strong>curriculum</strong>.", //descrizione del modulo <string> "powered":"1" //visualizzazione del badge Overplace("1" o "0") } }; </script> |
Problemi di compatibilità
Soltanto qualora si riscontrassero problemi di compatibilità relativi a conflitti javascript o relativi alla versione di jQuery, è possibile copiare lo script non compresso e non ottimizzato che renderizza i widgets e personalizzarlo in modo da renderlo compatibile con il proprio layout. Naturalmente, una volta effettuate le personalizzazioni, il file js andrà ospitato sui propri server. Lo script è disponibile al seguente indirizzo :