Custom components with content library

You can easily integrate data from Experro’s Content Library into your custom component. To integrate data from the Content Library into your custom component, the first step is to add the below code to the configObj in your widget file.

const configObj = {
  modelInternalName: 'your_component_model_internal_name',
  traitConfig: [
    {
      type: 'exp_contentModalPopUp',
      modelInternalName: 'your_component_model_internal_name',
    },
  ]
}

You can find the Model internal name of your component in the Experro admin panel when you create a component. Afterwards, you will see a popup on the sidebar where you can select the record for that particular component. When you select a record, you will get the value of that record in the props of your component as contentModel. The value will be an object, and you can access it by the following method:

{
  PRODUCTION6e3bab01edcd4771ad05203ed79042d69xdt10du_published_version_id:  "baaf3cdb-f462-40d8-93f6-41e720b7f8e9-8"
  content_model_id: "a2285cb8-fa8b-4fcb-83f8-c72c164040bd"
  content_model_name: "Zigzag Layout"
  current_version_id: "baaf3cdb-f462-40d8-93f6-41e720b7f8e9-8"
  current_version_name: "#8"
  id: "baaf3cdb-f462-40d8-93f6-41e720b7f8e9"
  published_version_name: "#8"
  title: "Lorem ipsum"
}

Once you have received this object, you need to import the ContentService from the experro-Storefront npm package. The ContentService provides a function called getCollectionTypeContentById, which should be used to retrieve data from Experro’s content library. Here’s an example of how you can use the getCollectionTypeContentById function from the ContentService:

 await  ContentService.getCollectionTypeContentById({
  id: 'id',
  versionId: 'current_version_id',
  modelName: 'model_internal_name',
  componentId: 'random_keu',
  ssrKey: `random_id_for_ssr`,
  enableSSR: true,
});

The id and versionId are obtained from the contentModel object, while the modelName represents the model internal name for the component.

Note: The componentId and ssrKey are random keys that should be unique.

To explore more, you can also use ExpComponentDataDispatcher to integrate the Experro’s content library data easily. Or if you want to discover how to use Droppable Widgets, you can click the link.

Getting Started

Overview

Theme Components

Create Custom Widget

Theme Templates

Experro CLI

Other

Custom components with content library