On the face of it this seems - to my client - like a simple request (!), but I'm wondering how to go about it ... I already have a template which supports
1. sorting - using this method https://www.couchcms.com/docs/advanced-tutorial/list-view.html and
2. filtering by tag - using this method https://www.couchcms.com/forum/viewtopic.php?f=2&t=9243&p=19515 - the tags are set up as a relation.
There are more details about my use-case in a previous posting: https://www.couchcms.com/forum/viewtopic.php?f=4&t=11262

The request is for 2 checkboxes on the front end which when checked will ensure that certain cloned pages (say, type=x and/or type=y) which are normally excluded will be included in the listing. The listing may already be filtered/sorted (by the current criteria) and then have type=x and/or type=y included OR may initially include type=x and/or type=y and then be filtered/sorted by the current criteria.

So, the user has a listing that is filtered and sorted and he now checks one of the boxes to include type=X - we want the list to remain filtered and sorted and to now include type=X. I can see that I will need to add another parameter to the querystring - something like this:

<a href="<cms:add_querystring k_page_link "tag=<cms:show my_tag />&sort=date&composer=<cms:show my_composer />&include1=<cms:show my_checkbox />" />" >APPLY</a>

BUT how will the value of the checkbox will be retained on the screen after the newly filtered results are displayed when the user has clicked APPLY?

EDIT: of course I wasn't thinking the thing through fully - the checkboxes will need to be form input fields - will this play nicely with adding parameters to querystrings?

[trendoman]

The request is for 2 checkboxes on the front end which when checked will ensure that certain cloned pages (say, type=x and/or type=y) which are normally excluded will be included in the listing.

So, on fresh page load these checkboxes are always empty and appear checked only if url has them?

@trendoman, this is all just theory at the moment as I decide if this can be done in practise! I wasn't sure about being able to combine form input for additional filtering with everything else that's going on with the tags and adding parameters to the querystring ... i.e. for me it all seems to be getting a bit out of hand!

[KK]

Hi,

BUT how will the value of the checkbox will be retained on the screen after the newly filtered results are displayed when the user has clicked APPLY?

Please try the following sample form -

Code: Select all

<form method='get' action="">
    <label for="hello">
        <input type="checkbox" name="hello" id="hello" <cms:if "<cms:gpc 'hello' />">checked</cms:if> value="1">
        Hello
    </label>
    
    <label for="world">
        <input type="checkbox" name="world" id="world" <cms:if "<cms:gpc 'world' />">checked</cms:if> value="1">
        World
    </label>
    
    <br>
    <button type='submit'>ok</button>
<form>

As you can see, it is a regular HTML form (as opposed to being a Couch generated one using <cms:form>). Submitting it adds to the URL the name (and value) of the selected checkboxes.

Our code looks out for those values in the querystring and sets the 'checked' parameter of the checkboxes.
This is how we can persist the selections (set 'checked' depending on the querystring parameters).

Coming to your use-case, the URL will already potentially contain two other parameters. Simply submitting the form will discard those parameters and add only the checkboxes, so we cannot use the form as is.

You need to use JS to hook onto the submit event and then craft the target URL of the form to include those two parameters (and also the selected checkboxes of the form itself).

Hope it helps.

[trendoman]

I have crafted a solution without JS, based on cms:form and cms:input.


First, I remember current querystring parameters and build current_url variable.
Next, I make the form to submit itself always to that current_url via action parameter.

Once the form is successfully submitted, I must add selected options (include1 and include2) to the new url and redirect to this new url.
Finally, I feed the checkbox with selected values, based on their presence in url. Below is complete listing:

Code: Select all

<h1><a href="<cms:show k_page_link />" >Reset experiment</a></h1>

<cms:set tag = "<cms:gpc 'tag' />" />
<cms:set sort = "<cms:gpc 'sort' />" />
<cms:set composer = "<cms:gpc 'composer' />" />

<cms:set current_url = k_page_link />
<cms:if tag>
    <cms:set current_url = "<cms:add_querystring current_url "tag=<cms:show tag />" />" />
</cms:if>
<cms:if sort>
    <cms:set current_url = "<cms:add_querystring current_url "sort=<cms:show sort />" />" />
</cms:if>
<cms:if composer>
    <cms:set current_url = "<cms:add_querystring current_url "composer=<cms:show composer />" />" />
</cms:if>


<cms:form anchor='0' name='include' action=current_url method="post">
    <cms:if k_success>
        <cms:each frm_include sep=','>
            <cms:set current_url = "<cms:add_querystring current_url "<cms:show item />=true" />" scope='global'/>
        </cms:each>
        <cms:redirect url=current_url />
    </cms:if>

    <cms:capture into='opt_selected'>
        <cms:if "<cms:gpc 'include1' />">include1 | </cms:if>
        <cms:if "<cms:gpc 'include2' />">include2 | </cms:if>
    </cms:capture>

    <cms:input type='checkbox' name='include' opt_values='include1 | include2' opt_selected = opt_selected />
    <cms:input type='submit' name='submit' value='Refresh' />
</cms:form>

P.S.:
KK's decision to use regular html form with method='get' is also valid and keeps those checkboxes values in url. I used cms:form and had method='post' + anchor='0' to keep url clean. Also, my decision was to remove include1 & include 2 from url if those are not chosen explicitly, so the url doesn't always keep them for aesthetic purpose.

Using Couch-managed form gives you a ton of control over what happens after form is submitted. You may write in a log that user submitted form, save something to backend, perform operations over submitted values.

Regards

... your time and expertise in replying to me is so much appreciated! I'll try to apply your solution @trendoman (@KK's JS requirements would be a bit too challenging for me) - if I don't get back with a response for a couple of weeks it's because I have a break from work coming up soon ... thanks again

[trendoman]

"Kind words are like honey sweet to the soul and healthy for the body."
You are always welcome