Custom Jelastic Marketplace for Your Site

Jelastic Marketplace is a categorized list of pre-packaged applications, that includes the variety of solutions for different purposes, available for installation in a few simple clicks. We provide its basic sources wrapped into a special package, so you can use it externally, placing the Marketplace frame at your own site and configuring it up to your needs.

For that, add the following string to your page code at the position you’d like the widget to be placed at:

<div class="je-app-mp"></div>

After that, the default and ready-to-work Marketplace frame will appear at your site.

Tip: In case it is not displayed, please make sure you’ve included the appropriate JS script (described within Installation Widget instruction) to the required site page.

In addition, this widget has a number of tunable properties, that can help you to adjust it according to your needs. Use the list of parameters below to additionally customize your Marketplace frame through adding them as the abovestated <div> tag's attributes:

Parameter

Description

Example Value

data-key

A particular Jelastic platform for the applications to be created at. If this parameter is not stated, a user will have the possibility to choose the preferable hosting service provider.

Note that upon specifying a particular provider, the list of available applications will be fetched from the corresponding  platform; otherwise, the central Jelastic storage will be used.

app.{hoster_domain}

data-lang

Code of the language in the ISO 639-1 format the application descriptions will be shown in (in case any of them includes several localizations)

en

data-css

Link to the custom CSS (Cascading Style Sheets) file to be used by a widget

//example.com/style.css

data-tx-loading

Text for being shown while widget is loading

Loading

data-tx-install

Label for the "install" button

Install

data-tx-provider

String to be displayed within the hosting provider selection frame, just before the name of the currently chosen one

Service provider

data-tx-invalid-email

Text of the warning message, that appears in case the entered email is incorrect

The e-mail value is not valid

data-tx-error

Warning for the case of some problem occurrence

Some error has occurred

data-tx-check-email

Text to be displayed upon a successful app installation

Check your email

data-tx-required-field

Message for the case the necessary input field is not filled in

This field is required

data-tx-email

Placeholder for the email field

Your email

data-tx-apps

Label for the main application’s category (is shown above the categories list to the left)

Applications

data-onready

Global function, that, if stated, will be executed after the Marketplace widget is initialized at a page; can be used for customization (e.g. resizing elements, defining loader displayment, adding navigation, etc.)

Jelastic.onReady

data-category

The Marketplace subcategory to be automatically shown just after the widget initialization (if not stated, the common apps one is opened by default)

apps/blogs


Custom Navigation

In order to improve your Marketplace usability, you can customize the navigation between its sections through binding each category to the appropriate link address, like in the image below:

To get the similar option at your own Marketplace, you’ll need to track the categories’ selection and change the currently shown one with the help of the cross-domain postMessages. So, let’s consider how to accomplish both this points:
  • while switching to another category using the left hand Marketplace menu, plugin sends a postMessage (JSON object with a string message type) to the parent document. It should be converted back to the object type before being used (for example, with the JSON.parse() method)
  • in order to set a particular category to be displayed, the postMessage (JSON object), that is intended for being sent to the iframe, should be previously converted into the string type (for example, with the JSON.stringify() method)

As an example of such implementation, you can use these sources (with the navigation similar to the Jelastic Marketplace one’s) as a basis for adjusting your own widget.

Note: The plugin can send other messages as well. For their validation, always use the "action" : "category" property.