Question

我正在开发一个需要能够比较2个或更多产品的项目。并且客户需要具有将直接链接到此类比较的页面的能力。

我选择实施它的方式是使用URL：/compare?id=5-20-100（用于比较ID为5,20和100的产品）。

基本上整个事情都被这个脚本解析了：

$list = explode( '-', $_GET['id'] );

$myarray = $list;

$args = array(
   'post_type' => 'products',
   'post__in'      => $myarray
);
// The Query
$the_query = new WP_Query( $args );

为了将产品添加到列表中，我打算使用会话，其中通过AJAX添加项目（我使用的是jQuery，这很重要）。所以，我得到的问题是：

当用户点击“比较此产品”时，我需要获取此产品的ID（可能来自html数据属性product-id="100"）。

如何设置此AJAX会话？更准确地说：当用户点击“比较项目”按钮时，我是如何转到/compare?id=5-20-100网址的？

前端更新：

<a href="#" data-id="5">Product 1 add to compare</a>
<a href="#" data-id="20">Product 2 add to compare</a>

查看比较产品，在这部分我需要从ajax会话中获取url。

<a href="compare?id=5-20">View compare products</a>

Answer 1

我的建议是使用带有数组访问符号的复选框输入。

<form id="compare" method="get" action="/path/to/compare.php" enctype="application/x-www-form-urlencoded">
<input type="checkbox" name="compare[]" value="[ID POPULATED VIA PHP]" />
<input type="checkbox" name="compare[]" value="[ID POPULATED VIA PHP]" />
<input type="checkbox" name="compare[]" value="[ID POPULATED VIA PHP]" />
...
<input type="submit" value="Compare Selected Items" />
</form>

这会调用以下URL：

http://yoursite.com/path/to/compare.php?compare[]=ID1&compare[]=ID2&compare[]=ID3

您可以轻松访问在$_GET['compare']数组中选择的所有比较ID。您使用GET后也有可收藏的URL。

这也可以在不需要javascript的情况下工作（当然，当然还可以添加javascript表单验证 - 也许是为了确保在比较之前至少选择了两个复选框。）

Answer 2

首先，收集id并附加到链接将不需要使用AJAX。

您需要的解决方案需要在链接上设置事件处理程序。在没有JQuery的情况下使用Javascript是理想的，但是你已经在使用它并谈论数据属性，你可以在链接上设置eventhandlers，然后使用JQuery data()方法获取id，然后最后将它附加到最后一个链接上的href属性。你可以阅读它here

更好的解决方案是使用表单。 @Mike Brant刚刚提交了我建议使用的解决方案。

Answer 3

这是最终代码，适用于书签，比较或添加到购物车基本功能：

JS：

cookie_data_load = $.cookie('compare_data');
    $('.view_compare').attr("href", "http://localhost/auto/cart/?id=" + cookie_data_load);


    var fieldArray = [];
    $( ".aaddtocart" ).click(function(){
        fieldArray.push($(this).data("compare"));
        var unique=fieldArray.filter(function(itm,i,a){
            return i==fieldArray.indexOf(itm);
        });

        var str = unique.join('-');
        $.cookie('compare_data', str, { expires: 7, path: '/' });
        cookie_data = $.cookie('compare_data');
        console.log(str);
        console.log(unique);
        alert(unique);
        $('.view_compare').attr("href", "http://localhost/auto/cart/?id=" + cookie_data);
        return false;
    });

Wordpress模板：

<?php

$list = explode( '-', $_GET['id'] );

$myarray = $list;

$args = array(
   'post_type' => 'products',
   'post__in'      => $myarray
);
// The Query
$the_query = new WP_Query( $args );

?>

<?php if ( $the_query->have_posts() ) : ?>

  <!-- pagination here -->

  <!-- the loop -->
  <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <h2><?php the_title(); ?></h2>
  <?php endwhile; ?>
  <!-- end of the loop -->

HTML按钮：

<a href="http://localhost/auto/cart/?id=24-40" class="view_compare">Show compare products</a>
<a href="#" class="aaddtocart" data-compare="<?php echo get_the_ID(); ?>">Add to compare list</a>

产品比较会话

3 个答案: