making categories selectable in page edit view

Question

I'd like to develop a selection option for categories when a user edits a page. This is required as I'm building a white label website - meaning each client should be able to create their own pages from a long list of predefined topics (represented by categories) and apply those to filter a list of products showing on each page. Applying categories to each product is simple, what I'm stuck with is how do I expose a list of categories to select from on the page edit view, so filtering a list view on each page becomes just as easy.

What I've tried so far and didn't work (I've seen that only "orderby" can hold a variable, but it was worth a shot, here "category_to_show" is a variable that can be edited in page view):

{exp:channel:entries channel="review" limit="12" ... category_group="2" show="category_to_show"}  

This only works if I enter the numbers (or names) of the categories in the html that I would like to show eg. show="3|12", but since each page's content needs to be dynamic, I can't set a number without knowing what the page's content will be about.

The other idea I came up with is to make the category dynamic and set the value with a variable in an ajax form and submit it on page load. This probably will cause performance problems...

How should I solve this in a non-hacky way? Since it's a white label website, I don't want to use plugins or addons so it won't cause licensing headaches in the future.

Answer 1

So, I came up with the solution, it's bare bone, but it works:

<div id="csrf" hidden>{csrf_token}</div>

{exp:channel:entries channel="main"}    
<div id="the_url" hidden>/lists/category/{game_type_filter}</div>   
{/exp:channel:entries} 


<script>
function submitForm() { 
    var http = new XMLHttpRequest();
    http.open("POST", document.getElementById('the_url').innerHTML, true);
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    var token = document.getElementById('csrf').innerHTML;
    http.setRequestHeader('x-csrf-token', token);
    var params = `csrf_token=` + token;
    http.send(params);
    http.onreadystatechange = function() {
        if (http.readyState == 4) { 
            document.querySelector('#list-wrapper').innerHTML = http.responseText;      
        }
    }
} submitForm();
</script>

A little explanation: xhr is the way to go, I've put the actual list in a separate template so it wont interfere with the pages addon.

Csrf token is required for the request (actually I haven't tried without it as i've started with a normal form submit and stripped it back)

{game_type_filter} variable is editable on the page's entry view (I will probably make it a dropdown or something later)

"the_url" variable represents the other template which can be filtered with its url to get the right set of results, post with xhr, fill the response into the div where the list should be and thats it.