Tag: php

When I select the category from the dropdown menu, it updates correctly in the input field. Ideally, it should update the recipe filter in recipeIndex.php.

I’ve tried wrapping the input in a form with method “get” but that still doesn’t work.

The HTML is in an HTML widget on the Recipe Index page. The CSS, JavaScript and PHP code are in separate snippets (I used the Woody Snippets WordPress plugin https://wordpress.org/plugins/insert-php/)

Please help.

HTML

      <div class="dropdown">
        <div class="select">
          <span class="select_span">Select Category</span>
          <i class="fa fa-chevron-down"></i>
        </div>
        <form action="" method="get">  
        <input type="hidden" name="category" id="category">
        </form>
        <ul class="dropdown-menu" id="recipeDropdown">
            <li id="All" name="All" value="All">All</li>
          <li id="Vegan" name="Vegan" value="Vegan">Vegan</li>
          <li id="Vegetarian" name="Vegetarian" value="Vegetarian">Vegetarian</li>
        </ul>
      </div>
   </div> 

CSS

    
.dropdown_container {
  width: 160px;
}

.select {
    width: 160px;
}

/*Styling Selectbox*/
.dropdown {
  width: 160px;
  display: inline-block;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 0 2px rgb(204, 204, 204);
  transition: all .5s ease;
  position: relative;
  font-size: 14px;
  color: #474747;
  height: 100%;
  text-align: left
}
.dropdown .select {
    cursor: pointer;
    display: block;
    padding: 10px;
}
.dropdown .select > i {
    font-size: 13px;
    color: #888;
    cursor: pointer;
    transition: all .3s ease-in-out;
    float: right;
    line-height: 15px
}
.dropdown:hover {
    box-shadow: 0 0 4px rgb(204, 204, 204)
}
.dropdown:active {
    background-color: #f8f8f8
}
.dropdown.active:hover,
.dropdown.active {
    box-shadow: 0 0 4px rgb(204, 204, 204);
    border-radius: 2px 2px 0 0;
    background-color: #f8f8f8
}
.dropdown.active .select > i {
    transform: rotate(-90deg)
}
.dropdown .dropdown-menu {
    width: 100%;
    position: absolute;
    background-color: #fff;
    left: 0;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    border-radius: 0 1px 2px 2px;
    overflow: hidden;
    display: none;
    overflow-y: auto;
    z-index: 9
}
.dropdown .dropdown-menu li {
    transition: all .2s ease-in-out;
    cursor: pointer
} 
.dropdown .dropdown-menu {
    padding: 0;
    list-style: none
}
.dropdown .dropdown-menu li:hover {
    background-color: #f2f2f2
}
.dropdown .dropdown-menu li:active {
    background-color: #e2e2e2
}

JavaScript

var $ = jQuery;

    $('.dropdown').click(function () {
        $(this).attr('tabindex', 1).focus();
        $(this).toggleClass('active');
        $(this).find('.dropdown-menu').slideToggle(300);
    });
    $('.dropdown').focusout(function () {
        $(this).removeClass('active');
        $(this).find('.dropdown-menu').slideUp(300);
    });
    $('.dropdown .dropdown-menu li').click(function () {
        var value = $(this).attr("value");
        $("input(name='category')").val(value);
        $(this).parents('.dropdown').find('span').text($(this).text());
        $(this).parents('.dropdown').find('input').attr('value', $(this).attr('id'));
    });

PHP

// Posts or Portfolio Widget
add_action( 'elementor/query/recipe-index-filter', function( $query ) {
    // Modify the posts query here
    $category =  $_GET('category');
    $query->set( 'category_name', $category );
} );