Marketplace Widget

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 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 Jelastic 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">

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](https://docs.jelastic.com/jelastic-hoster-info)}"></div>

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

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>

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 Jelastic 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.

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.	app.{hoster_domain}
data-mpapi	Marketplace to get applications and categories from. Either Jelastic central or the one from the particular platform.	//marketplace.jelastic.com/
data-apps	A 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-preloader	Text for being shown while the widget is loading.	Loading, please wait…
data-text	Label for the main button.	Install
data-tx-invalid-email	Text of the warning message that appears in case the entered email is incorrect.	Invalid email, please check the spelling
data-tx-error	Warning for the case of some problem occurrence.	An error has occurred, please try again later
data-tx-success	Text to be displayed upon a successful app installation.	Success.\nr\ Request is sent
data-tx-email-placeholder	Placeholder for the email field	Enter 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>

Custom Widget for Jelastic Marketplace

Marketplace Widget Localization & Customization

What’s next?