Question

我希望能够通过选择多个产品标签来搜索我的WordPress Woocommerce商店。默认情况下，如果您向产品添加标签，则会在产品页面上显示这些标签，如果您单击标签，则会搜索其他标记为相同的产品。此搜索的结果看起来像这样：

http://localhost/ccloud/?product_tag=option1

如果您手动将其他标记添加到此网址，它会搜索标有这两个选项的产品，如下所示：

http://localhost/ccloud/?product_tag=option1+option2

这很有效，但显然我希望用户能够使用复选框来完成此操作。

我创建了这个表单（不起作用）

<form name="search_by_tag" action=/product_tag.php method="get">
  <input type=checkbox name="option1">Option 1<br>
  <input type=checkbox name="option2">Option 2<br>
  <input type=checkbox name="option3">Option 3<br>
  <input type=checkbox name="option4">Option 4<p>
  <input type=submit value="Search">
</form>

我认为它不起作用，因为它没有正确发送动作。选择多个复选框和搜索的结果如下所示：

http://localhost/product_tag.php?option1=on&option2=on

如何更正网址（第一部分是缺少目录）并删除.php部分等？如果我删除.php扩展名

，它根本不起作用

Answer 1

你必须使用一点JavaScript来完成这项工作，但你可以这样做。

HTML：

<input type="checkbox" class="tags" value="red">Red<br>
<input type="checkbox" class="tags" value="blue">Blue<br>
<form name="search_by_tag" action="/ccloud/" method="get">
  <input type="hidden" id="tags" name="product_tag" />
  <input type="submit" value="Search"/>
</form>

jQuery的：

$(function() {
  $('form').on('submit', function() {
    var tags = [];
    $('.tags:checked').each(function() {
        tags.push($(this).val());
    });
    tags = tags.join(' ');
    if (tags) $('#tags').val(tags);
    else $('#tags').remove();
  });
});

因此，我们正在做的是使用隐藏字段来存储所选标签，并将复选框移出表单。然后，当他们提交时，我们填充隐藏字段，以便它包含在查询字符串中。空格在URL中变为+。

product_tag必须是隐藏字段的名称，操作为/ccloud/，因此您最终会得到您想要的网址。这是jsFiddle的实际操作。

Answer 2

我在您的代码中看到的一些问题：

<form name="search_by_tag" action=/product_tag.php method="get">
  <input type=checkbox name="option1">Option 1<br>
  <input type=checkbox name="option2">Option 2<br>
  <input type=checkbox name="option3">Option 3<br>
  <input type=checkbox name="option4">Option 4<p>
  <input type=submit value="Search">
</form>

type属性应该有引号。此外，您没有设置value属性。要将网址设为/product_tag，您需要删除.php，然后将表单操作设置为完整网站网址这样这应该更接近您想要的内容：

<form name="search_by_tag" action="http://my.great.site/product_tag" method="get">
  <input type="checkbox" name="option1" value="option1">Option 1<br>
  <input type="checkbox" name="option2" value="option2">Option 2<br>
  <input type="checkbox" name="option3" value="option3">Option 3<br>
  <input type="checkbox" name="option4" value="option4">Option 4<p>
  <input type=submit value="Search">
</form>

而且说，你需要添加更多的逻辑 - 通过PHP或JavaScript，如用户dave指出 - 来获得这个集合。一个简单的get不起作用。

将复选框选择附加到URL

2 个答案: