How to extract part of URL path and send URL onClick to query parameters

Question

On my online art store I'm trying to achieve the following:

• There's a "Contact me" button on the product page, I want the button to retrieve the artist's name from the URL and insert this into the button URL. URL structure of the product page: "https://store.com/product/smith-john-painting-1/".

Result at this point: clicking the "Contact me" button on this page leads the visitor to "https://store.com/contact/smith-john/"

• Additionally, when the visitor visits the contact page through a product page and fills in the contact form, I want to know which product they viewed. A clean method of doing this (as I've understood from doing research) is by using query parameters. Therefore, using the example mentioned above: when the visitor views the product page and clicks the "Contact me" button, the part after the artist's name (however long that is), "painting-1", is extracted from the URL and added as query parameters as "?product=painting-1".

End result: clicking the "Contact me" button on the product page mentioned above leads the visitor to "https://store.com/contact/smith-john/?product=painting-1"

I've only found parts of the solution, any idea on how to achieve this?

Answer 1

Try this

 const url = new URL("https://store.com/product/smith-john-painting-1/") const artistUrl = url.origin const parts = url.pathname.split("/") const [lastName, firstName, item, number] = parts[2].split("-") const pageUrl = `${artistUrl}/contact/${lastName}-${firstName}/?product=${item}-${number}` console.log(pageUrl)