Creating dynamic product details page with dynamic routing

I try to create a dynamic product details page.

  1. First I created a home page(http://localhost:3000/home) where I am getting the list of products through an API as added API data source by following your Connecting API documentation.
  2. Now I’ve added details page link (http://localhost:3000/product-details/productId) on product card, where ‘productId’ should be the id of product I am clicking, which will be retrieval on details page through which I can hit the API with the same ‘productId’ in order to get the details.

Issues:

  1. The url with productId is not working “http://localhost:3000/product-details/productId”.
  2. I am unable to retrive the ‘productId’ in details page.
  3. I need to hit details API onload as we get the productId but nit getting the idea to achieve it.

It would be great if I can get any end to end documentation over this type of use case or suggest me the solution and approach to achieve it.

Thanks!

@manish-sharma Do you not have anything helpful here? I’ve seen this sort of situation quite often in the forums without responses.

Hello @bencox,

You may find help at below tutorial

@manish-sharma These are most unhelpful, I’m afraid. I’m working within the UI and binding data elements there. I’ve bound a Section in my page to a list and set it to repeat itself. Now, I need to add a link to a Text item (or the section, itself) for the individual item that’s repeating. I cannot find any information on how to do that.

So if my Section is bound to state.blogPosts.results (an array), how do I make clicking it or it’s child Text item link to “https://mydomain.com/${state.blogPosts.results[_the index of this instance].slug}”?

Again, working completely within the UI here. Not trying to hand-code components or make my copywriter use “targeting” rules for every blog post they create.

@manish-sharma wanted to confirm this is impossible in Builder - is that the case?

Hello @bencox!

This will require a little bit of coding, you may find help at below article

@manish-sharma I can see how you’d use this to create the actual Blog Post page, but I thought it was very clear that I’m trying to create the listings page that iterates the list of blog posts and provides a link to each of them.

How is anything on the article you linked related to that at all?

Hello @bencox,

Ideally, creating a model with blog-post handle and then using the handle to create a dynamic link for listing pages should work, however, if you could share the builder content link where you are trying to implement this or share a loom video/screen recording of what exactly are you trying to achieve would be much appreciated. Thank you!

Thanks @manish-sharma! Details are here: Data binding displays "You have no data connected" relentlessly - #3 by bencox

@manish-sharma I delivered the details you are looking for. Any updates?

Hello @bencox,

We are still not able to reproduce this error, we are getting the option to bind the data

Well, I’m jealous! You don’t have any debugging tricks? Don’t want any console output? Guess I just can’t build my website with your tool.

Hello @bencox,
I apologize for the inconvenience. Could you please provide further details about the issue? It would be greatly appreciated. Additionally, please inform us of the version of the builder SDK you are utilizing so that we may assist you further. Thank you for your cooperation.