Come creare collette da una landing page o da una pagina prodotto
Permetti ai tuoi utenti di crera una colletta libera, senza prodotto o obiettivo di raccolta.
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
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 :)
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: Login, e permette al utente di fare login
Qualunque link con la classe "growish-logout" risulta in: Logout, e permette al utente di fare logout.
Permetti ai tuoi utenti di crera una colletta a fronte di un prodotto.
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
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 });
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: Login, e permette al utente di fare login
Qualunque link con la classe "growish-logout" risulta in: Logout, e permette al utente di fare logout.