Step 1. Caricare il widget
Sono necessari i seguenti file oltre jQuery:
Si carica il 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'
});
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.
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"
Il parametro buttonTxt può essere fornito per cambiare la frase del bottone, default: "Fattelo regalare!"
Step2. 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.setWeddingButton({
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
Finalmente per permettere al utente di controllare le sue liste nozze o di creare una nuova basta fare cosi:
<a href="#" class="growish-wedding-wallet">Nuova Lista Nozze</a>
<a href="#" class="growish-wedding-list-wallet">Le tue Liste Nozze</a>
<a href="#" class="growish-wedding-login">Login</a>
<a href="#" class="growish-wedding-logout">Logout!</a>
Che risulta in:
Nuova Lista Nozze
Le tue Liste Nozze
Login
Logout!