# Creating dynamic product details page with dynamic routing

**URL:** <https://forum.builder.io/t/creating-dynamic-product-details-page-with-dynamic-routing/3558>\
**Category:** Technical Questions\
**Tags:** visual-editor, react, nextjs\
**Created:** [May 2, 2023, 8:00am UTC](https://forum.builder.io/t/creating-dynamic-product-details-page-with-dynamic-routing/3558 "2023-05-02T08:00:26Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![s.gaurav](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@s.gaurav](https://forum.builder.io/u/s.gaurav)\
**Post date:** [May 2, 2023, 8:00am UTC](https://forum.builder.io/t/creating-dynamic-product-details-page-with-dynamic-routing/3558/1 "2023-05-02T08:00:26Z")

</div>

I try to create a dynamic product details page.

1. First I created a home page(**[http://localhost:3000/home](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](https://www.builder.io/c/docs/guides/connecting-api-data).
2. Now I’ve added details page link (**[http://localhost:3000/product-details/productId](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](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!

---

<div class="post-metadata">

**Author:** ![bencox](https://avatars.discourse-cdn.com/v4/letter/b/4af34b/32.png) [@bencox](https://forum.builder.io/u/bencox)\
**Post date:** [July 13, 2023, 3:41am UTC](https://forum.builder.io/t/creating-dynamic-product-details-page-with-dynamic-routing/3558/2 "2023-07-13T03:41:18Z")

</div>

> [@s.gaurav](#):
>
> 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.

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

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [July 13, 2023, 4:28am UTC](https://forum.builder.io/t/creating-dynamic-product-details-page-with-dynamic-routing/3558/3 "2023-07-13T04:28:24Z")

</div>

Hello @bencox,

You may find help at below tutorial

> **[Using Custom Targeting - Builder.io](https://www.builder.io/c/docs/custom-targeting-attributes#rendering-targeted-content-with-custom-targeting-attributes)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.

> **[Product Editorial | Builder.io Blueprints](https://www.builder.io/c/blueprints/product-page-editorial)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.

---

<div class="post-metadata">

**Author:** ![bencox](https://avatars.discourse-cdn.com/v4/letter/b/4af34b/32.png) [@bencox](https://forum.builder.io/u/bencox)\
**Post date:** [July 13, 2023, 4:39am UTC](https://forum.builder.io/t/creating-dynamic-product-details-page-with-dynamic-routing/3558/4 "2023-07-13T04:39:44Z")

</div>

@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/$](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.

---

<div class="post-metadata">

**Author:** ![bencox](https://avatars.discourse-cdn.com/v4/letter/b/4af34b/32.png) [@bencox](https://forum.builder.io/u/bencox)\
**Post date:** [July 17, 2023, 4:39pm UTC](https://forum.builder.io/t/creating-dynamic-product-details-page-with-dynamic-routing/3558/5 "2023-07-17T16:39:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [July 17, 2023, 4:57pm UTC](https://forum.builder.io/t/creating-dynamic-product-details-page-with-dynamic-routing/3558/6 "2023-07-17T16:57:55Z")

</div>

Hello @bencox!

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

> **[Dynamic Preview URLs - Builder.io](https://www.builder.io/c/docs/dynamic-preview-urls)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.

---

<div class="post-metadata">

**Author:** ![bencox](https://avatars.discourse-cdn.com/v4/letter/b/4af34b/32.png) [@bencox](https://forum.builder.io/u/bencox)\
**Post date:** [July 18, 2023, 12:57am UTC](https://forum.builder.io/t/creating-dynamic-product-details-page-with-dynamic-routing/3558/7 "2023-07-18T00:57:07Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [July 18, 2023, 2:23pm UTC](https://forum.builder.io/t/creating-dynamic-product-details-page-with-dynamic-routing/3558/8 "2023-07-18T14:23:35Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![bencox](https://avatars.discourse-cdn.com/v4/letter/b/4af34b/32.png) [@bencox](https://forum.builder.io/u/bencox)\
**Post date:** [July 18, 2023, 3:58pm UTC](https://forum.builder.io/t/creating-dynamic-product-details-page-with-dynamic-routing/3558/9 "2023-07-18T15:58:08Z")

</div>

Thanks @manish-sharma! Details are here: [Data binding displays "You have no data connected" relentlessly - #3 by bencox](https://forum.builder.io/t/data-binding-displays-you-have-no-data-connected-relentlessly/3881/3)

---

<div class="post-metadata">

**Author:** ![bencox](https://avatars.discourse-cdn.com/v4/letter/b/4af34b/32.png) [@bencox](https://forum.builder.io/u/bencox)\
**Post date:** [July 23, 2023, 9:13pm UTC](https://forum.builder.io/t/creating-dynamic-product-details-page-with-dynamic-routing/3558/10 "2023-07-23T21:13:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [July 25, 2023, 12:00pm UTC](https://forum.builder.io/t/creating-dynamic-product-details-page-with-dynamic-routing/3558/11 "2023-07-25T12:00:34Z")

</div>

Hello @bencox,

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

 ![Screenshot 2023-07-25 at 5.28.04 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d706811ac8297466b621ea09b8f3837219fd2083.png)

 ![Screenshot 2023-07-25 at 5.29.08 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/9/96cee6f421aa498ed53e4408fe84f615fd6d7774.png)

---

<div class="post-metadata">

**Author:** ![bencox](https://avatars.discourse-cdn.com/v4/letter/b/4af34b/32.png) [@bencox](https://forum.builder.io/u/bencox)\
**Post date:** [July 25, 2023, 4:19pm UTC](https://forum.builder.io/t/creating-dynamic-product-details-page-with-dynamic-routing/3558/12 "2023-07-25T16:19:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [July 25, 2023, 4:21pm UTC](https://forum.builder.io/t/creating-dynamic-product-details-page-with-dynamic-routing/3558/13 "2023-07-25T16:21:36Z")

</div>

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.
