Frontastic components and data sources

When creating a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. to utilize data from your API provider, you need to set this up within your JSX component file and within the schema.json file.

To bring the data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site. into a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code., it needs to have a field type of stream and it needs to have a streamType within the schema.json file.

Below is an example of a product slider Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. that contains a section called Data source that has a type of stream and a streamType 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": "stream",
          "streamType": "product-list",
          "default": null
        },
        {
          "label": "# Products",
          "field": "productCount",
          "type": "integer",
          "default": 5
        }
      ]
    }
  ]
}

There are 4 streamTypes:

  • 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 componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. with this streamType, you can then 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, or 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 uploaded your Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. schema.json file to the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. (if you haven't done this before, see this article for the steps to do this, the Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. can then be placed on the page.

The API hubAPI hub - The API hub combines our code, your code, and APIs to create the backend of a commerce site. Any backend development or extensions are done here. Known as `Catwalk` in code. 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 componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. into a brand new page and within the settings panel, we'll can add data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site. 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 componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. or data sourcesdata sources - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site., you can show your users different products or content, all depending on what you configure within the `Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`..

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, or 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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`..


Did this page help you?