Добавление Сортировать по цене и Сортировать по названию

Question

Я создал сайт, продающий компоненты. Каждый компонент имеет 9 продуктов. Как добавить кнопку выпадающего списка, которая может организовать показ продукта по его цене или имени?

<?php 
$query = "SELECT * FROM products ORDER BY id ASC"; 
$result = mysqli_query($connect, $query); 
if(mysqli_num_rows($result) > 0) 
{ 
while($row = mysqli_fetch_array($result)) 
{ 
?> 
<div class="col-md-4"> 
<form method="post" action="shop.php?action=add&id=<?php echo $row["id"]; ?>"> 
<div style="border: 1px solid #eaeaec; margin: -1px 19px 3px -1px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding:10px;" align="center"> 
<h5 class="text-info"><?php echo $row["p_name"]; ?></h5> 
<img src="<?php echo $row["image"]; ?>" class="img-responsive"> 
<h5 class="text-danger">$ <?php echo $row["price"]; ?></h5> 
<div class="col-xs-8"> 
<input type="text" name="quantity" class="form-control" value="1"> 

</div> 
<input type="hidden" name="hidden_name" value="<?php echo $row["p_name"]; ?>"> 
<input type="hidden" name="hidden_price" value="<?php echo $row["price"]; ?>"> 
<input type="submit" name="add" class="btn btn-primary" value="Add to Cart" align="right"> 

</div> 
</form> 
</div> 
<?php 
} 
} 
?> 

<?php 
} 
?> 
</div> 
</div> 

Answer 1

Может быть, вы могли бы использовать Javascript, а также и добавить несколько полей выбора, чтобы дать пользователям возможность выбрать атрибут, они хотят, чтобы сортировать, а также направление сортировки, как в ASC или DESC. Нижеследующий фрагмент кода может пролить некоторый свет:

<?php 
    $query  = "SELECT * FROM products ORDER BY id ASC"; 
    $result  = mysqli_query($connect, $query); 

    // CREATE VARIABLES TO HOLD THE SELECT OPTIONS VALUES FOR THE SORTING... 
    $sortParam1 = 'price'; 
    $sortParam2 = 'name'; 
    $sortDir1 = 'ASC'; 
    $sortDir2 = 'DESC'; 

    // START BUILDING THE OUTPUT... 
    $output  = "<div class='col-md-12'>";   //<== WRAPPER FOR SORING & DIRECTION BOXES 
    $output .= "<form method='post' action='' id='sorting_form'>"; //<== FORM FOR THE SORTING: SUBMITS TO SAME SCRIPT 

    // SORTING 
    $output .= "<div class='col-md-6'>"; 
    $output .= "<select name='sorting' id='sorting'class='form-control'>"; 
    $output .= "<option value='id'>Sorting</option>"; 
    $output .= "<option value='{$sortParam1}'>{$sortParam1}</option>"; 
    $output .= "<option value='{$sortParam2}'>{$sortParam2}</option>"; 
    $output .= "</select>"; 
    $output .= "</div>"; 

    // DIRECTION 
    $output .= "<div class='col-md-6'>"; 
    $output .= "<select name='direction' id='direction'class='form-control'>"; 
    $output .= "<option value='ASC'>Sort Direction</option>"; 
    $output .= "<option value='{$sortDir1}'>{$sortDir1}</option>"; 
    $output .= "<option value='{$sortDir2}'>{$sortDir2}</option>"; 
    $output .= "</select>"; 
    $output .= "</div>"; 

    $output .= "</form>";  //<== CLOSE SORTING FORM... 
    $output .= "</div>";   //<== CLOSE WRAPPER... 
    $rowData = ""; 

    // WE USE JQUERY BELOW TO SUBMIT THE SORTING FORM ONCE USER 
    // SELECTS ANY OPTION FROM.... SO WE NOW HANDLE THAT SCENARIO HERE USING PHP 
    if(isset($_POST['sorting']) || isset($_POST['direction'])){ 
     $sortDirection = isset($_POST['direction']) ? $_POST['direction'] : $sortDir1; // DEFAULTS TO ASC 
     $sortField  = isset($_POST['sorting'])  ? $_POST['sorting']  : 'id';   // DEFAULTS TO id 

     $query   = "SELECT * FROM products ORDER BY {$sortField} {$sortDirection}"; 
     $result   = mysqli_query($connect, $query); 
    } 

    if(mysqli_num_rows($result) > 0){ 
     while($row = mysqli_fetch_array($result)) { 
      // USE HEREDOC TO CAPTURE THE DATA WITHIN THE LOOP... 
      $rowData .=<<<R_DATA 
      <div class="col-md-4"> 
       <form method="post" action="shop.php?action=add&id={$row["id"]}"> 
        <div style="border: 1px solid #eaeaec; margin: -1px 19px 3px -1px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding:10px;" align="center"> 
         <h5 class="text-info">{$row["p_name"]}</h5> 
         <img src="{$row["image"]}" class="img-responsive"> 
         <h5 class="text-danger">\$ {$row["price"]}</h5> 
         <div class="col-xs-8"> 
          <input type="text" name="quantity" class="form-control" value="1"> 
         </div> 
         <input type="hidden" name="hidden_name" value="{$row["p_name"]}"> 
         <input type="hidden" name="hidden_price" value={$row["price"]}"> 
         <input type="submit" name="add" class="btn btn-primary" value="Add to Cart" align="right"> 
        </div> 
       </form> 
      </div> 
R_DATA; 

     } // CLOSE WHILE LOOP 
    } // CLOSE IF CONDITIONAL LOGIC 

    // ADD THE DATA GATHERED FROM WHILE LOOP ($rowData) TO THE OUTPUT: $output 
    $output .= $rowData; 
    $output .= "</div>\n</div>"; // THESE APPEAR IN YOUR CODE BUT SEEM IRRELEVANT HERE... 

    // DISPLAY THE OUTPUT 
    echo $output; 

?> 
<!-- ENTER JAVASCRIPT: JQUERY --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script> 
<script type="text/javascript"> 
    (function($){ 
     $(document).ready(function(e){ 
      var sortForm  = $("#sorting_form"); 
      var sortBox   = $("#sorting"); 
      var directionBox = $("#direction"); 
      var bothBoxes  = sortBox.add(directionBox); 

      // IF EITHER OF THE SORTING OR DIRECTION IS CHANGED 
      // JUST SUBMIT THE FORM 
      bothBoxes.on("change", function(evt){ 
       sortForm.submit(); 
      }); 

     }); 
    })(jQuery); 
</script>