Customize Marketplace Data

You can configure your theme templates to request additional data.

For example, suppose you want a page on your storefront to include a customized slider of four products. You can request the information associated with those products, view the information in the Data Viewer of the developer tool, and then add them to your template using CSS.

Currently, the data included in the templates pulls basic information from your marketplace to help you get started on your theme (see Use AppDirect data).

This topic includes the following types of custom data that are available for developers to retrieve information, view in the Data Viewer, and add to their template:

Application---Returns the data of a specific application.
List---Returns a list of applications associated with categories, filters, attributes, and search queries.
FAQ---Returns the Frequently Asked Questions (FAQs) list.
Navigator---Returns the categories list.

Application

Complete the procedures in this section to search for data associated with an application, add the data tag to your theme template, and then view the customized data.

To search for data associated with an application

Start the Toolkit.
Click Search Data in the developer toolbar. The Search Data bar appears and Apps is selected by default in the drop-down list.
Type a search string. Application names appear.
Click the desired application and the following information appears:
- Integration---Data tag that you can add to your theme template to view information about the application.
- Raw data---Information pulled from the page objects service.

To add the data tag to your theme template

Copy the data tag in the Integration section in the Data Viewer. For example:
```
     <data type="app" value="2373" />
```
Open your project in your text editor and find the template file that you want to include the additional data.
Paste the data tag between {% block data %} and {% endblock %}. The following example shows the application, Dropbox, added to the template.
```
    {% block data %}
    <data type="app" name="dropbox" value="2373" />
    {% endblock %}
```
Save your *.html file in your text editor and refresh the browser that is running the developer tool. The data now appears in the Data Viewer of the developer tool.

To view the customized data

Click the expand icon in the developer tool.

Click Data Viewer > productLists > custom_apps. The product information appears. The following example shows information about the Dropbox product.

    "productList": {
      custom_apps: {
        "custom_apps_dropdox":
            {
                "href": "https://marketplace.appdirect.com/api/marketplace/v1/products/417",
                "id": 417,
                "uuid": "61f2f340-ae52-11e3-ac06-22000a1dd446",
                "url": "https://marketplace.appdirect.com/apps/417",
                "name": "Dropbox",
                "productType": "WEB_APP",
                ...
            }
       }
    }

Developers can view the additional data about the product and add it to their template. For example, a developer can add the Dropbox product to a slider in the storefront:

    {% set dropbox = productList.custom_apps.custom_apps_dropdox %}
        <div class="adb-slider--item">
            <h3>{{ dropbox.name }}</h3>
            <p class="">{{ dropbox.description | truncate(50) }}</p>
        </div>

List

Complete the procedures in this section to search for a list of applications associated with categories or attributes, add the data tag to your theme template, and then view the customized data.

To search for a list of applications associated with categories or attributes

Start the Toolkit.
Click Search Data in the developer toolbar. The Search Data bar appears and Apps is selected by default in the drop-down list.
Click the drop-down list and select one of the following:
- Categories---Organizes products using two organizational levels for grouping products.
- Attributes---Organizes products using inherent characteristics of a product.
Type a search string. Category or attribute names appear, depending on your selection in the previous step.
Select the category or attribute. The following information appears:
- Integration---Data tag that you can add to your theme template to view information about the list of applications associated with that category or attribute.
- Raw data---Information pulled from the page objects service.

To add the data tag to your theme template

Copy the data tag in the Integration section in the Data Viewer. For example, <data type="list" attributes="4334" sort="ALPHABETICAL" />.
Open your project in a text editor and find the .html file in which you want to include the additional data.
Paste the data tag between {% block data %} and {% endblock %}, which are included in your template. The following example shows the mobility attribute added to the template.
```
    {% block data %}
    <data type="list" name="mobility" attributes="4334" sort="ALPHABETICAL" />
    {% endblock %}
```
You can use reductive filtering by combining filters, attributes, and categories. Additionally, you can use multiple IDs in the same option separated by commas. For example:
```
    <data type="list" name="mobility" attributes="4334,1235" categories="12312,4356" sort="ALPHABETICAL" />
```
You can sort the lists using the following methods:
- RELEVANCE The default order of the application.
- ALPHABETICAL Application names appear in order from A to Z.
- POPULARITY Applications with the most active subscriptions appear first.
- NEWEST_FIRST Newest applications appear first.
- RATING Highest rated applications appear first.
Save the .html file and refresh the browser that is running the developer tool. The data appears in the Data Viewer.

To view the customized data

Click the expand icon in the developer tool.

