Forum

Thread tagged as: Question

Multiple filter for months

Hello,

I've set up a filter to filter by month. Most of it comes from https://grabapipit.com/blog/user-filtered-product-listing (Thank you, Hussein)

My filter.html template:

<perch:form id="filters" method="get">
    <fieldset>
        <legend>Maand</legend>
        <ul>
            <perch:input id="eventDateTime" type="radio" wrap="li" options="januari,februari,maart,april,mei,juni,juli,augustus,september,oktober,november,december" class="radio" <perch:if exists="selected_maand">value="<perch:forms id="selected_maand" />"</perch:if> />
        </ul>
    </fieldset>
    <perch:forms id="cats_categorie" html="true" />
    <perch:forms id="cats_genre" html="true" />
    <div>
        <input type="submit" value="Apply">
        <a href="<perch:forms id="perch_page_path" />">Clear</a>
    </div>
</perch:form>

In my listing:

                    /* ---------- MONTH ---------- */
                    $januari = "2018-01-01, 2018-01-31";
                    $februari = "2018-02-01, 2018-02-28";
                    $maart = "2018-03-01, 2018-03-31";
                    $april = "2018-04-01, 2018-04-30";
                    $mei = "2018-05-01, 2018-05-31";
                    $juni = "2018-06-01, 2018-06-30";
                    $juli = "2018-07-01, 2018-07-31";
                    $augustus = "2018-08-01, 2018-08-31";
                    $september = "2018-09-01, 2018-09-30";
                    $oktober = "2018-10-01, 2018-10-31";
                    $november = "2018-11-01, 2018-11-30";
                    $december = "2018-12-01, 2018-12-31";

                    if(perch_get('eventDateTime')) {
                        $maand = perch_get('eventDateTime');

                        // filter for greater or equal to
                        $filters[] = [
                            'filter' => 'eventDateTime',
                            'match' => 'between',
                            'value' => $$maand,
                        ];
                    }

I know that it is not the cleanest code, but it works for now. My problem is that I am now using radio buttons, but I would like to be able to select multiple months, so using checkboxes. But I am not sure how to do this. What would be a solution for this?

Thanks, Mike
Mike Hendriks

Mike Hendriks 0 points

  • 2 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

2 years ago

You'd append to $filters[] for each of the filters you want to add.
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

2 years ago

Hello Mike,

Thanks for the mention.

but I would like to be able to select multiple months, so using checkboxes. But I am not sure how to do this. What would be a solution for this?

Similar to the brands example in the blog post, you would use checkboxes with name="eventDateTime[]" instead of name="eventDateTime":

<ul>
    <li>
        <input type="checkbox" id="jan" name="eventDateTime[]" value="january">
        <label for="jan">Januari</label>
    </li>
    <li>
        <input type="checkbox" id="feb" name="eventDateTime[]" value="february">
        <label for="feb">February</label>
    </li>
    <li>
        <input type="checkbox" id="march" name="eventDateTime[]" value="march">
        <label for="march">March</label>
    </li>
    .
    .
    .
    .
</ul>

And you would use $eventDateTime = $_GET['eventDateTime'] instead of $eventDateTime = perch_get('eventDateTime') to get the values from the URL:

if (isset($_GET['eventDateTime'])) {
    $eventDateTime = $_GET['eventDateTime'];
}

The above gets you an array of the selected months.
Mike Hendriks

Mike Hendriks 0 points

2 years ago

Thanks alot, Hussein. I will look into it.
Mike Hendriks

Mike Hendriks 0 points

2 years ago

I now have this code:

                    if(isset($_GET['eventDateTime'])) {
                        if(is_array($_GET['eventDateTime'])) {
                            // ?eventDateTime%5B%5D=
                            // glue together the slugs as 'eventDateTime1,eventDateTime2,eventDateTime3'
                            $selected_eventDateTime = implode(",", $_GET['eventDateTime']);
                        } else {
                            // ?eventDateTime=
                            $selected_eventDateTime = $_GET['eventDateTime'];
                        }
                        // add a filter
                        $filters[] = [
                            'filter' => 'eventDateTime',
                            'match' => 'between',
                            'value' => $selected_eventDateTime,
                        ];
                        PerchSystem::set_var('selected_eventDateTime', $selected_eventDateTime);
                    }

My form:

    <ul>
        <li>
            <div class="form-check">
                <label for="jan" class="form-check-label">
                    <input class="form-check-input" type="checkbox" id="jan" name="eventDateTime[]" value="2018-01-01, 2018-01-31" <perch:if id="eventDateTime[]" match="in" value="{selected_eventDateTime}">checked</perch:if>> Januari
                    <span class="form-check-sign">
                        <span class="check"></span>
                    </span>
                </label>
            </div>
        </li>
        <li>
            <div class="form-check">
                <label for="feb" class="form-check-label">
                    <input class="form-check-input" type="checkbox" id="feb" name="eventDateTime[]" value="2018-02-01, 2018-02-28" <perch:if id="eventDateTime[]" match="in" value="{selected_eventDateTime}">checked</perch:if>> Februari
                    <span class="form-check-sign">
                        <span class="check"></span>
                    </span>
                </label>
            </div>
        </li>
...
...
...

Now I have 2 problems. The checkbox is not checked if an eventDateTime is in the query. Also if I filter by 2 different dates, for example september AND oktober it doesn't work.
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

2 years ago

Also if I filter by 2 different dates, for example september AND oktober it doesn't work.

A good approach here is to hard code the values in the filter and check you're getting the results you expect.

You are using 'match' => 'between', and allowing the user to select more than two dates. If you're using between, then value can only have 2 values (a max and a min) as far as I know:

$filters[] = [
'filter' => 'eventDateTime',
'match' => 'between',
'value' => $min_date . ',' . $max_date,
];