jQuery/PHP混搭電子商務功能

Question

我在設計一家商店，並希望加入一種「混搭」功能，讓顧客可以看到哪個上衣與哪個底部和鞋子相配。將有3個關卡，當用戶找到合適的搭配/搭配時，他們點擊購買將所有商品添加到購物車。

我已提請UI圖，試圖在視覺上解釋：

人對如何做到這一點的功能的想法？我猜jQuery會這樣做，但它需要與某種購物車進行整合。任何幫助是極大的讚賞。

Answer 1

自定義功能。需要整個9碼。安裝購物車。在它的旁邊創建一個新表。命名錶'水平'，並在表中，給它3行，'id'，'sid'，'level'。根據您使用的購物車，您可以在'extra'列下的shopping_cart表中聲明某些值。使用靜態變量。 'Level1'，'Level2'，'Level3'。然後創建一個MySQL觸發事件。每次將商品添加到購物車列表中（從後端銷售的商品）。觸發器將使用'id'，將其作爲'sid'插入到'levels'的新表中。我們新的'levels'表中的'id'是unqieu自動遞增值。 'sid'是指原始購物車表中的'商品ID'。現在使用PHP和jQuery。 PHP首先從數據庫中獲取項目，從levels中選擇*，其中level ='Level1'。這將得到所有應該是'level1'的物品，在你的情況下，應該是帽子，圍巾等我想象的東西。確保你爲level2和level 3做同樣的事。當然，創建HTML結構。用'位置：相對'和寬度：10000em構建的三個'行'。然後，每個「項」返回在PHP從我們行的要求，是這樣的：

echo '<ul>'; 
while($row = mysql_fetch_array($query)){ 
    echo '<li style"float:left;width:150px;height:85px;">'; 
} 
echo '</ul>'; 

您可以使用類似工具jQuery的滑塊，以創建每行想要這個效果。

http://jquerytools.org/demos/scrollable/index.html

你將需要包括自定義的javascript/jquery的，以確定位置，並確保「應該具有聚焦元件」總是具有相同的寬度，高度，邊緣和填充與上述一個/在它下面。另外，爲每個正在查看的項目，活動級別2項目，活動級別3項目等添加類似'active-level1-item'的自定義類的內容。

對於View中的每個項目，使用AJAX之類的東西將值發送到您的購物車。你將不得不做一些研究來熟悉它的文檔。

類似的東西。

var Level1Item = $(".activelevel1item").val/text/html(); 
var Level2Item = $(".activelevel2item").val/text/html(); 
var Level3Item = $(".activelevel3item").val/text/html(); 
var levelString = 'level1='+Level1Item+'&level2='+Level2Item+'&level3='+Level3Item; 

$.ajax({ 
    url: 'process_shopping_items.php', 
    type: 'POST', 
    data: levelString, 
    success: function(data){ 
    //do stuff with returned values in our process_shopping_items.php file 
    }, 
    error: function(err){ 
    //there was an error, alert the user of our error. 
    alert(err); 
    }, 
    complete: function(){ 
    //our ajax request has completed processing. We can perform all callbacks here. 
    } 
}); 

你沒有提供太多的信息，所以我給你下來和骯髒。雖然改進必須基於您選擇實現這一結果的「工具」，但這絕對是一個很好的開始。