Can we "bake in" components to page models?

Technical Questions
1

What are you trying to accomplish
Hi, was wondering if there’s anyway to enable some page models to already have components pre-added to them as new pages are created within those models?

For example, we have some product detail pages that we’d like to always have XYZ components already on page whenever a new PDP is created so the admin can simply edit the blank components on page, rather than dragging XYZ components to every newly created PDP.

Thanks!

2

@Jason.yang I actually think the easiest way to achieve this would be to create a default template page within Builder and then just duplicate the page instead of creating a new page each time.

To do this, simply create a page like normal within Builder Visual editor and then name it Template Page or something similar. Once the page is finished, you can just click the three dots in the upper right corner and select Duplicate
duplicate

And then just rename the page to whatever you want and you should be able to continue editing/tweaking for that unique page.

This way you can always update the template page within Builder easily as needed and still have the flexibility of not requiring a code change. Keep in mind, changes to your template page wont affect any of the previously-created duplicates, only new duplicates going forward.

Does that achieve your goal? Similarly, you could just save the entire page as a template that you can drop onto the page.

Let me know if you have further questions, but hopefully that helps!

3

This would work for new pages manually created by our admins.

However wrote a plugin that will create all product detail pages automatically and save them as draft for the admins to edit so ideally there would be a method of doing this in the code?

We’re using the context.createContent function along with this productContentTemplate
to generate the pages, not sure if there’s a way to also “bake in” components?

function productContentTemplate(
  resource: any,
  publishStatus: 'draft' | 'published',
  builderQuery?: {
    '@type': string;
    property: string;
    operator: string;
    value: string;
  }
) {
  const query = builderQuery ? [builderQuery] : [];
  return {
    published: publishStatus,
    name: resource.title,
    meta: {
      importedDate: Date.now(),
      addedBy: BUILDER_PLUGIN_ID,
    },
    data: {
      id: resource.id,
      slug: resource.slug,
    },
    query,
  };
}
4

another option here is to use section models, where your product page template looks like

export function ProductPage(props) {
  return <>
      <ProductDetailComponent />
      <BuilderComponent name="product-page-section" content={props.sectionContent} />
   </>
}
5

Thanks for suggestion Steve, played around with this before and we don’t think it would work for how our <ProductDetailComponent /> functions (we’re allowing builder admins to choose which product they want to display using that component)

So if I understood section models correctly, it’ll work if our <ProductDetailComponent /> automatically hydrates maybe based on current page slug which might be too restrictive for our use-case.

We’ll continue poking around and looking through some builder ecommerce examples to see how others have solved for this.

6

Nice! Your assessment is correct, for this exact use case page model is the way to go :+1: