Snippets

Si chiama snippet qualsiasi frammento di codice HTML da aggiungere al sito. Vi sarà capitato spesso di aggiungere alle pagine di un sito il codice di traccimento di un motore di ricerca o il pulsante di un social network o un un meta tag per la validazione oppure ad esempio il codice per attivare una chat.

Con gli snippet è possibile eseguire queste operazioni direttamente dall'app con JavaScript senza dover intervenire per modificare le pagine HTML del template se non per aggiungere un semplice tag nella posizione dove si vuole visualizzare lo snippet.

Si hanno tre tipi di snippet, quelli Head vengono messi appena prima del tag </head>, quelli Body vengono messi appena prima del tag </body>, e quelli Tag vengono messi in un punto specifico della pagina. Per indicare il punto dove mettere gli snippet di tipo Tag si aggiunge un apposito tag nella pagina del template:

<!-- .snippet code -->

Dove code è il codice dato dall'app allo snippet. Ad esempio per uno snippet con codice Like si scriverà:

<!-- .snippet Like -->

Se l'app è pubblicata sullo Store allora il codice dello snippet deve essere preceduto dal codice dell'app. Ad esempio per una app nello Store con codice Facebook:

<!-- .snippet Facebook.Like -->

Abilitazione

Prima di poter utilizzare gli snippet bisogna abilitarli dal gestionale:

  1. Andare nel gestionale nella sezione Apps
  2. Fare clic su Gestisci Apps.
  3. Fare clic sulla riga dell'app.
  4. Selezionare la voce Aggiungere degli snippet alle pagine. Scegliendo anche la voce solo nell'anteprima non verranno visualizzati sul sito ma solo nell'anteprima del template.
  5. Fare clic su Salva.

Dopodiché aggiungere Admin SDK alle pagine HTML dell'app:

<script src="https://developers.open2b.com/admin-sdk/open2b-admin-sdk-v6.min.js"></script>

Metodi

Admin.Snippets.create(code, type, html, pages, landingPage, function(error) { … })

Crea uno snippet o sostituisce quello esistente con lo stesso codice:

Parametro Descrizione
code Codice identificativo dello snippet. Per gli snippet di tipo Tag, il codice è usato per identificare la posizione nella pagina di template dove sarà inserito.
Lungo da 1 a 32 tra lettere e numeri, soddisfa l'espressione regolare: /^[a-zA-Z][a-zA-Z0-9]{0,31}$/.
type Tipo di snippet. Può essere:
Head Viene aggiunto appena prima di </head>
Body Viene aggiunto appena prima di </body>
Tag Per le app pubblicate sullo Store viene messo al posto di <!-- .snippet app.code --> dove app e code sono rispettivamente i codici dell'app e dello snippet. Per le altre app viene messo al posto di <!-- .snippet code --> dove code è il codice dello snippet.
html Sorgente HTML dello snippet che sarà aggiunto così com'è al sito.
pages Pagine del template alle quali aggiungere lo snippet. Indicare null per aggiungerlo a tutte le pagine. Le pagine sono tutti i file con estensione ".html" che si trovano nella cartella principale del template. Vedere anche il Manuale Design per la lista di tutte le pagine comunemente presenti in un template. Non viene ritornato nessun errore se una delle pagine indicate non esiste, semplicemente non verrà aggiunto a queste pagine.
landingPage Indica se lo snippet deve essere aggiunto o meno alla landing page, ossia alla prima pagina del sito alla quale accede l'utente. Può essere:
Yes Sì, lo snippet è aggiunto anche sulla landing page.
No No, lo snippet non è aggiunto sulla landing page. Ad esempio perché lo snippet aggiunge dei cookie di traccimento nel browser e si vuole che prima l'utente possa leggere una informativa sul loro uso.
Only Lo snippet è aggiunto solo sulla landing page e non sulle successive pagine visitate dall'utente. Ad esempio perché si vuole prima mostrare un'informativa, ad esempio per limiti di età consentiti, prima di poter proseguire con la navigazione sul sito.
Se viene indicato null allora si prende Yes come valore di default.

Esempio:

Nel seguente esempio viene aggiunto uno snippet alle pagine "department.html" e "product.html" prima del tag </head>.

var html = '<style type="text/css"> h1 { color: blue; } </style>';
Admin.Snippets.create('BlueHeader', 'Head', html, [ 'department.html', 'product.html' ], 'Yes', function(error) {
	if ( error != null ) { alert(error); return; }
	// done
});

Admin.Snippets.clear(function(error) { … })

Rimuove tutti gli snippet dell'app.

Esempio:

Admin.Snippets.clear(function(error) {
	if ( error != null ) { alert(error); return; }
	// done
});

Admin.Snippets.remove(codes, function(error) { … })

Rimuove gli snippets con i codici indicati.

Esempio:

Admin.Snippets.remove([ 'BlueHeader', 'Chat' ], function(error) {
	if ( error != null ) { alert(error); return; }
	// done
});

Admin.Snippets.find(codes, function(snippets, error) { … })

Ritorna gli snippet con i codici indicati. Indicare null al posto dei codici per ritornare tutti gli snippets.

Esempio:

Admin.Snippets.get([ 'BlueHeader', 'Chat' ], function(snippets, error) {
	if ( error != null ) { alert(error); return; }
	alert('BlueHeader: '+snippets.BlueHeader);
	alert('Chat: '+snippets.Chat);
});

Limiti

Si possono aggiungere fino a 100 snippet per app. Il sorgente HTML di uno snippet può essere lungo fino a 50.000 caratteri e comunque la somma delle lunghezze dei sorgenti HTML di tutti gli snippet di una app non può superare il milione di caratteri.

`