Docs menu
MENU

Custom Widget for Platform Marketplace

Platform 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 primary sources wrapped into a special package, so you can use it externally, placing the Marketplace frame at your site and customizing it up to your needs.

In order to include such widgets at your website, it is required to add the dependent j-marketplace.js script and the j-marketplace.min.css styles. Both files can be downloaded from the mp-widget directory at the appropriate platform Marketplace widget repository at GitHub.

Let’s go through the step-by-step example:

1. Download the mp-widget directory with the required files. For instance, with the following command:

1

git clone https://github.com/jelastic/jelastic-marketplace-widget.git

2. Enable scripts on your server by adding the following lines between the <head> and </body> tags:

1
2

<script async src="{siteUrl}/mp-widget/js/j-marketplace.js"></script>
<link rel="stylesheet" href="{siteUrl}/mp-widget/css/j-marketplace.min.css">
Note: The mp-widget folder should be located at the root folder of your site.

Ensure that provided {siteUrl} is specified correctly.

3. Lastly, add the following block to your page code at the position you’d like the widget to be placed at. Don’t forget to provide a domain name of your platform, as it defines where the applications will be created:

1

<div class="j-app-mp" data-key="app.{hoster_domain}"></div>

Now, the default ready-to-work Marketplace frame is available at your site.

PaaS marketplace widget

Note: In case you need to add several blocks with separate marketplaces to a single page, you should create a dedicated page for each of the widgets. For example, {yoursite_domain}/marketplace.html, {yoursite_domain}/marketplace2.html. Consequently, you can add such marketplaces to your required page via the iframe blocks:

1
2

<iframe src=“{yoursite_domain}/marketplace.html” height=“400" width=“400” title=“Iframe 1"></iframe>
<iframe src=“{yoursite_domain}/marketplace2.html” height=“400" width=“400” title=“Iframe 2"></iframe>

Marketplace Widget Localization & Customization

The widget has several tunable properties that can help you to adjust it according to your needs.

1. The repository provides complete source code of the platform Marketplace widget, which is built with the help of the Grunt project builder to compile and minimize .js scripts and .less files.

If needed, you can utilize Grunt to redefine default styles and customize the widget up to your needs.

2. Use the list of parameters below to customize your Marketplace frame and apply localization.

ParameterDescriptionExample Value
data-keyA particular 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.app.{hoster_domain}
data-mpapiMarketplace to get applications and categories from. Either the central one or from the particular platform.//marketplace.jelastic.com/
data-appsA comma-separated list of the application IDs that should be displayed in the marketplace. If not defined, all applications will be available.wordpress, wordpress-cluster, nexus
data-tx-preloaderText for being shown while the widget is loading.Loading, please wait…
data-textLabel for the main button.Install
data-tx-invalid-emailText of the warning message that appears in case the entered email is incorrect.Invalid email, please check the spelling
data-tx-errorWarning for the case of some problem occurrence.An error has occurred, please try again later
data-tx-successText to be displayed upon a successful app installation.Success.\nr\ Request is sent
data-tx-email-placeholderPlaceholder for the email fieldEnter email

Add the required properties to your widget code, for example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div class="j-app-mp"
     data-mpapi="//marketplace.jelastic.com/"
     data-key="app.{hoster_domain}"
     data-apps="wordpress, wordpress-cluster, nexus"
     data-text="Install"
     data-tx-invalid-email="Invalid email, please check the spelling"
     data-tx-error="An error has occurred, please try again later"
     data-tx-success="Success.\nr\ Request is sent"
     data-tx-email-placeholder="Enter email"
     data-tx-preloader="Loading, please wait..."
></div>

What’s next?