I'm trying to build a custom post library with multiple filters on a Wordpress site. I'm using Elementor builder which has the option for a custom query filter (which is an convenient way to use wp_query()).

Just a small disclaimer - this might not be the best approach, I'm open to starting anew.

My idea is:

  • user makes selection on one of the filters
  • refresh page and update url parameter with user selection
  • get url parameters and modify wp_query that filters the posts

This is what I have so far:

HTML:

<div class="form-container">
  <div>
    <label for="field1">Field 1:</label>
    <select id="field1" onchange="updateURLParams()">
      <option value="" disabled selected>Select type</option>
      <option value="type1">Type 1</option>
      <option value="type2">Type 2</option>
      <option value="type3">Type 3</option>
    </select>
  </div>

  <div>
    <label for="field2">Field 2:</label>
    <select id="field2" onchange="updateURLParams()">
      <option value="" disabled selected>Sort by</option>
      <option value="date_asc">Date (oldest first)</option>
      <option value="date_desc">Date (newest first)</option>
    </select>
  </div>

  <div>
    <label for="field3">Field 3:</label>
    <input type="text" id="field3" placeholder="Enter keywords here" onkeypress="handleInputKeyPress(event)">
  </div>
</div>

JS:

<script>
function updateURLParams() {
  const field1Value = encodeURIComponent(document.getElementById("field1").value);
  const field2Value = encodeURIComponent(document.getElementById("field2").value);
  const field3Value = encodeURIComponent(document.getElementById("field3").value);

  const params = new URLSearchParams(window.location.search);

  if (field1Value) {
    params.set("type", field1Value);
  } else {
    params.delete("type");
  }

  if (field2Value) {
    params.set("sort", field2Value);
  } else {
    params.delete("sort");
  }

  if (field3Value) {
    params.set("keyword", field3Value);
  } else {
    params.delete("keyword");
  }

  const newURL = window.location.pathname + "?" + params.toString();
  window.history.replaceState({}, "", newURL);
  window.location.reload();
}

function handleInputKeyPress(event) {
  if (event.key === "Enter") {
    updateURLParams();
  }
}

window.addEventListener("DOMContentLoaded", () => {
  const params = new URLSearchParams(window.location.search);
  const field1Value = params.get("type");
  const field2Value = params.get("sort");
  const field3Value = params.get("keyword");

  if (field1Value) {
    document.getElementById("field1").value = field1Value;
  }

  if (field2Value) {
    document.getElementById("field2").value = field2Value;
  }

  if (field3Value) {
    document.getElementById("field3").value = field3Value;
  }
});

</script>

Then after the page is refreshed:

function getURLParameters() {
    $parameters = array();

    if (isset($_GET['sort']) && ($_GET['sort'] === 'date_desc' || $_GET['sort'] === 'date_asc')) {
        $parameters['sort'] = $_GET['sort'];
    } else {
        $parameters['sort'] = 'date_desc';
    }

    $validTypes = array('type1', 'type2', 'type3');
    if (isset($_GET['type']) && in_array($_GET['type'], $validTypes)) {
        $parameters['type'] = $_GET['type'];
    }

    if (isset($_GET['keyword'])) {
        $parameters['keyword'] = sanitize_text_field($_GET['keyword']);
    }

    return $parameters;
}

add_action('elementor/query/custom_filter', function($query) {
    $urlParameters = getURLParameters();

    $args = array(
        'post_type' => 'custom-type', 
    );

    $validTypes = array('type1', 'type2', 'type3');
    if (isset($urlParameters['type']) && in_array($urlParameters['type'], $validTypes)) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'type_list',
                'field' => 'slug',
                'terms' => $urlParameters['type'],
            ),
        );
    }

    if (isset($urlParameters['keyword']) && !empty($urlParameters['keyword'])) {
        $args['s'] = $urlParameters['keyword'];
    }

    if (isset($urlParameters['sort']) && ($urlParameters['sort'] === 'date_desc' || $urlParameters['sort'] === 'date_asc')) {
        if ($urlParameters['sort'] === 'date_asc') {
            $args['order'] = 'ASC';
        } else {
            $args['order'] = 'DESC';
        }
        $args['orderby'] = 'date';
    }

    $query->query($args);
});

This code fails to run with the error from the title.

What can I do to prevent the error?

Is it safe to bypass the error in this case?

0

There are 0 best solutions below