《 网站 》原创设计与开发系列课程, 一条从零开始的清晰学习路线。 订阅即可学习全部课程

Drupal 电子商务网站教程 #1 - 产品与产品展示

打算写一个 Drupal 电子商务网站的系列教程。如果你订阅了宁皓网的课程,可以直接看 Drupal 电子商务的视频。如果没有,这个系列教程可以帮助你使用 Drupal 创建电子商务网站,在线卖掉任何你想卖掉的东西。我们要创建一个虚拟的自行车店的电子商务网站,名字叫 Specialized (这是一个真实的自行车品牌 )。

我们要用到 Drupal 的 Commerce 模块,这个组合非常灵活,你可以用自己的想法去搭建你的电子商务网站,当然这也是有代价的,很多东西都要从头开始,你要自己去创建产品类型,产品字段,分类,配置购物流程等等。这些都可以通过用户界面点鼠标完成,所以不用太担心,了解 Commerce 的工作方式与逻辑就可以了。

产品

Specialized 这个商店要卖的东西主要是自行车还有自行车运动装备。自行车可以分成,山地,公路,城市,每种类型的自行车会有不同的系列,每个系列的自行车会有不同的颜色,材质,尺寸等等。自行车装备主要有头盔,骑行鞋,骑行服,这些装备也会有不同的颜色与尺寸。根据商店要卖掉的这些要东西,要想一下用什么方式管理和组织这些产品。

根据销售的产品创建不同的产品类型,为每种产品类型添加各自的字段,然后再去添加产品。以我们的商店为例,我们要创建两种产品类型,自行车,自行车装备。然后为自行车添加相关的字段,比如重量,颜色,尺寸,车把,车架,前叉,材质,产品图像 ...  自行车产品里用到的这些字段,很多不适用于自行车装备产品,所以我们为自行车装备产品单独创建一种产品类型,再去为自行车装备产品添加它需要的产品字段,比如颜色,重量,材质,产品图像 ...

创建产品类型

我们先创建一个叫自行车的产品类型,你需要先安装 Commerce 模块,然后在 模块 里,启用所有 Commerce 相关的模块,这样在管理工具栏上会出现一个 商店 菜单。

  1. 打开 商店 - 产品 - 产品类型,点击 添加产品类型。
  2. 输入产品类型机读名称(用字母,数字或下划线)bike ,点击机读名称后面的编辑,再输入中文名 .. 自行车产品。
  3. 点击 保存产品类型

现在我们就拥有了一个叫 自行车产品 的产品类型,在 产品类型 里,你应该能看到两个产品类型,一个是 产品 (默认的产品类型),另一个是 自行车产品。

QQ20130515-1

为产品类型添加字段

下面我们为自行车产品类型添加相应的字段,在 商店 - 产品 - 产品类型,点击 自行车产品 后面的 管理字段,这里会有几个默认的字段,产品型号,标题,价格,状态,这些是必须的字段,在这个界面上,你可以为自行车产品添加新的字段,比如产品图像,颜色,材质等等。比如添加一个可以上传产品图像的图像字段。

  1. 添加新字段,输入字段的机读名称,product_image,点击机读名称后面的编辑,再输入这个字段的中文名,产品图像 。
  2. 字段类型,选择 图像 。
  3. 点击 保存。

现在,成功的为自行车产品添加了一个 产品图像 字段,这样在发布自行车产品的时候,可以用这个产品图像字段上传产品相关的图片。你可以根据需求,去为自行车产品添加其它的字段,比如车把型号,车架型号等等 ...

QQ20130515-3

添加产品属性字段

同一系列的自行车,可能有不同的颜色和材质,比如我们的 Specialized 自行车,有一个山地自行车系列,叫 Epic ,这个系列的自行车有不同的材质,比如碳纤维,铝合金 ... 每种材质的 Epic 自行车还有不同的颜色,比如 红色,黑色。这些不同特性的 Epic 自行车的价格,重量可能都不太一样。这些特性就是产品属性。

产品属性其实也是产品类型的字段,只不过在为产品类型添加属性字段的时候,我们需要标记一下,这个字段作为产品属性字段。这样添加产品并选择属性以后,在前台显示的时候,可以根据产品属性来切换显示不同的产品。

