> ## Documentation Index
> Fetch the complete documentation index at: https://help.experro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Content services

The `ContentService` is used to get the data of the base theme configured in Admin Panel. You can import the `ContentService` from the `experro-storefront` package.

```js theme={null}
import { ContentService } from 'experro-storefront';
```

Here is a list of functions that the `ContentService` provides.

1. [`getSingleTypeContent`](#getsingletypecontent)
2. [`getCollectionRecordsByCollectionInternalName`](#getcollectionrecordsbycollectioninternalname)
3. [`getCollectionTypeContentById`](#getcollectiontypecontentbyid)
4. [`getMenuById`](#getmenubyid)
5. [`getContentModelRecordsByFieldKeyValue`](#getcontentmodelrecordsbyfieldkeyvalue)

## getSingleTypeContent

This function returns the single type data. This function accepts an object with `modelName` as the property.

```js theme={null}
const single_type_data = getSingleTypeContent({modelName : 'globalSettings'});
```

## getCollectionRecordsByCollectionInternalName

This function returns the record list by `id`, `versionId`, `modelName`, and `componentId`.

```js theme={null}
const collectionData = getCollectionRecordsByCollectionInternalName({ modelInternalName: "collection_data_internal_name: });
```

If you're fetching the "zig zag banner", then will get a response similar to shown below.

```json theme={null}
{
  content_model_id: "a5d01c39-202f-45a9-b9f6-49b3e0a63b8c", 
  content_model_name: "Home Zig zag banner",
  current_version_id: "197fbd97-faad-44dc-a823-de72b806e4c8-2",
  current_version_name: "#2",
  id: "197fbd97-faad-44dc-a823-de72b806e4c8",
  title: "Headless CMS"
}
```

## getCollectionTypeContentById

This function returns the collection type by content id.  This function accepts an object with the properies you get from `getCollectionRecordsByCollectionInternalName` function call.

```js theme={null}
const collectionDataById = await ContentService.getCollectionTypeContentById({
  id: '197fbd97-faad-44dc-a823-de72b806e4c8',
  versionId: '197fbd97-faad-44dc-a823-de72b806e4c8-2',
  modelName: 'modal_name',
  componentId: 'component_id',
  ssrKey: `${id}-'example-ssr`,
  enableSSR: true,
});
```

The `id` in `ssrKey` should be any unique value for each API call. If same duplicate id is found, it may behave differently.

## getMenuById

This function returns menu or navigation created in Admin Panel. This function accept `menuId`.

```js theme={null}
const menuDataResponse = await ContentService.getMenuById(menuId);
```

## getContentModelRecordsByFieldKeyValue

This function returns all the records by the model internal name. If you've created the "zig zag banner", with this method, you'll get all the records for this "zig zag banner" as an array of objects contains data for the "zig zag banner".

```js theme={null}
const zig_zag_banner_records =
  ContentService.getContentModelRecordsByFieldKeyValue({
    modelInternalName: 'zig_zag_banner',
    fieldKey: 'id',
    fieldValue: '*',
    fieldsToQuery: '',
  });
```

To fetch the specific data, we can mention the name of the fields in `fieldsToQuery` e.g.,

```js theme={null}
fieldsToQuery: 'title_text_et,banner_description_et,button_layout_com,pop_up_com'
```

Following are the list of other options that you can pass with this method.

| Property   | Description                                                       | Type   |
| ---------- | ----------------------------------------------------------------- | ------ |
| `sortBy`   | Field to sort by.                                                 | String |
| `sortType` | The direction to sort ascending or descending as `ASC` or `DESC`. | String |
| `limit`    | Number of records you want to fetch.                              | Number |
| `skip`     | Number of records you want to skip.                               | Number |

<Info>
  **Note:** The following properties need to be used together:
  `sortBy` and `sortType`
  `limit` and `skip`
</Info>