Open2b version 7.8

Snippets

A snippet is any piece of HTML code to add to the site. You have likely often added to site pages the tracking code of a search engine, a social network button, a validation meta tag, or code to activate a chat.

With snippets you can perform these operations directly from the app with JavaScript without modifying the HTML template pages, except for adding a simple tag in the position where you want the snippet to appear.

Enable

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

Go to the back office in the Apps section
Click Manage Apps.
Click the row for the app.
Select Add snippets to pages. If you also choose only in preview, they will not be shown on the site but only in the template preview.
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.Snippets.create(code, position, content, templateFiles, function(error) { … })

Creates a snippet or replaces an existing one with the same code:

Parameter Description

code Snippet identifier code. It can be 1 to 32 characters long, letters and numbers, and must match: /^[a-zA-Z][a-zA-Z0-9]{0,31}$/.

position

Snippet position in pages. It can be:

Head Inserted just before </head>

Body Inserted just before </body>

Any

Can be placed anywhere in the page using the snippet function:

{{ snippet(code) }}

Where code is the snippet code you want to display:

{{ snippet("Reviews") }}

For apps published on the Store, the code must be prefixed with the app code as in:

{{ snippet("Facebook.Like") }}

If the snippet with the specified code does not exist, nothing will be inserted in the page except an HTML comment with the error.

content Snippet content. This is the static content, generally in HTML format, that will be inserted as-is into the page.

templateFiles

Template files to add the snippet to. Template files are all files with the .html extension found in the template root folder. See also the Template Manual for the list of files commonly present in a template.

Use null to add it to all files. No error is returned if one of the specified files does not exist; it simply will not be shown in those files.

Example:

In the following example a snippet is added to the "department.html" and "product.html" pages before the </head> tag.

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) { … })

Removes all app snippets.

Example:

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

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

Removes snippets with the specified codes.

Example:

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

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

Returns snippets with the specified codes. Use null instead of the codes list to return all snippets.

Example:

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

Limits

You can add up to 1,000 snippets per app. The HTML source of a snippet can be up to 50,000 characters long and, in any case, the sum of the HTML source lengths of all snippets in an app cannot exceed one million characters.