Passa ai contenuti principali

chrome app - applicazione delle opzioni

abbiamo creato l'estensione di chrome come pupup e abbiamo creato la pagina delle opzioni di configurazione.
ora applichiamo la configurazione alla popup.

flusso

il flusso è semplice: 
  • l'utente fa click sull'estensione
  • l'estensione legge i dati del colore
  • il colore è applicato al background dell'estensione

codice

al codice della pop-up aggiungiamo le librerie jQuery e Storage API e Bootstrap
<!doctype html>
<html>

<head>
    <title>Ciao ragazzi!</title>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/jQuery-Storage-API/jquery.storageapi.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>

<body style="padding: 30px">
    <div class="container">
        <div class="row">
            <div class="span4 offset2 well">
                <h1>hello world!</h1>
            </div>
        </div>
    </div>
    <script src="popup.js"></script>
</body>

</html>
nel file popup.js è stata aggiunta la lettura della configurazione e l'applicazione del colore alla popup

$(document).ready(function() {

    var storage = $.localStorage;

    if (storage.isSet('color')) {

        var color = storage.get('color')
        $('body').css('background', color);
    }

});

più semplice di così
e ora potete scaricare l'esempio completo da github

comunque non è finita qui...... 

Post popolari in questo blog

install language on osTicket

this simple guide aims you to install and configure your language on osTicket i written this guide based on forum post http://osticket.com/forum/discussion/76252/installing-language-pack

Creare un ambiente di sviluppo PHP SYMFONY MYSQL DOCKER

Preferisco Docker a Vagrant, più leggero. Ognuno naturalmente ha le sue preferenze.
Docker lo trovo più facile e veloce da configurare.
Non conosci Docker, vai sul sito e scoprirai un tool fantastico per "virtualizzare" le macchine, anche se non è il termine corretto.
Docker crea un contenitore all'interno del tu S.O. senza però virtualizzare l'infrastruttura hardware.
A me piace sviluppare con Symfony: W Symfony2!

[update: ho trovato questa serie di post nuovi per lo sviluppo con symfony su docker
https://blog.vandenbrand.org/2016/02/03/developing-symfony-applications-with-docker-series-part-i-getting-started/
]

Setup Google Tag Manager con PrestaShop per l'e-commerce avanzato

Google Tag Manage e E-commerce Avanzato all’interno della documentazione ufficiale è descritto sia il processo che il codice di implementazione per il monitoraggio avanzato dell’e-commerce
In breve il codice da inserire deve essere un array tipo dataLayer che contiene una serie di informazioni per il monitoraggio di:
impressioni di prodotto e di categoriadettaglio di prodottocheckoutacquisto Sono presenti anche i meccanismi per il monitoraggio delle promozioni, per l’annullamento ordine e per l’aggiunta dinamica del prodotto in carrello
Nel caso del modulo BwAnalytics sono monitorati i primi 4.
Google Tag Manager L’attivazione dell’ecommerce avanzato si effettua sulla vista di Google Analytics e si impostano i nomi degli step del processo di checout mappati all’interno del codice
Limpostazione di Google Tag Manager per l’e-commerce avanzato richiede la greazione di 3 tag:
impressioni e dattagli categoria e prodottocheckout acquisto pagine prestashop coinvolte Su prestashop le pagine di…