I don't know products module, but:
First of all it's hard for me to understand what's going wrong as you didn't provide a link to the website/page.
You can include Javascript in several ways:
- in page template
- in page specific metadata
- even in page content (wouldn't recommend it)
- in Global Content Block that is included in page/page template
For options above:
As Smarty uses the curly brackets {} for its tags make sure you don't break it with your Javascript code; use {literal}{/literal} around your javascript code OR make sure all curly brackets in your JAVASCRIPT are
surrounded by a white space.
- as a link to a .js file
That said, note that you can NOT use a javascript (client side) to change a Smarty variable (server side) after the page has been loaded.
That means you have to pass a variable via JS to the webserver via a new page request. YOUR template should read the variable and use that for the call of {Products}. If you don't want page reloads you should use ajax for it.
You can also load ALL categories and it's products in one page and use JS to hide/show the right category (not efficient if you have many categories/products).
Or look for a template to show only a list of categories and use that to provide links to the right category.