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

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