Using builder to add content to dynamically generated content

Visual Editor Help
1

What are you trying to accomplish
I’m building a product configurator similar to Configure | Rivian. I want to be able to add builder content under each product option/input field. I’ll provide a screenshot to further explain.

Screenshots or video link
I want to provide the ability to add/edit content under each product options. What is the best way to accomplish this in builder? Do I need to create a new Section model for each editable spot? Or is there a better way to accomplish this?
Red - Custom content (swell production options)
Blue - Builder content

Screen Shot 2021-12-04 at 3.15.43 PM
Screen Shot 2021-12-04 at 3.15.43 PM616×2006 192 KB

Code stack you are integrating Builder with
My site is a next.js ecommerce site using swell ecommerce. Most of the site is using builder pages. The configurator is custom with no builder integration currently.

2

@swinner Would the blue sections all be the same and have the same inputs? If that is the case, then creating a single Section model, place it multiple places on the page and then just pass down the correct data or context as needed: builder/packages/react at main · BuilderIO/builder · GitHub

Similarly, you could make the entire menu of all combined sections a single Section and pull data from Swell to populate the red sections, and have the blue sections be built within Builder.

Hopefully that gives you some more options…if you have specific questions please let me know I am happy to help troubleshoot further

1 Like
3

Hey @TimG, thanks for your ideas I ended up getting it working. I created a section model and added a optionId field. The component queries that field to find the content to show.

const LaunchModalBuilderSection = ({ optionId }: { optionId: string }) => (
  <BuilderComponent
    model="configurator-input-launch-modal"
    options={{ query: { data: { optionId } } }}
    data={{
      optionId,
    }}
  />
)

There is some weirdness to how I set it up. I’m sure there is a better way. I made a quick video to show how it’s all set up. Any feedback is appreciated :pray:

4

@swinner apologies for delay on this, I somehow missed the notifications and am just now getting back to going through open posts. How are you passing the optionId into the BuilderComponent?

When I go into a section within Builder, I notice the optionId in state is set correctly each time I click…the state.optionId reflects the section of the configurator I have clicked on. It looks like the optionId being passed into the options query in <BuilderComponent> however is the section currently editing in the Visual Editor, which isn’t necessarily wrong, but it just means that on each option in the configurator it is showing the current modal that you are editing, not the modal of the section you clicked on…if that makes sense.

If you can share more context around where you are loading LaunchModalBuilderSection within your app that might help dig a little deeper…as a work around in the meantime, you can limit to only show the current modal when the correct section is clicked by using a data binding like below:

Show if
return state.optionId === context.builderContent.data.optionId
Screen Shot 2021-12-20 at 4.55.59 PM

Its a bit of a work around, but it should clean up the experience a bit in the editor and preview modes