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. 
    } 
}); 

你没有提供太多的信息，所以我给你下来和肮脏。虽然改进必须基于您选择实现这一结果的“工具”，但这绝对是一个很好的开始。