Question

简介

我正在制作一个非常简单的电子商务网站，我遇到了方面导航问题，网络周围的许多网站都在使用这种技术，用户可以通过选择品牌，颜色，尺寸或价格范围缩小他的选择范围。我正在使用原始PHP，只是我的网站的测试运行。

我在左侧显示了我的过滤器让我们说（品牌/类型/颜色），我给了他们一个锚

品牌

 <a href="index.php?brand=nike">NIKE</a>

颜色

    <a href="index.php?color=blue">Blue</a>
    <a href="index.php?color=white">White</a>

类型

    <a href="index.php?type=shoe">Shoe</a>
    <a href="index.php?type=shirt">Shirt</a>

正如您所看到的，我正在逐个传递我的值并在我的PHP代码中，我使用以下查询来制作

$sql_query = "SELECT * FROM products ";


// add fileters e.g. from $_GET array
$i = 0;

foreach($filter_array as $filter -> $filter_value)
{
   if( ! $i)
   {
      $sql_query .= "WHERE ";
   }
   else
   {
      $sql_query .= " AND ";
   }

   $sql_query .= $fliter . " = '" . $filter_value . "'";

   $i++;       
}

问题如何在URL中获取多个值并读取它们并在我的选择查询中使用它们。请建议：

 www.abc.com/index.php?brand=nike&color=blue&type=shoe

奖金问题：） 使用上述过滤器后，如何在页面中使用价格范围？

Answer 1

如果要使用get值创建sql查询，可以使用以下代码：

我使用过“echo $ query。$ condition;”检查查询

$cnt = count($_GET);
$query = "SELECT * FROM table";
$condition = "";
if($cnt > 0){
    $condition .= " WHERE ";
}
$i = 0;
foreach($_GET as $key => $value){
    $condition .= $key."=".$value;
    $i++;
    if($i < ($cnt)){
            $condition .= " AND ";
    }

}
echo $query . $condition;

Answer 2

纯html解决方案是创建同时传递多个变量的链接。 How to pass multiple variables。我认为最好是使用一些Javascript来实现这一点。

您目前正在做的是每次点击链接时在网址中传递一个变量。

我要做的是修改我的标签的onclick事件，所以一旦点击它们，他们就会修改页面的url以添加额外的元素，并可能提交表单。

您使用的是任何javascript框架吗？

Answer 3

我们需要使用javascript解决此问题，而不是使用HREF标记。使用Jquery和data属性，我们可以添加我们想要的类型并记住它们。

在我在这里制作的示例中，我从URL获取当前属性，将它们存储在JS对象中，然后添加单击值以创建新URL。在此之后您需要做的就是将用户重定向到该URL。

您还可以在PHP中提取这些参数，并使用href属性并动态添加它们。但这是一个JS示例。

＆＃13;

$('a').on('click', function(e) {
  var URLparameters = getURLParameters("http://www.test.com?brand=nike");
  
  var filter = {type: URLparameters['type'], color: URLparameters['color'], brand: URLparameters['brand']};
  
  filter[$(this).data('type')] = $(this).data('value');
 
  //this is simplified off course you need to make this into a function that loops over all properties
  var newUrl = "http://www.test.com?type=nike".split("?")[0] + "?type=" + filter.type + "&brand=" + filter.brand + "&color=" + filter.color;
  
  alert(newUrl);
  
});
  
  
function getURLParameters(url){

    var result = {};
    var searchIndex = url.indexOf("?");
    if (searchIndex == -1 ) return result;
    var sPageURL = url.substring(searchIndex +1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)
    {       
        var sParameterName = sURLVariables[i].split('=');      
        result[sParameterName[0]] = sParameterName[1];
    }
    return result;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li style="list-style-type: none;">
    <h1>Brand</h1>
    <p>
      <a data-type="brand" data-value="nike" href="#">NIKE</a>
    </p>
  </li>

  <li style="list-style-type: none;">
    <h1>Color</h1>
    <p>
      <a data-type="color" data-value="blue" href="#">Blue</a>
      <br/>
      <a data-type="color" data-value="white" href="#">White</a>
    </p>
  </li>
  <li style="list-style-type: none;">
    <h1>Type</h1>
    <p>
      <a data-type="type" data-value="shoe" href="#">Shoe</a>
      <br/>
      <a data-type="type" data-value="shirt" href="#">Shirt</a>
    </p>
  </li>
</ul>

＆＃13;

将值传递给URL并在搜索中使用它们

3 个答案: