EN IT
Open2b version 7.8

Menus

Menus are available in various parts of the back office and allow users to perform quick actions with apps. The user selects products (or departments, orders, etc.) and chooses a menu item corresponding to the operation they want to perform. A dialog window of the app opens, receives the list of elements selected by the user, and after confirmation performs the requested action.

The command could simply increase the price of selected items, publish products to a marketplace, or for example send packing slips to the shipping provider.

Enable

Before using menus you must enable them in the back office:

  1. Go to the back office in the Apps section
  2. Click Manage Apps.
  3. Click the row for the app.
  4. Select Add entries to back-office menus.
  5. Click Save.

Then add Admin SDK to the app HTML pages:

<script src="https://open2b.dev/admin-sdk/open2b-admin-sdk-v7.8.min.js"></script>

Methods

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

Removes all app menu entries.

Admin.Menus.create(menu, handler, title, path, width, height, function(error) { … })

Creates a new menu entry. If an entry with the same handler already exists, it is replaced. Parameters:

Parameter Description
menu The menu to add the entry to. It can be 'Products', 'Items', 'Promotions', 'NewsletterLists', 'Orders', 'Quotes', 'Invoices', 'Receipts', 'PackingSlips' and 'Customers'.
handler Name of the JavaScript function to call when the dialog window is opened. The function will receive as its only argument the list of identifiers (for the 'Items' menu, codes are passed) of the selected elements. Must satisfy: /^[a-zA-Z_\$][a-zA-Z_\$0-9]{0,31}$/.
title Text displayed in the menu entry and as the dialog title.
path URL path of the page to open as a dialog. The path must be relative to the main app page path; if the two pages are in the same path, just specify the file name.
width Dialog width in pixels.
height Dialog height in pixels.

Example:

In the following example a new entry is created in the Products menu (Products) with title "Publish". When the user selects the item from the menu, the "publish.html" page opens in a dialog with width 400 pixels and height 300 pixels and calls the JavaScript function publish defined on the page. The only parameter of the function will be the list of product identifiers selected by the user.

Admin.Menus.create('Products', 'publish', 'Publish', 'publish.html', 400, 300, function(error) {
    if ( error != null ) { alert(error); return; }
    // done
});

The "publish.html" page must include the publish function:

function publish(ids) {
    // ...
}

Admin.Menus.remove(menu, handlers, function(error) { … })

Removes one or more app entries from the specified menu. If handlers is null, it removes all entries from the menu. It returns no error if there are no entries to remove.

Admin.Menus.remove('Products', [ 'publish', 'unpublish' ]); // removes entries with handlers 'publish' and 'unpublish' from the 'Products' menu
Admin.Menus.remove('Products', null); // removes all entries from the 'Products' menu

Admin.Menus.find(menu, function(items, error) { … })

Returns all entries in the specified menu. If menu is null, it returns entries from all menus.

Example:

Admin.Menus.find('Customers', function(items, error) {
    if ( error != null ) { alert(error); return; }
    // done
});

Admin.closeDialog()

Closes the currently open dialog window. If there are API calls in progress that have not yet started, they will no longer run.

Full example

Let's see a full example of how to add a menu entry for products to set all selected products as visible in the store.

First we create the dialog window that opens when the user selects the menu entry:

<!DOCTYPE html>
<html>
<head>
    <title>Activate Products</title>
    <script src="https://open2b.dev/admin-sdk/open2b-admin-sdk-v7.8.min.js"></script>
</head>
<body>

<script>

    var remainingProducts = 0;

    function closeDialogOnEnd() {
        if ( --remainingProducts == 0 ) Admin.closeDialog();
    }

    function activateProducts(ids) {
    if ( confirm('Make the selected products visible on the site?') ) {
        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>

Save the page on the server in the same folder as the main app page, for example naming it "activate-products.html".

The page contains the activateProducts function which will be called when the user selects the menu entry and will receive as parameter the ids array of product identifiers selected by the user. The function asks the user for confirmation, then for each product it calls the commerce.products.update API method to make the product visible in the store.

Note that we must wait for all API calls to finish before closing the dialog; for this reason we keep a count of how many products remain to be updated and call the closeDialogOnEnd function after each API call. This function decrements the count and closes the dialog when the count reaches zero.

At this point create the main app page, or modify the existing one, which will add the menu entry.

<!DOCTYPE html>
<html>
<head>
    <title>Activate Products</title>
    <script src="https://open2b.dev/admin-sdk/open2b-admin-sdk-v7.8.min.js"></script>
</head>
<body>

<script>

    Admin.Menus.create('Products', 'activateProducts', 'Show on store', 'activate-products.html', 400, 300, function(error) {
        if ( error != null ) { alert(error); return; }
    });

</script>

</body>
</html>

When the app is opened from the back office, the entry will be added to the Products menu. Later, in the back office under Catalog > Products, the Apps menu will contain the newly created entry.