Get Started - Tutorial
Configure a Component
Before you continue, make sure you have already created and synced your theme.json
and component-name.json
with our CLI. This step is explained in section 4 of this tutorial
Configuring a Component's visual editor is done in two parts:
- Set
data-pf
attributes on Components - Dynamically add class names for Component Designer
1. Set data-pf
attributes
In order to link a component with its Visual Editor Configuration , you need to add the corresponding data-pf
attributes.
Take the following HTML snippet as an example:
<div data-pf='{"providerId": "my-cms", "componentKey": "grid-card", "title": "Campaign Hero", "groupId": "abc1234", "instanceId": "123456, "entryId": "abc1234"}'>
<!-- Your component's HTML -->
</div>
The data-pf
attribute tells us that the component key is grid-card
. That the key
you must have in your component-name.json configuration. This component is also part of a group called abc123
.
2. Get new styles with our Helpers
The last step is to retrieve new styles server-side
from our Runtime API
. You can do so by using our Runtime API or by using our Helpers Package
that will do the hard work for you.
We wrote a complete guide to help you implement our helpers in your setup. Please read this article
Developers Ressources
- Learn more about
data-pf
attributes - How to install and use our Helpers
- Install our Browser Extension to inspect
data-pf
attributes