开发 | 类似淘宝的搜索及购物车功能,如何在小程序中实现?

作者:郑嘉伟

在上一篇文章中,我们复盘了一个服装行业订单收集小程序的产品逻辑和数据库的设计思路。

今天,我们依然将以「北江纺织牛仔新时尚」为例,复盘订单收集类小程序的主要功能点是如何通过知晓云(cloud.minapp.com)实现的,主要涉及搜索和购物车这 2 个功能。

搜索功能

在「北江纺织牛仔新时尚」中,搜索是比较基础的功能,其实它就是一个查询数据的过程。

我们从一个搜索的实例去讲一下这个问题,假如我们是一个消费者,想要搜索一个裤型修身的、水洗颜色浅色的、成分全棉的童装牛仔长裤,那么我们应该怎么做这个查询呢?

看上去有点复杂,那么我们先简化一下,如何搜索童装牛仔长裤的信息?

首先,我们需要有这样一张数据表,存储了商品的信息,也就是上一篇中我们讲过的 product 表。

由于我们要搜索童装牛仔长裤,那么除了一个商品的其他基本信息外,我们肯定要为童装牛仔长裤设定一个字段用于我们的查询,我们把这个字段定义为 category_id

根据实际的业务场景,一个产品可能会属于很多不同的分类,所以我们把 category_id 设定为数组类型。

现在我们的数据表定义已经初步完成了,那么假设 producttable_id2, 童装的 category_id3,牛仔长裤的 category_id5,那么在小程序端,参考知晓云开发文档,去获取所有童装牛仔长裤。

关注「知晓程序」微信公众号,回复「知晓云」,获取知晓云开发文档。

好的,现在搜索童装牛仔长裤的问题解决。

回到之前那个更复杂的问题,搜索一个裤型修身的、水洗颜色浅色的、成分全棉的童装牛仔长裤,其实就是往数据表上分别加上裤型、水洗颜色、成分的相关字段,然后在小程序端使用组合查询去把这些查询条件合并起来。

那么我们现在尝试查询所有水洗颜色浅色的童装牛仔长裤:

上面讲了根据筛选条件进行查询,那么做到搜索功能呢?

比如我输入「童装」,点击搜索,然后小程序就返回所有童装的商品列表。

这里有一种比较简单的做法是:给商品表定义一个 keyword 数组类型字段,用于这种查询,在用户点击搜索后,把用户输入的「童装」作为查询条件添加到查询中,那么我们就会得到一个搜索结果列表。

数据查询到这里基本就展示完成了,关键在于:如何结合你的业务需求去一步步完善你的数据表的设计,然后才是使用合适的查询条件去获取数据。

对于新手来说,设计出既能满足业务需求又简单优雅的数据表可能是一大挑战,这个就要靠不断实践和经验去完成了。

可以加入知晓云开发交流群跟我交流沟通 ?

购物车

在「北江纺织牛仔新时尚」进入商品详情页,我们可以选择把商品添加到自己到购物车中。

点击购物车,我们就会跳转到购物车页,可以选择下单,那么这个购物车功能是怎么实现的呢?

首先,需要说明,在「北江纺织牛仔新时尚」为购物过程中的信息存储添加了如下几个数据表:

  • product_sku, 存储了某个商品的相应副产品(面料,挂卡);
  • order_item,存储了添加购物车中 product_sku 数量的信息;
  • order,存储了某个订单中的 order_item 列表,购物快照,地址等信息;

在商品详情页中,我们根据页面的商品 id,可以在之前提到的 product 表获取它的信息用于展示,在表 product_sku 中查询它的相关副产品(面料,挂卡),在 order_item 表中查询用户之前的购物车信息。

这些都是我们用于生成购物车内容的基础信息,在用户选择产品的数量并点击添加到购物车之后,我们会向 order_item 新增或者更新相应的数据项,这些数据项其实就代表着最新的购物车信息。

点击商品详情页中的购物车图标,会直接跳转到购物车页,用户可以在这里选择和修改 order_item 的相关信息,在这个过程中,如果修改 order_item 的相关信息,需要发送更新请求去更新数据库中的信息。

点击「下单」时,我们将会根据本次被选择的最新 order_item 的数据项和之前用户登记留下的个人信息等信息生成一条 order 记录,这条记录就可以用于北江纺织与用户的联系沟通,去完成他们的线下订单。

好了,购物车功能的实现思路基本上就是如此,可能没有搜索功能讲的那么详细,但是关键点仍然是在搜索功能中所说的,如何根据业务需求去设计合适的数据表和表结构,完成相应业务,这个需要不断的实践和累积经验去完善了。

「北江纺织牛仔新时尚」小程序使用链接

https://minapp.com/miniapp/2128/

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-11-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏蓝天

大数据利器

1483
来自专栏Android 开发者

Android Jetpack 助推应用开发 | 中文字幕视频介绍

2635
来自专栏Android 开发者

Android P Beta!您想要知道的所有更新内容都在这里

2735
来自专栏Android 开发者

正式发布 Android 架构组件 1.0 稳定版

1272
来自专栏郑建军的专栏

微信 PaxosStore:理论基础与创新设计

本文从以下四个方面介绍了微信 PaxosStore的理论基础与创新:-PaxosStore项目介绍; Paxos协议过程与实现;PaxosLog优化与设计分析;...

1.2K1
来自专栏我是攻城师

2015 Bossie评选:最佳的10款开源大数据工具

35610
来自专栏Android 开发者

Android 9 Pie 现已面向全球正式发布!

经历一年多的开发和数月以来早期用户的反复测试,最新 Android 平台 —— Android 9 Pie 终于正式面向全球发布!

7.3K1
来自专栏企鹅号快讯

6大爬虫利器,轻松搞定爬虫

工欲善其事必先利其器,Python之所以流行在于它有非常丰富的第三方包,无论是Web框架还是机器学习框架、抑或是爬虫框架,多得让人眼花缭乱,这给了开发者极大的选...

2256
来自专栏IT派

2018 年 Java,Web 和移动开发需要学习的 12 个框架

IT派 - {技术青年圈} 持续关注互联网、区块链、人工智能领域 新的一年已经开始,不知道大家有没有定好小目标。如果2018年还没有决定学什么,那么你来对地...

5936
来自专栏ImportSource

为什么看起来不是很复杂的网站,淘宝、腾讯却需要大量顶尖高手来开发?

来源:知乎 链接:http://www.zhihu.com/question/20303645 为什么很多看起来不是很复杂的网站,比如 Facebook 需要大...

3617

扫码关注云+社区

领取腾讯云代金券