I menù sono presenti in varie parti del gestionale e consentono all'utente di eseguire delle operazioni veloci con le app. L'utente seleziona dei prodotti ( o dei reparti o degli ordini ecc.. ) e sceglie una voce di menù corrispondente all'operazione che desidera eseguire. Viene aperta quindi una finestra di dialogo dell'app la quale riceve la lista degli elementi selezionati dall'utente e dopo una conferma esegue l'azione richiesta.
Il comando potrebbe semplicemente incrementare il prezzo delle referenze selezionate, o pubblicare i prodotti su un marketplace, oppure potrebbe ad esempio inviare i documenti di trasporto allo spedizioniere.
Prima di poter utilizzare le etichette bisogna abilitarle dal gestionale:
Dopodiché aggiungere Admin SDK alle pagine HTML dell'app:
<script src="https://open2b.dev/admin-sdk/open2b-admin-sdk-v7.2.min.js"></script>Rimuove tutte le voci di menù dell'app.
Crea una nuova voce in un menù. Se una voce con lo stesso handler è già presente allora la sostituisce. I parametri sono i seguenti:
| Parametro | Descrizione |
|---|---|
menu |
Il menù a cui aggiungere la voce. Può essere 'Products', 'Items', 'Promotions', 'NewsletterLists', 'Orders', 'Quotes', 'Invoices', 'Receipts', 'PackingSlips' e 'Customers'. |
handler |
Nome della funzione JavaScript da chiamare quando viene aperta la finestra di dialogo. Alla funzione verrà passato come unico argomento la lista degli identificatori ( per il menù 'Items' verranno passati i codici ) degli elementi selezionati. Soddisfa l'espressione regolare: /^[a-zA-Z_\$][a-zA-Z_\$0-9]{0,31}$/.
|
title |
Testo visualizzato nella voce di menù e come titolo della finestra di dialogo. |
path |
URL path della pagina da aprire come finestra di dialogo. Il path deve essere relativo al path della pagina principale dell'app, se le due pagine si trovano nella stesso path allora basta indicare il nome del file. |
width |
Larghezza in pixel della finestra di dialogo. |
height |
Altezza in pixel della finestra di dialogo. |
Nel seguente esempio viene creata una nuova voce nel menù dei prodotti (Products) con titolo "Pubblica". Quando l'utente selezionerà la voce dal menù, verrà aperta in una finestra di dialogo la pagina "publish.html" con larghezza 400 pixel e altezza 300 pixel e verrà chiamata la funzione JavaScript publish definita nella pagina. L'unico parametro della funzione sarà la lista degli identificatori dei prodotti che l'utente ha selezionato.
Admin.Menus.create('Products', 'publish', 'Pubblica', 'publish.html', 400, 300, function(error) {
if ( error != null ) { alert(error); return; }
// done
});Nella pagina "publish.html" dovrà essere presente la funzione publish:
function publish(ids) {
// ...
}Rimuove una o più voci dell'app dal menù indicato. Se handlers è null allora rimuove tutte le voci dal menù. Non ritorna errore se non ci sono voci da rimuovere.
Admin.Menus.remove('Products', [ 'publish', 'unpublish' ]); // rimuove dal menù 'Products' le voci con handler 'publish' e 'unpublish'
Admin.Menus.remove('Products', null); // rimuove tutte le voci dal menu 'Products'Ritorna tutte le voci nel menù indicato. Se menu è null allora ritorna le voci di tutti i menù.
Admin.Menus.find('Customers', function(items, error) {
if ( error != null ) { alert(error); return; }
// done
});Chiude la finestra di dialogo attualmente aperta. Se sono in esecuzione delle chiamare alle API non ancora iniziate non verranno più eseguite.
Vediamo un esempio completo su come aggungere una voce al menù dei prodotti per mettere tutti i prodotti selezionati dall'utente come visibili nel negozio.
Prima di tutto creiamo la finestra di dialogo che sarà aperta quando l'utente seleziona la voce di menù:
<!DOCTYPE html>
<html>
<head>
<title>Activate Products</title>
<script src="https://open2b.dev/admin-sdk/open2b-admin-sdk-v7.2.min.js"></script>
</head>
<body>
<script>
var remainingProducts = 0;
function closeDialogOnEnd() {
if ( --remainingProducts == 0 ) Admin.closeDialog();
}
function activateProducts(ids) {
if ( confirm('Rendere visibili sul sito i prodotti selezionati?') ) {
remainingProducts = ids.length;
for ( var i = 0; i < ids.length; i++ ) {
Admin.api('commerce.products.update', { id: ids[i], product: { isActive: true } }, closeDialogOnEnd);
}
}
}
</script>
</body>
</html>Salviamo la pagina sul server nella stessa cartella dove si trova la pagina principale dell'app, ad esempio chiamandola "activate-products.html".
Nella pagina è presente la funzione activateProducts che verrà chiamata quando l'utente seleziona la voce di menù e riceverà come parametro l'array ids degli identificatori dei prodotti che l'utente ha selezionato. La funzione richiede conferma all'utente, dopodiché per ogni prodotto chiama il metodo commerce.products.update delle API andando a mettere il prodotto visibile sul negozio.
Si noti che dobbiamo attendere che tutte le chiamate alle API si siano concluse prima di poter chiudere la finestra di dialogo, per questo manteniamo il conteggio di quanti prodotti rimangono ancora da aggiornare e chiamiamo la funzione closeDialogOnEnd al ritorno di ogni chiamata delle API. Questa funzione decrementa il conteggio e chiude la finestra di dialogo quando il conteggio arriva a zero.
A questo punto creiamo la pagina principale dell'app, o modifichiamo quella esistente, la quale andrà ad aggiungere la voce al menù.
<!DOCTYPE html>
<html>
<head>
<title>Activate Products</title>
<script src="https://open2b.dev/admin-sdk/open2b-admin-sdk-v7.2.min.js"></script>
</head>
<body>
<script>
Admin.Menus.create('Products', 'activateProducts', 'Visualizza sul negozio', 'activate-products.html', 400, 300, function(error) {
if ( error != null ) { alert(error); return; }
});
</script>
</body>
</html>Quando si aprirà l'app dal gestionale verrà aggiunta la voce al menù dei prodotti. In seguito andando nel gestionale in Catalogo > Prodotti, nel menù apps sarà presente la nuova voce appena creata.