Use AppDirect data

As you create and edit your theme in the text editor, you can view existing page data in the developer tool, in order to populate your page objects with real data and see what your storefront will look like in production. The data can include information about meta tags, locales, products, UI elements, and other items.

After you save your changes to your project in the text editor, you can view edits (such as new meta tags) in the browser. Additionally, global information (such as the current user locale) and specific information (such as FAQ information) are available for developers to view.

To view data

1. Start the Toolkit and view the page in your browser.
2. Click Data Viewer in the toolbar (see Use the developer toolbar). The Data Viewer expands and displays the following sections, which reflect the basic structure of your page:
   • config
   • meta
   • external
   • productLists
   • i18n
   • ui

note

You can request additional data on a page with a custom block tag. See Customized data for details.

Configuration (config)

The config section in the Data Viewer includes a list of configurations, such as the available currency, country code, locale, and so on.

config: {
 currency: 'USD',
 locale: {
  "current": "English (United States)",
  "code": "en-US",
  "available": [
    {
      "value": "en-US",
      "label": "English (United States)"
    },
    ...
  ]
 }
 raw_channel_settings: {...channel-settings-object},
 logo: "http://mymarketplace.com/logo.png"
},

Global information available (meta)

The meta section includes information used for meta tags (see Create meta tags), which helps with search engine optimization (SEO). Additionally, you can view global data in the page.

{
    meta: {
        title: 'Page Title',
        description: 'Page Description',
        author: 'Your Company Name',
        url: [Current URL],
        image: 'Company logo or product Image',
        card: 'Recommended twitter card'
    }
}

You can target the data available using the double bracket. For example:

{{ meta.title }}

External API calls (external)

The external section integrates external data from any public API with a template, which can be useful if, for example, you need data from your Content Management System (CMS) to be available in your storefront. The following section includes information from external APIs.

{
    external: {
        external_weather: {
            temperature: '25C',
            ...otherDataFromApi
        }
    }
}

For more information see External.

Product list (productLists)

You can view a list of products available on the page in productLists.

"productLists":{5 items
  "custom_lists":{}0 items
  "custom_apps":{}0 items
  "popularapps":[...]10 items
  "staffpicks":[...]5 items
  "featuredapps":[...]6 items
}

This example shows products that are available on the Home page. Different product lists appear depending on the page you are viewing. For example, productreviews appears for the product profile pages.

Localization (i18n)

A list of localized words on the page appears in i18n. The list is updated in the Data Viewer when you view a different page. If you change the language of the page, for example to German, the list of words in the Data Viewer appears in that language.

"i18n":{25 items
  "BillingAndDistribution":"Billing and Distribution"
  "Home":"Home"
  "Insights":"Insights"
  "List.all.apps":"See all my apps"
  "Manage":"Manage"
  "Marketplace":"Discover Apps"
  "My.Apps":"My Apps"
  "My.Company":"My Company"
  "My.Profile":"My Profile"
  "Teams":"Teams"
  "channel":"Marketplace"
  "corporate":"Network"
  "find.applications":"Find Applications"
  "find.product.line.applications":"Find {0} Applications"
  "logout":"Logout"
  "my.settings":"My Settings"
  "reseller":"Reseller"
  "sign.in":"Log In"
  "sign.up":"Sign Up"
  "Contact":"Contact"
  "Call.us.toll.free":"Call us toll free:"
  "Powered.by.AppDirect":"Powered by AppDirect"
  "help.center":"Help Center"
  "custom":{...}6 items

User interface (UI)

The ui section includes information related to page elements. For example, developers can include the search bar or a footer that can contain links to technical support or the privacy policy.

"ui":{5 items
  "faqs":{...}1 item
  "navigator":{}0 items
  "searchBar":{...}3 items
  "footer":{...}1 item
  "secondaryNav":{...}2 items
}