产品属性字段的类型可以是选择列表,或者是分类词汇表。先为自行车产品添加一个材质的属性字段,字段的类型是选择列表。

  1. 在 商店 - 产品 - 产品类型,点击 自行车产品 后面的 管理字段
  2. 在 添加新字段 下面定义材质字段的机读名称 material,点击机读名称后面的编辑,再输入中文名 材质。
  3. 字段类型 选择 列表(文本),控件类型 选择 选择列表。
  4. 点击 保存 ,输入到 材质 字段的配置界面。
  5. 允许值列表输入材质属性列表,比如 碳纤维 铝合金 ...
  6. 点击 保存字段设置。
  7. 在 属性字段设置 里,勾选 把这个字段作为属性字段,用在添加到购物车表单上。
  8. 保存设置

这样自行车产品类型就有了一个属性字段,发布自行车产品时可以使用选择列表选择自行车的材质。注意为产品类型添加属性字段最重要的一步是上面的 第 7 步,也就是勾选字段的 “把这个字段作为属性字段,用在添加到购物车表单上。”

这里我们添加了一个文本类型的选择列表作为产品的属性字段,你也可以为产品添加术语来源(分类词汇表)类型的属性字段,比如我们添加一个颜色属性字段,方法如下。

  1. 打开 结构 - 分类,点击 添加词汇表。
  2. 输入词汇表机读名称,color,点击机读名称后面的编辑,再输入中文名 颜色。
  3. 点击 保存。
  4. 找到 颜色 分类,点击后面的 添加术语。
  5. 输入颜色的名称,比如 红色,然后点击 保存,再输入 黑色,然后点击 保存。
  6. 有了这个分类列表以后,回到 商店 - 产品 - 产品类型,点击 自行车产品 后面的 管理字段。
  7. 在 添加新字段 下面输入 color,点击 机读名称 后面的编辑,再输入中文名 颜色。
  8. 字段类型 选择 术语来源,然后点击 保存。
  9. 词汇表 选择 颜色,点击 保存字段设置。
  10. 在 属性字段设置 里,勾选 把这个字段作为属性字段,用在添加到购物车表单上。
  11. 保存设置。

添加产品

有了产品类型,又给它添加了产品字段,下面就可以去添加产品了,注意,一个系列的自行车,不同的属性应该是单独的产品,比如 Epic 自行车,碳纤维 + 黑色 就是一个产品,碳纤维 + 红色,这也是单独的一件产品,铝合金材质的红色 Epic 自行车也会是一件单独的产品。每件产品都需要输入唯一的型号(SKU)。在后面,我们会用产品展示内容把这些不同属性的并且是同一系列的自行车组合在一起显示出来。

  1. 打开 商店 - 产品,点击 添加产品。
  2. 选择要添加的产品的产品类型,选择 自行车产品。
  3. 输入产品型号,标题,价格,上传产品图像,选择对应的属性,填写字段的内容。
  4. 点击 保存产品。

继续添加其它的自行车产品。Epic 系列自行车有四件相关的产品(产品图像见附件):

  • 碳纤维 + 黑色
  • 碳纤维 + 红色
  • 铝合金 + 黑色
  • 铝合金 + 红色

QQ20130515-4

展示产品

Commerce 的设计是,产品与产品展示是分开的,前面我们创建了产品类型,并添加了产品,想把这些产品展示给顾客,我们需要创建产品展示内容类型,其实就是拥有 产品引用 字段的内容类型,使用这个产品引用字段,可以引用相关的产品,比如我们可以添加一个叫 Epic 的产品展示内容,然后使用产品引用字段引用相关的产品,比如 碳纤维 + 黑色 的 Epic,碳纤维 + 红色 的 Epic。

创建展示产品的内容类型

步骤跟创建普通的内容类型是一样的,只不过需要多添加一个 产品引用 类型的字段到这个内容类型上。首先确定你已经启用了 Product Reference 模块(产品引用模块)。下面我们创建一个用来展示自行车产品的产品展示内容类型。

  1. 打开 结构 - 内容类型,点击 添加内容类型。
  2. 输入内容类型机读名称,bike ,点击机读名称后面的 编辑,再输入中文名,自行车。
  3. 点击 保存并添加字段。
  4. 给这个 自行车 内容类型添加一个产品引用字段。
  5. 添加新字段 输入 product_reference,点击 机读名称 后面的编辑,输入字段的中文名,产品引用。
  6. 字段类型 选择 产品引用,控件 选择 自动完成文本输入栏。
  7. 配置一下这个字段,可以引用的产品类型 这里,选择 自行车产品。
  8. 保存设置。

