2013-12-20 87 views
0

我正在研究一个项目,该项目需要比较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 URL?

前端更新:

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

查看比较的产品,在这个部分,我需要从阿贾克斯会议取得网址。

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

是WordPress的? –

+0

是的,是wordpress的一部分。我在一个自定义循环上工作。在循环页面上,我提供了产品的所有信息,然后进行排序数据的表格视图。 – Foxsk8

+0

它位于前端还是后端?你可以添加一些你迄今为止制作的代码吗? –

回答

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以来,您也拥有可收藏的网址。

这也适用,而无需任何的JavaScript(当然人们仍然可以添加JavaScript表单验证 - 也许,以确保至少两个复选框被选中之前比较可以使用。)

+0

但是如果查看比较产品是在其他页面上,而不是在同一页面中,哪里找不到产品?例如:products.php - 产品与按钮列表,比较。其他页面是ex。 catalog.php或主整体标题,我们需要放置“查看比较产品”。您的解决方案适用于单页面查看。也许使用cookies?存储,创建,更新,删除Cookie? – Foxsk8

+0

@ Foxsk8 GET端点是单页还是其他页无关紧要。所有检查过的复选框的值都将在'$ _GET ['compare']'中传递。在这种情况下,您只需将产品ID设置为复选框中的'value'属性即可。当你进入你的比较页面时,所有检查过的产品ID值都可以在'$ _GET ['compare']'中找到。 –

+0

Probelm解决了。我需要使用cookie,后者可以在全局按钮“比较产品”上获得比较网址,其中所有发布的获取ID都存储在cookie上供以后在所有站点上使用。问题是在前端部分设置全局leter使用url。 :) – Foxsk8

1

首先,对于收集id并附加到链接不需要使用AJAX。

您需要的解决方案需要在链接上设置事件处理程序。这将是理想的使用没有JQuery的Javascript,但是因为您已经在使用它并讨论可以在链接上设置事件处理程序的数据属性,然后使用JQuery data()方法获取id,最后将其附加到最终链接。您可以阅读关于它here

更好的解决方案将使用表格。 @Mike Brant刚刚提交了我会推荐使用的这种解决方案。

0

这里是最后的代码,这为书签的作品,比较或添加到购物车基本功能:

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>