Create multiple variations of a landing page based on a model

Technical Questions CMS
1

I have a Builder Landing Page that I have created. We need to duplicate that same format but with different content for 30 different products. Can we set up a model for those 30 products and enter all the data into that model and then duplicate that one landing page with different products? A user would go to a different URL which would determine what content they would see. If this is possible how would we do this?

2

Hi Nevin,

Yes, you can do that. I would recommend using a template or symbol so you can easily reuse your page format. You can learn more about reusing blocks in our docs here:

Please let me know if you need any more help with this.

3

This does not answer my question. We need to input URL parameters into the Query parameter and then query a data source (that is hosted in Builder) based on that query parameter.

  • We created a data source in Builder that we are populating
  • That data source needs to be queried based on a URL parameter

If I set up a custom field within a symbol, can we populate data into that field based on a URL parameter?

And once we have that data, how do we tie it back to the query in this part of the page?

Screen Shot 2022-07-06 at 3.44.40 PM
Screen Shot 2022-07-06 at 3.44.40 PM748×1176 52.1 KB

4

Hi Nevin,

Sorry that wasn’t clear, instead of using the url parameters to query your data source, I was suggesting that you manually create each page and connect the page to a specific model entry. You could use a symbol or template to easily populate your design with the new product data.

Please let me know if this approach wouldn’t work for you and why.

5

In theory that would work - we have a page template (set up as a symbol). And then a data source of 30 entries with data for that page (images and copy). How would we tie the two together? The two articles you send don’t explain that. We don’t want to create 30 different pages within Builder. That would be inefficient since they all use the same format of the page. We want to use the Builder CMS to create content for those 30 pages and have 1 template (symbol). How would we select the data from the CMS that is being used? We have 30 entries but somehow based on the URL, we would need to query which one is shown. How would we do that?

6

Hi @nevin, thank you for clarifying. Here is how you can do that step-by-step:

  1. Create a symbol with inputs that you want to connect to your product model.
  2. Add the symbol to a page.
  3. Change the targeting for the page so that the URL path starts with your route (instead of “Is” your route).
  4. Add custom javascript to the page to get the path and fetch the correct data. You can see an example below:
// get the paths array
let paths = state.location.path
// set the default product here
let product = "Pants"
// if the array has more than the first route, update the product
if (paths.length > 1){
	product = state.location.path[1]
}

fetch(`https://cdn.builder.io/api/v2/content/YOUR_MODEL?apiKey=YOUR_API_KEY&query.data.name=${product}&limit=1`)

.then(res => res.json())

.then(res => {state.myData = res})
  1. Add a binding to the symbol so that it will Show If state.myData exists.
  2. In the symbol options, add custom code bindings to the input fields. Below is an example:
return state.myData.results[0].data.name

You can also find a related tutorial that shows this dynamic fetching method in our docs here: Advanced data fetching in Builder.io - Builder.io

Please let me know if this doesn’t work for you.