Custom Widget for Jelastic Marketplace
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:
- Download the mp-widget directory with the required files. For instance, with the following command:
git clone https://github.com/jelastic/jelastic-marketplace-widget.git
- Enable scripts on your server by adding the following lines between the and tags:
<script async src="{siteUrl}/mp-widget/js/j-marketplace.js"></script>
<link rel="stylesheet" href="{siteUrl}/mp-widget/css/j-marketplace.min.css">
- 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:
<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.
Marketplace Widget Localization & Customization
The widget has several tunable properties that can help you to adjust it according to your needs.
- 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.
- 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:
<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>