User Items Filter and Public Profile Filter Implementation

In this guide we will implement new Osclass 8.3 features - filters of listings in User Items page and Public Profile page. These filters allow users to quickly refine items in case there is many of them.

User Items Filter

Go to your theme folder, open user-items.php and place there (ideally above items) following code:

<form name="user-items-search" action="<?php echo osc_base_url(true); ?>" method="get" class="user-items-search-form nocsrf">
  <input type="hidden" name="page" value="user"/>
  <input type="hidden" name="action" value="items"/>

  <?php osc_run_hook('user_items_search_form_top'); ?>
  
  <div class="control-group">
    <label class="control-label" for="sItemType"><?php _e('Item type', 'alpha'); ?></label>
    
    <div class="controls">
      <?php UserForm::search_item_type_select(); ?>
    </div>
  </div>
  
  <div class="control-group">
    <label class="control-label" for="sPattern"><?php _e('Keyword', 'alpha'); ?></label>
    
    <div class="controls">
      <?php UserForm::search_pattern_text(); ?>
    </div>
  </div>
  
  <div class="control-group">
    <label class="control-label" for="sCategory"><?php _e('Category', 'alpha'); ?></label>
    
    <div class="controls">
      <?php UserForm::search_category_select(); ?>
    </div>
  </div>

  
  <?php osc_run_hook('user_items_search_form_bottom'); ?>
  
  <div class="actions">
    <button type="submit" class="btn btn-primary"><?php _e('Apply', 'alpha'); ?></button>
  </div>
</form>

Stylesheet update (style.css):

/* USER ITEMS SEARCH */
form[name="user-items-search"] {display:flex;flex-direction: row; align-items: flex-end;margin:2px 0 14px 0;width:100%;padding-right:15px;}
form[name="user-items-search"] .control-group {width:fit-content;padding:0 12px 6px 0;}
form[name="user-items-search"] .control-group label {float:left;width:100%;text-align:left;margin:0 0 2px 0;}
form[name="user-items-search"] .control-group .controls {float:left;width:100%;margin:0;}
form[name="user-items-search"] .control-group .controls input, form[name="user-items-search"] .control-group .controls select {float:left;width:100%;margin:0;max-width:100%;min-width:unset;}
form[name="user-items-search"] .actions {width:fit-content;padding:0 0 6px 0;}
form[name="user-items-search"] .actions button {white-space:nowrap;font-weight:600;}

@media screen and (max-width: 540px) {
  form[name="user-items-search"] {flex-wrap: wrap;}
  form[name="user-items-search"] .control-group {width:50%;}
}

Public Profile Filter

Go to your theme folder, open user-public-profile.php and place there (ideally above items) following code:

<form name="user-public-profile-search" action="<?php echo osc_base_url(true); ?>" method="get" class="user-public-profile-search-form nocsrf">
  <input type="hidden" name="page" value="user"/>
  <input type="hidden" name="action" value="pub_profile"/>
  <input type="hidden" name="id" value="<?php echo osc_esc_html($user['pk_i_id']); ?>"/>

  <?php osc_run_hook('user_public_profile_search_form_top'); ?>
  
  <div class="control-group">
    <label class="control-label" for="sPattern"><?php _e('Keyword', 'alpha'); ?></label>
    
    <div class="controls">
      <?php UserForm::search_pattern_text(); ?>
    </div>
  </div>
  
  <div class="control-group">
    <label class="control-label" for="sCategory"><?php _e('Category', 'alpha'); ?></label>
    
    <div class="controls">
      <?php UserForm::search_category_select(); ?>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="sCity"><?php _e('City', 'alpha'); ?></label>
    
    <div class="controls">
      <?php UserForm::search_city_select(); ?>
    </div>
  </div>
  
  <?php osc_run_hook('user_public_profile_search_form_bottom'); ?>
  
  <div class="actions">
    <button type="submit" class="btn btn-primary"><?php _e('Apply', 'alpha'); ?></button>
  </div>
</form>

Stylesheet update (style.css):

/* USER PUBLIC PROFILE SEARCH */
form[name="user-public-profile-search"] {display:flex;flex-direction: row; align-items: flex-end;margin:15px 0 0px 0;width:100%;padding:0 15px;}
form[name="user-public-profile-search"] .control-group {width:fit-content;padding:0 12px 6px 0;}
form[name="user-public-profile-search"] .control-group label {float:left;width:100%;text-align:left;margin:0 0 2px 0;}
form[name="user-public-profile-search"] .control-group .controls {float:left;width:100%;margin:0;}
form[name="user-public-profile-search"] .control-group .controls input, form[name="user-public-profile-search"] .control-group .controls select {float:left;width:100%;margin:0;max-width:100%;min-width:unset;}
form[name="user-public-profile-search"] .actions {width:fit-content;padding:0 0 6px 0;}
form[name="user-public-profile-search"] .actions button {white-space:nowrap;font-weight:600;}

@media screen and (max-width: 540px) {
  form[name="user-public-profile-search"] {flex-wrap: wrap;}
  form[name="user-public-profile-search"] .control-group {width:50%;}
}
/code>

Available Filter Options to Customize

There are more filters then included by default. Feel free to customize based on your preference and business need:

• search_pattern_text
• search_category_select
• search_country_select
• search_region_select
• search_city_select
• search_item_type_select

In future, there might be even more available.