dynamically generate content for a page when clicking on product

Question

everyone. I am making a website with t-shirts. I dynamically generate preview cards for products using a JSON file but I also need to generate content for an HTML file when clicking on the card. So, when I click on it, a new HTML page opens like product.html?product_id=id. I do not understand how to check for id or this part ?prodcut_id=id, and based on id it generates content for the page. Can anyone please link some guides or good solutions, I don't understand anything :(.

Answer 1

There are some solutions, how you can get the parameters from the url: Get ID from URL with jQuery

It would also makes sense to understand what is a REST Api and how to build a own one, because i think you dont have a backend at the moment. Here some refs: https://www.conceptatech.com/blog/difference-front-end-back-end-development https://www.tutorialspoint.com/nodejs/nodejs_restful_api.htm

Answer 2

It sounds like you want the user's browser to ask the server to load a particular page based on the value of a variable called product_id.

The way a browser talks to a server is an HTTP Request, about which you can learn all the basics on javascipt.info and/or MDN.

The ?product_id=id is called the 'query' part of the URL, about which you can learn more on MDN and Wikipedia.

A request that gets a page with this kind of URL from the server is usually a GET request, which is simpler and requires less security than the more common and versatile POST request type.

You may notice some of the resources talking about AJAX requests (which are used to update part of the current page without reloading the whole thing), but you won't need to worry about this since you're just trying to have the browser navigate to a new page.

Your server needs to have some code to handle any such requests, basically saying:

"If anybody sends an HTTP GET request here, look at the value of the product_id variable and compare it to my available HTML files. If there's a match, send a response with the matching file, and if there's no match, send a page that says 'Error 404'."

That's the quick overview anyway. The resources will tell you much more about the details.