Hi All,

I am building an eCommerce website and I really new to PHP and MYSQL but loving the challenge.

On my website I have 9 different categories of products with each page having about 8 items to sell. Rather than duplicating the code from each .php/.html file into a new file and change the SQL query, is it possible to write a script that says when the user clicks on category1 in the navigation bar, show all the products in category1?

Hope this makes sense.

Thanks in advanced.

You can try to create one file and use include to avoid duplicating the code.

Your instincts are spot-on. Of course it's possible, and all eCommerce sites work this way. You might want to check out the educational offerings from SitePoint. They have some great "getting started" resources for apps like this.

Hi Michael,

You can either call a JavaScript function with a 'category' parameter, or use a listener to wait for a click event, and then get the ID of the element that received the click. In either case, this will capture the category ID. If you're not familiar with jQuery, I recommend the former just to get the ball rolling.

Once you have this, you can use AJAX (with either JavaScript or jQuery) to pass the parameter (the category ID) to the PHP page. AJAX happens asynchronously, which means no page re-loads and faster results. The PHP page then performs the processing (including data sanitization), and the PHP page returns the results to the AJAX query. Often you will return data as a JSON array for client-side processing, though you can use PHP to parse the output using server resources if you prefer. You can read more about AJAX here: https://www.w3schools.com/xml/ajax_intro.asp.

When you get the AJAX result from the PHP page, you can then use JavaScript to update the contents of the target area (normally a <div> element) using $("#field_id").innerHTML or document.getElementById("field_id").innerHTML. If you returned the data in JSON format, you have a bit more JavaScript to write, otherwise, you can output the sanitized data directly. If you need to update the values of specific elements, rather than containers, you would target the values, rather than the innerHTML.

Have a bit of a play, and ask again if you have more questions.