open demo

Permetti ai tuoi utenti di crera una colletta libera, senza prodotto o obiettivo di raccolta.



Step 1. Caricare le dipendenze

NB: Il widget di Growish richiede Jquery

CSS

https://s3-eu-west-1.amazonaws.com/growish-widget/growish-button.css

JS

https://s3-eu-west-1.amazonaws.com/growish-widget/growish-widget.js

Succesivamente, va inizializzato il widget indicando la configurazione fornita da Growish in fase di convenzionamento.

Esempio inizializzazione Widget

growish.load({
    key: 'quimammedev',
    logo: {
        url: 'http://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150',
        width: 240, //MAX 240PX
        height: 45 //MAX 45PX
    },
    userWalletsAccessClass: 'growish-user',
    emptyWalletClass: 'growish-empty-wallet'
    logoutClass: 'growish-logout',
    expirationDate: '2017-01-31',
    walletDone: function(walletUrl) { ... }
});

key: Codice che identifica al partner per usare chiamate API di Growish

logo: Array che contiene informazione sul logo del partner, si consiglia usare un'immagine rettangolare wide.

userWalletsAccessClass: Il nome della classe che il partner vuole venga usata per il bottone "Mostra le collette del utente"

emptyWalletClass: Il nome della classe che il partner vuole venga usata per il bottone "Crea colletta Vuota"

weddingWalletClass: Il nome della classe che il partner vuole venga usata per il bottone "Crea nuova lista nozze"

userListWalletsAccessClass: Il nome della classe che il partner vuole venga usata per il bottone "Le tue liste nozze"

debug: True per mostrare informazione di debug, deve essere omesso o messo in false in produzione

Il parametro buttonTxt può essere fornito per cambiare la frase del bottone, default: "Fattelo regalare!"

Il parametro expirationDate può essere usato per indicare una data di scadenza della colletta non superiore a 3 mesi dalla data corrente (formato: YYYY-MM-DD)

Il parametro walletDone può esses usato per definire una callback che viene lanciata dopo la creazione della colletta; la funzione riceve l'url della colletta come parametro



Step 2. Caricare il bottone Growish nella pagina

Una volta che le dipendenze sono pronte, basta aggiungere la classe "growish-empty-wallet" a qualunque elemento html si desideri usare per lanciare la colletta. Provami: Nuova Colletta

Basta, abbiamo finito :)


Bottoni complementari

Qualunque link con la classe "growish-user" risulta in: Le tue collette, e permette al utente di controllare le sue collette

Qualunque link con la classe "growish-login" risulta in: , e permette al utente di fare login

Qualunque link con la classe "growish-logout" risulta in: Logout, e permette al utente di fare logout.





ecom demo

Permetti ai tuoi utenti di crera una colletta a fronte di un prodotto.



Step 1. Caricare le dipendenze

NB: Il widget di Growish richiede Jquery

CSS

https://s3-eu-west-1.amazonaws.com/growish-widget/growish-button.css

JS

https://s3-eu-west-1.amazonaws.com/growish-widget/growish-widget.js

Succesivamente, va inizializzato il widget indicando la configurazione fornita da Growish in fase di convenzionamento.

Esempio inizializzazione Widget

growish.load({
    key: 'quimammedev',
    logo: {
        url: 'http://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150',
        width: 240, //MAX 240PX
        height: 45 //MAX 45PX
    },
    userWalletsAccessClass: 'growish-user',
    emptyWalletClass: 'growish-empty-wallet'
    logoutClass: 'growish-logout',
    expirationDate: '2017-01-31',
    walletDone: function(walletUrl) { ... }
});

key: Codice che identifica al partner per usare chiamate API di Growish

logo: Array che contiene informazione sul logo del partner, si consiglia usare un'immagine rettangolare wide.

userWalletsAccessClass: Il nome della classe che il partner vuole venga usata per il bottone "Mostra le collette del utente"

emptyWalletClass: Il nome della classe che il partner vuole venga usata per il bottone "Crea colletta Vuota"

weddingWalletClass: Il nome della classe che il partner vuole venga usata per il bottone "Crea nuova lista nozze"

userListWalletsAccessClass: Il nome della classe che il partner vuole venga usata per il bottone "Le tue liste nozze"

debug: True per mostrare informazione di debug, deve essere omesso o messo in false in produzione

Il parametro buttonTxt può essere fornito per cambiare la frase del bottone, default: "Fattelo regalare!"

Il parametro expirationDate può essere usato per indicare una data di scadenza della colletta non superiore a 3 mesi dalla data corrente (formato: YYYY-MM-DD)

Il parametro walletDone può esses usato per definire una callback che viene lanciata dopo la creazione della colletta; la funzione riceve l'url della colletta come parametro



Step 2. Caricare il bottone Growish nella pagina prodotto

Questo viene piazzato nelle pagine prodotto, il codice del widget renderizza il bottone in un div scelto dal partner.

        <div style="width: 250px" class="growish-button-demo-class"></div>
    

Viene inizializzato con il seguente codice:

        growish.setButton({
            className: 'growish-button-demo-class',
            code: '123ss123',
            name: "BUDDY - SDRAIETTA DA BAGNO",
            price: 21165,
            description: 'BUDDY sdraietta per bagnetto ...',
            image: 'http://media.quimammeshop.it/ca...',
            link: 'http://www.quimammeshop.it/bu...'
        });
    

className: Classe del div dove verrà piazzato il bottone

code: Il codice interno del prodotto con il quale può essere identificato univocamente

name: Il nome del prodotto come mostrato in pagina prodotto

price: Il prezzo del prodotto in eurocents

description: La meta descrizione del prodotto (no html)

image: La url della imagine principale del prodotto

link: Il link della pagina prodotto



Questo genera il bottone:


I dati del bottone si possono aggiornare dopo che la pagine è stata caricata usando il comando updateButton, se ad esempio cambia il prezzo del prodotto:


        growish.updateButton({
           price: 20000 //NEW PRICE
        });
    

Bottoni complementari

Qualunque link con la classe "growish-user" risulta in: Le tue collette, e permette al utente di controllare le sue collette

Qualunque link con la classe "growish-login" risulta in: , e permette al utente di fare login

Qualunque link con la classe "growish-logout" risulta in: Logout, e permette al utente di fare logout.