Click Data Viewer > productLists > custom_lists. The information for a list of products associated with a category or attribute appears. The following example shows information about the mobility attribute.

    "productLists": {
      custom_lists: {
        "custom_lists_mobility": [
            {
                "href": "https://marketplace.appdirect.com/api/marketplace/v1/products/417",
                "id": 417,
                "uuid": "61f2f340-ae52-11e3-ac06-22000a1dd446",
                "url": "https://marketplace.appdirect.com/apps/417",
                "name": "Yast Time Tracker",
                "productType": "WEB_APP",
                ...
            },
            ...Other apps
        ]
      }
    }

Developers can view the additional data about categories or attributes and add it to their template. For example, the developer can add products associated with the mobility attribute to one of the sliders in the storefront by adding the following snippet of CSS to one of the .html files.

    {% for app in productLists.custom_lists.custom_lists_mobility %}
        <div class="adb-slider--item" data-slick-index="0" aria-hidden="false">
            <h3>{{ app.name }}</h3>
            <p class="">{{ app.description | truncate(50) }}</p>
        </div>
    {% else %}
        <div>No apps here</div>
    {% endfor %}

FAQ

You can request the Frequently Asked Questions (FAQ) list by adding the following block tag to your one of your .html files:

    {% block data %}
    <data type="faq" />
    {% endblock %}

Information from the FAQ is available in the Data Viewer section of the developer tool.

    "ui": {
        "faqs": [
            {
                "name": "Frequently Asked Questions",
                "faqs": [
                    {
                        "question": "How do I purchase an application through the AppDirect marketplace?",
                        "answer": "In order to purchase an application, please visit the Application Marketplace and click on the profile of the application you would like to purchase. From the product profile, you can either select a free trial or drill down to the Editions and Pricing to select a subscription level that best suits your needs."
                    },
                    {
                        "question": "As an ISV, how do I list my product with AppDirect?",
                        "answer": "In order to list your product with AppDirect, please visit the AppDirect Developer Portal to learn about our API and click-on "Integrate Now" to begin your integration. Please reach out to us at developer@appdirect.com should you have any additional questions."
                    }
                ]
            }
        ]
    }

Developers can add information from the FAQ list to their template. The following example shows the FAQ added to the Home page:

    {% block data %}
    <data type="faq" />
    <data type="list" subcategories="2223" name="mobility" />
    {% endblock %}

    {% block content %}
        <div class="row row--spaced">
            <div class="col col-xs-8 col-fix-inv-sm-4 ">
                <div class="layout-content--section">
                    {{ hero() }}
                </div>
                <div class="layout-content--section">
                    {{ slider("Featured Apps", productLists.featuredapps, i18n) }}
                </div>
                <div class="layout-content--section">
                    {{ slider("Popular Apps", productLists.popularapps, i18n) }}
                </div>
                <div class="layout-content--section">
                    {{ homeFaq(ui.faqs.items[0], ui.faqs.l10n) }}
                </div>
            </div>
        </div>
    {{ sliderScript() }}
    {% endblock %}

In this example, the homeFaq macro (at themes/themeName/content/macros/home-faq.html) was imported into the file.

Navigator

You can request the category list (navigator) by adding the following block tag to your one of the .html files:

    {% block data %}
    <data type="navigator" />
    {% endblock %}

Information from the category list becomes available in the Data Viewer section of the developer tool:

    "ui": {
      "navigator": {
        "attributeGroups": [
            {
                "id": 33,
                "name": "App Collections",
                "showOnNavigation": false,
                "vendorTaggable": true,
                "attributes": [
                    {
                        "id": 73,
                        "name": "Bundles",
                        "queryAlias": null,
                        "numTaggedProducts": 11
                    },
                    {
                        "id": 74,
                        "name": "Deals",
                        "queryAlias": null,
                        "numTaggedProducts": 15
                    }
                ]
            }
        ],
        "categories": [...]
      }
    }

Developers can add information from the category list to their theme template. The following example shows the category list added to the Home page:

    {% block data %}
    <data type="navigator" />
    <data type="list" subcategories="2223" name="mobility" />
    {% endblock %}

    {% block content %}
        <div class="row row--spaced">
            <div id="sectionNavigation" class="col col-fix-4 d-none d-sm-block">
                {{ navigator(ui.navigator) }}
            </div>
            <div class="col col-xs-8 col-fix-inv-sm-4 ">
                <div class="layout-content--section">
                    {{ hero() }}
                </div>
                <div class="layout-content--section">
                    {{ slider("Featured Apps", productLists.featuredapps, i18n) }}
                </div>
                <div class="layout-content--section">
                    {{ slider("Popular Apps", productLists.popularapps, i18n) }}
                </div>
            </div>
        </div>
    {{ sliderScript() }}
    {% endblock %}

Was this page helpful?

Tell us more…

Help us improve our content. Responses are anonymous.

Thanks

We appreciate your feedback!

Customize Marketplace Data

Application​

List​

FAQ​

Navigator​

Was this page helpful?

Tell us more…

Application

List

FAQ

Navigator