1

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.

2
  • I've just found out that dynamic doesn't really work with the "pages" addon - which is something I've actually needed to remove template group names from urls... so the ajax form option is not the way to go (tested it, and when the list of entries is set to dynamic no all shows fine, when set to dynamic yes - the items only show on the default template page, but it fails to load all entries when viewing on pages that have shortened url with the pages addon
    – bambadamm
    Apr 1 at 20:09
  • I think i've got around the ajax problem by moving the part of the page which contains the list into its own template and simply loading that in the page with xmlhttprequest when the page loads - so the "pages" addon don't affect the lists behaviour
    – bambadamm
    Apr 1 at 23:22

1 Answer 1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.