Get id in url in builder io

[Kenz]

I currently have the link http://localhost:9000/wecare/Home/5052d7b3-5e2e-ed11-9db1-000d3a856e52. How can I retrieve the product information based on the ID 5052d7b3-5e2e-ed11-9db1-000d3a856e52 using only Builder.io without any coding?

[sheema]

Hey @Kenz, welcome to the Builder forum.

Are you trying to fetch your products from http://localhost:9000/wecare/Home/5052d7b3-5e2e-ed11-9db1-000d3a856e52?
To achieve this, you can use Data models and Data binding.

Retrieve Product Information in Builder.io

1. Create a Data Model for Products:

• Ensure that you have a Data Model set up for your products in Builder.io. If not, you can create one by navigating to Models > Data Model and adding the necessary fields (e.g., Product Name, Description, Price, Image, etc.).

2. Add Product Entries:

• Add content entries to the Data Model. Each entry should represent a product, and one of the fields should store the unique ID of the product.

3. Set Up a Page or Section:

• Create a new Page or Section in Builder.io where you would like to display the product information.

4. Use Custom Query in Visual Editor:

• In the Visual Editor, you can add dynamic data bindings to query the product information based on the ID.

Using Visual Editor for Custom Queries

Step 1: Add Widgets to Display Product Information

1. Log in to Builder.io and navigate to the content you want to edit.
2. Drag and Drop Elements: Add the elements (e.g., text block, image, etc.) where you want to display the product information.

Step 2: Bind Data to Elements

1. Click on the Element: Click on the element you added (e.g., text block) to open its settings.
2. Data Tab: Navigate to the Data tab in the right-side panel.
3. Add a Custom Query: Add a custom query to fetch the product data based on the ID from the URL.

Let me know if this helps.

[Kenz]

Hi @sheema

I currently can pass the product ID into the URL. However, I’m having trouble retrieving that ID value to pass it into the edit query as a parameter.

[sheema]

Hey @Kenz if you are using product-id as queryparam i.e. http://localhost:9000/wecare/Home&product-id=5052d7b3-5e2e-ed11-9db1-000d3a856e52 you need to use JS to fetch the products

const urlParams = new URLSearchParams(state.location.pathname.split('&')[1]); 
const productId = urlParams.get('product-id');

However, If you are passing the product ID like -http://localhost:9000/wecare/Home/5052d7b3-5e2e-ed11-9db1-000d3a856e52 then you can get the product ID from the state directly using the code below.

productId = state.location.path[2]