產品比較會話

我正在研究一個項目，該項目需要比較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>

來源

2013-12-20 Foxsk8

是WordPress的？ –

是的，是wordpress的一部分。我在一個自定義循環上工作。在循環頁面上，我提供了產品的所有信息，然後進行排序數據的表格視圖。 – Foxsk8

它位於前端還是後端？你可以添加一些你迄今爲止製作的代碼嗎？ –

我的建議是使用帶有數組訪問表示法的複選框輸入。

<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表單驗證 - 也許，以確保至少兩個複選框被選中之前比較可以使用。）

來源

2013-12-20 22:48:24

但是如果查看比較產品是在其他頁面上，而不是在同一頁面中，哪裏找不到產品？例如：products.php - 產品與按鈕列表，比較。其他頁面是ex。 catalog.php或主整體標題，我們需要放置「查看比較產品」。您的解決方案適用於單頁面查看。也許使用cookies？存儲，創建，更新，刪除Cookie？ – Foxsk8

@ Foxsk8 GET端點是單頁還是其他頁無關緊要。所有檢查過的複選框的值都將在'$ _GET ['compare']'中傳遞。在這種情況下，您只需將產品ID設置爲複選框中的'value'屬性即可。當你進入你的比較頁面時，所有檢查過的產品ID值都可以在'$ _GET ['compare']'中找到。 –

Probelm解決了。我需要使用cookie，後者可以在全局按鈕「比較產品」上獲得比較網址，其中所有發佈的獲取ID都存儲在cookie上供以後在所有站點上使用。問題是在前端部分設置全局leter使用url。 :) – Foxsk8

首先，對於收集id並附加到鏈接不需要使用AJAX。

您需要的解決方案需要在鏈接上設置事件處理程序。這將是理想的使用沒有JQuery的Javascript，但是因爲您已經在使用它並討論可以在鏈接上設置事件處理程序的數據屬性，然後使用JQuery data()方法獲取id，最後將其附加到最終鏈接。您可以閱讀關於它here

更好的解決方案將使用表格。 @Mike Brant剛剛提交了我會推薦使用的這種解決方案。

來源

2013-12-20 22:51:02

這裏是最後的代碼，這爲書籤的作品，比較或添加到購物車基本功能：

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>

來源

2014-01-06 14:42:29 Foxsk8

產品比較會話

回答

相關問題