Question

0

313

Visualizações

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

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?

about 4 years ago · Juan Pablo Isaza

1 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Answer 1 · 2022-07-10T16:24:57.059Z

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)

0

313

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

1 Respostas

0

Encontrar trabalhos remotos

Andres GPT