Developer forum

Forum » Dynamicweb 10 » Possible solution for headless dynamic product details page?

Possible solution for headless dynamic product details page?

E-mail notifications
Joakim
Reply
Posted on 17/01/2024 10:00:12

Hi,

I'm running a Vue app consuming the DWAPI. I'm attempting to implement the same functionality where the product details page is dynamic, as is in Swift.

So the issue is how to get a link to the product details page, when in the product list page. In Swift files, the link in Swift_ProductListItemRepeater.cshtml is formatted via string link = product.GetProductLink(GetPageIdByNavigationTag("Shop"), false); .Currently my solution is converting product name to a url-friendly string, this however fails me when attempting to actually render the product details page based on the generated url string. 

Assuming the above gets solved, im then not sure how to properly get the product data via the url(e.g: /bikes/road-bikes/k2-tnine-alliance-ladies-road-bike-cc), since the DWAPI requires a productId, and theres no way to match the url with json data recieved in dwapi/frontend/navigations/3?ExpandMode=All&IncludeFoldersAndHidden=True since single products arent included, only product groups.

 

I'm wondering if anyone has adressed this issue and found a solution? Or maybe could point me in the right direction to find one.

 

Thanks in advance,


Replies

 
Joakim Sjöbäck
Posted on 17/01/2024 16:33:05
Reply

To clarify what im after: https://headless-starter-kit.netlify.app/shop/products?ProductID=PROD4 should be something like https://headless-starter-kit.netlify.app/shop/products/sofia-table

 
Nicolai Pedersen Dynamicweb Employee
Nicolai Pedersen
Posted on 18/01/2024 08:43:36
Reply

Hi Joakim

On the ProductGroupViewModel (inheriting from GroupInfoViewModel) you have the PrimaryPageId property

You can use that to find the detail page belonging to products in a specific group - that is basically what Swift does in lists using an extension method.

In relation to product URLs we do not provide a solution for that out of the API (yet) as it comes with some complications.

  • Solutions can have over one million products and hence one million URLs, and supporting that on these endpoints will be a huge problem
  • In Dynamicweb a product detail page have 3 parts in it - the page, the group and the product URL. Both groups and products can be published several times on different pages (i.e. B2C, B2B, seperate group pages, and other places) leaving products with more than one potential URL.
    • When we render pages in Dynamicweb we combine these URLs based on setup - and returning an exact URL for a product is currently not possible for us.
  • Since routing happens client side in a headless scenario, it can easily become a problem to route many products if we use the navigation endpoints - so we need a way where these routes can be dynamic and a product viewmodel can return a URL segment that can used in a dynamic routing scenario.

For now I would suggest to make a URL like 'product name in slug format-{sku}' and remove the name and use the SKU/productid to lookup the product.

We will be happy to work out a better solution for the product URLs with you. Probably returning the product url on the products endpoint and a new endpoint to lookup URLs in the URL system (and not the navigation system which is a bit different).

BR Nicolai

 

You must be logged in to post in the forum