jQuery / PHP混合和匹配电子商务功能

Question

我正在设计一家商店，并希望合并某种“混合搭配”功能，客户可以在其中看到哪些顶部与哪些底部和鞋子相匹配。 共有3个级别，当用户找到合适的组合/匹配项时，他们单击“购买”将所有商品添加到购物车中。

我已经绘制了UI图以尝试进行直观解释：

有人对如何执行此功能有想法吗？ 我猜测jQuery可以做到，但是它需要与某种购物车集成。 任何帮助是极大的赞赏。

Answer 1

自定义功能。 需要整个9码。 安装购物车。 在其旁边创建一个新表。 将表命名为“ levels”，并在表中为其分配3行，即“ id”，“ sid”，“ level”。 根据您使用的购物车，您可以在shopping_cart表中的“额外”列下声明某些值。 使用静态变量。 'Level1'，'Level2'，'Level3'。 然后创建一个MySQL触发事件。 每次将商品添加到购物车列表中（从后端，待售商品）。 触发器将使用该标识符的“ id”，并将其作为“ sid”插入新的“级别”表中。 新的“级别”表中的“ id”是unqieu自动递增的值。 “ sid”是指原始购物车表格中的“ item id”。 现在使用PHP和jQuery。 PHP首先从数据库中获取的项目，SELECT * FROM levels ，其中一级=“1级”。 这将获得所有应为“ level1”的项目，在您的情况下，应为我想象的帽子，围巾等。 确保对级别2和级别3进行相同的操作。当然要创建HTML结构。 三个“行”以“ position：relative”和宽度为：10000em构建。 然后，从我们的行请求中以PHP返回每个“项目”，例如：

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

您可以使用类似jQuery Tools滑块的工具来创建每行所需的效果。

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

您需要包括自定义javascript / jquery来确定位置，并确保“应具有焦点的元素”始终具有与其上方/下方相同的宽度，高度，边距和填充。 此外，向视图中的每个项目，active-level2-item，active-level3-item等添加自定义类“ 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.
  }
});

您没有提供太多信息，所以我给您带来麻烦。 尽管需要根据您选择的“工具”进行优化以实现此结果，但这绝对是一个很好的开始方向。