Growish Widget: Collette

< Torna indietro

 
 
 
 
 
 

ecom demo
open demo

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'
    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



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.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

Finalmente per permettere al utente di controllare le sue collette o di creare una nuova senza prodotto basta fare cosi:


        <a href="#" class="growish-user">Le tue collette!</a>
        <a href="#" class="growish-empty-wallet">Nuova Colletta</a>
    

Che risulta in:

Le tue collette!
Nuova Colletta



Logout!