QQ20130515-5

这样我们就成功的创建了一个可以展示自行车产品的内容类型,下面我们去添加一个产品展示内容,去把 Epic 系列自行车产品展示出来。

添加产品展示内容

  1. 打开 内容 ,点击 添加内容。
  2. 选择要添加的内容,选择 自行车。
  3. 输入内容的标题,正文,使用 产品引用 字段引用相关的产品,在文本框里输入产品标题,会自动为你找到相关的产品,点击可以选中所引用的产品,你可以引用多个产品,每个产品标题之间,使用英文状态下的逗号隔开。
  4. 点击 保存。

QQ20130515-6

 修改所引用的产品展示

打开前面添加的产品展示内容,你会看到第一个引用的产品的相关内容,比如产品图像,价格 ...  你可以修改所引用的产品的展示,让用户可以根据产品的属性切换显示所引用的不同的产品,并且显示一个添加到购物车的按钮。

  1. 打开 结构 - 内容类型,点击 自行车 内容类型后面的 管理显示。
  2. 找到 产品引用 字段,修改它的格式为 添加到购物车表单。
  3. 点击 保存。

再去看一下之前添加的产品展示内容,在内容上,产品属性字段会显示为下拉菜单,比如材质字段,颜色字段,顾客可以选择属性,页面被根据所选择的产品属性自动切换显示产品,比如产品的价格,图像 ...

要注意,在产品展示内容类型的 管理显示 里,你会看到很多 产品 开头的字段,这些字段其实是 产品类型 上的字段,你可以直接在 产品展示内容类型 的管理显示上面,决定去显示或隐藏产品的字段。

QQ20130515-7

总结

这篇文章里说明了 Drupal Commerce 模块的产品管理与产品展示的方法和流程。就是先根据自己要卖的东西,去创建不同的产品类型,然后去给产品类型添加你想要的字段,包含产品的属性字段,比如颜色,尺寸 ... 然后去添加产品,同一系列的产品不同属性可以是单独的产品。再去创建产品展示内容类型,为产品展示内容类型添加 产品引用 字段,再去添加展示产品的内容,使用产品引用字段去引用相关的产品,修改产品引用字段的显示,可以改变所引用的产品在前台的显示。

附件: 
Package icon epic-images.zip Drupal Drupal Commerce

评论

哇,好给力!支持皓哥
皓哥,有没行业网站的教程啊!
比如什么类型的呀。
LED行业,有技术的话我想做个LED的。
有没有自己先尝试一下,遇到的具体问题是什么呢?
没,现在还什么都不会,要想先从简单的做起,以后学会了想做一个。
皓哥,给一个国内一个比较好的用Drupal搭建的B2C电子商务网站链接?去学习一下。
这里有几个,不过是国外的:http://ninghao.net/blog/846
皓哥,能推荐些Drupal做视频网站的模版?另外如果没有开发经验,想学习Drupal,难度如何?
学啥都是有难度的,重要的是去真正学了,想学会就一定能学会。模板可以自己设计,或者 themeforest 有一些,http://themeforest.net/category/cms-themes/drupal
哦,建议就好先学会 CSS,其实会了 CSS ,你就可以自己做模板啦 :)
这个能整合支付宝吗?
有支付宝模块,你可以试试。https://drupal.org/project/commerce_alipay
皓哥,你好,第一次看你的教程,你好厉害!有个问题想请问一下,就是我按照你的这个教程去操作,点开“商店”-“产品”以后,没有“产品类型啊”,只有一个“产品设置”,是不是“产品类型”和“内容类型”是一样的,我在“内容类型”那里添加产品类型可不可以?谢谢~
皓哥,请教产品如何做二级分类啊?
皓哥,我按照这个要求做了,结果出现了 EntityMetadataWrapperException: Unknown data property commerce_product. in EntityStructureWrapper->getPropertyInfo() (line 335 of D:\website\drupal7\drupal-7.43\sites\all\modules\entity\includes\entity.wrapper.inc). 这个问题,之前我也是出现这个问题,好像一添加引用就出现这个问题


微信好友

用微信扫描二维码,
加我好友。



微信公众号

用微信扫描二维码,
订阅宁皓网公众号。



240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

7160
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点