Frontastic components and data sources

When creating a Frontastic component to utilize data from your API provider, you need to set this up within your JSX component file and within the schema.json in the Frontastic studio. See the using components in the Frontastic studio article for more information.

To bring the data source into a Frontastic component, it needs to have a field type of dataSource and it needs to have a dataSourceType within the schema.

Below is an example of a product slider Frontastic component that contains a section called Data source that has a type of stream and a dataSourceType of product-list:

{
  "tasticType": "frontastic/product/product-slider",
  "name": "Product Slider",
  "icon": "menu",
  "category": "Boost Theme",
  "schema": [
    {
      "name": "Stream Selection",
      "fields": [
        {
          "label": "title",
          "field": "title",
          "type": "string",
          "default": ""
        },
        {
          "label": "Description",
          "field": "description",
          "type": "string",
          "default": ""
        },
        {
          "label": "Data source",
          "field": "dataSource",
          "type": "dataSource",
          "dataSourceType": "product-list",
          "default": null
        },
        {
          "label": "# Products",
          "field": "productCount",
          "type": "integer",
          "default": 5
        }
      ]
    }
  ]
}

There are 4 dataSourceTypes:

• Product List (product-list) — Search for products through your Product API that contains an array of product objects (also known as Product API Search). Used for Product Sliders or Product Listing Pages.
• Product (product) — A single product object from your Product API. Used for Product Details Pages.
• Content List (content-list) — Search for content through the Content API that contains an array of content objects (also known as Content API Search). Used for Content Listing Pages.
• Content (content) — A single content object from the Content API. Used for Content Pages.

Once you've configured your JSON file for your Frontastic component with this dataSourceType, you can automatically access the data in your JSX file in the corresponding field name. You can then deal with that data as you wish, for example, display the data, send the information to another server, and so on.

Continuing with our product slider example, we'll now receive a list of products that we can display along with displaying whether they're on a users wishlist or not:

import React from 'react'
import PropTypes from 'prop-types'
import tastify from '@frontastic/catwalk/src/js/helper/tastify'
import app from '@frontastic/catwalk/src/js/app/app'

import ProductSlider from 'Organisms/Slider'

function ProductSliderTastic ({ data: {
    title,
    description,
    stream,
    productCount,
},
}) {
    const products = (stream || {}).items ? stream.items.slice(0, productCount) : []
    // eslint-disable-next-line no-unused-vars

  
    if (!stream) {
        return null
    }
  
    return (
        <ProductSlider
            title={title}
            description={description}
            products={wishlistedProducts}
        />
    )
}

ProductSliderTastic.propTypes = {
    data: PropTypes.object.isRequired,
}

export default tastify({ translate: true })(ProductSliderTastic)

Once you've created your Frontastic component schema in the Frontastic studio (if you haven't done this before, see this article for the steps to do this, the Frontastic component can then be placed on the page.

The API hub then does all the magic to display products to your customers as they navigate your site.

Data source filter editor

Let's look at the product slider example again. We'll drag the Frontastic component into a new page and within the settings panel, we can add data source some filters to the data source:

If you put multiple filters on your data source, they can either be AND or OR statements. Let's look at an example:

The above image shows a filter that would have all products that have Men as the category AND is in stock.

Whereas the below image shows a filter that would have all products that have Men as a category AND a color of Black OR Grey.

You can also select a single filter that has multiple options, in this case, they would be OR statements. For example, in the below image, the filter would show all products that are Black OR Grey OR Brown.

Multiple components

By adding more Frontastic components or data sources, you can show your users different products or content, all depending on what you configure within the `Frontastic studio.

For example, below we've added 2 product slider components that have 2 different data source filters:

🚧

Data sources don't communicate with each other (unless you configure this yourself), so you could see the same product in both product sliders.

If you want to, you could limit the number of products that will be displayed to your customers in a product slider, add a title to it, or even a description. You can add all these things and more into the schema of your component and make them configurable by the users of the Frontastic studio.