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

Question

我正在设计一个商店，并希望采用一种“混搭”功能，让顾客可以看到哪些上衣与哪些鞋底和鞋子相匹配。将有3个级别，当用户找到正确的混合/匹配时，他们点击购买将所有项目添加到购物车。

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

任何人都知道如何使用此功能？我猜jQuery会这样做，但它需要与某种购物车集成。非常感谢任何帮助。

Answer 1

自定义功能。需要整整9码。安装购物车。沿着它创建一个新表。将表命名为“级别”，并在表格中给它3行，'id'，'sid'，'level'。根据您使用的购物车，您可以在shopping_cart表中的'extra'列下声明某些值。使用静态变量。 'Level1'，'Level2'，'Level3'。然后创建一个MySQL Trigger事件。每次将项目添加到购物车列表（从后端，要销售的项目）。触发器将使用它的'id'，将其作为'sid'插入我们的'levels'新表中。我们新的'levels'表中的'id'是unqieu自动递增值。 'sid'指的是原始购物车表中的'item id'。现在使用PHP和jQuery。 PHP首先从数据库中获取项目，从levels中选择*，其中level ='Level1'。这将获得所有应该是'level1'的物品，在你的情况下应该是帽子，围巾等我想象的东西。确保对level2和level 3执行相同操作。当然，创建HTML结构。用'position：relative'和宽度：10000em构建的三个''行'。然后每个'item'从我们的行请求中返回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-level1-item”的内容，active-level2-item，active-level3-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.
  }
});

你没有提供太多信息所以我给了你沮丧和肮脏。虽然改进需要基于您选择实现此结果的“工具”，但这绝对是一个很好的方向。