前面我们给产品添加了属性，在前台可以使用选择列表或单选按钮选择应用的属性，这个视频我们可以安装一下 Commerce Fancy Attributes .. 他可以提供一个选择属性的更好的体验，比如产品的颜色属性，可以使用真正的颜色代替颜色的文字 ...

在这个地址你可以下载到这个模块，或者我们可以使用 drush 安装它 ... drush dl commerce_fancy_attributes ... drush en commerce_fancy_attributes --yes ...

回到 Drupal ... 我们再创建一个颜色分类 .. 结构 ... 分类 .. 添加词汇表 .. 输入 color ... 颜色 ...

再编辑一下这个颜色分类 ... 我们要给这个颜色分类添加一个文本字段来存储颜色的值 ... 打开管理字段 ...

添加新字段 ... 输入 hex color ... 颜色 ... 字段类型选择 文本 ... 点击 保存 ...

这样为颜色这个分类添加分类词汇的时候，我们可以输入一个颜色值 ...

下面我们需要修改一下颜色分类在添加到购物车属性模式下的显示 ... 打开 管理显示 .. 选择 Add to Cart Form - Attribute ... 这个显示模式 ...

然后把 颜色 这个字段拖到显示的区域上 ... 去掉字段的标签 ... 格式 选择 颜色 ... 然后保存 ...

再回到颜色这个分类

添加术语 ... 红色 ... 在 颜色 这个字段里输入一个十六进制的红色的值 ... #b20608 ... 再添加一个黑色的词汇 ... #000000

属性

下面去给自行车产品添加一个颜色属性.. 商店 .. 点击自行车产品类型后面的 管理字段 ... 添加新字段 .. 输入 color ... 颜色 ...

字段类型 选择 术语来源 .. 控件类型 选择 选择列表 ... 点击 保存 .. 词汇表 选择 颜色 .. 保存字段设置 ..

勾选一下 属性字段设置 里的这个选项 ... 安装了 commerce fancy attributes 以后，在属性选择控件这里会多了一个 Rendered term 选项 ... 选中它 ...

然后点击 保存设置 ...

编辑

回到之前我们添加的产品展示内容 ，然后为产品添加颜色属性 ... 内容 ... 编辑 ... 再编辑一下产品引用字段里的产品 ...

为每一件产品都选择一个颜色 .. 保存产品 .. 修改好以后，点击 保存 ...

再打开这个内容 ...

你会看到一个颜色属性字段 .. 当前选中的材质属性是 碳纤维 ... 拥有这个属性的产品包含了两种颜色 ... 红色和黑色 ... 点击对应的颜色可以切换到对应的产品 ...

再切换到另一种材质 ... 这种材质的自行车同样拥有两种颜色 .... 点击 黑色 ... 会显示黑色的铝合金材质的 Epic 自行车 ... 点击 红色 .. 会切换到红色的铝合金材质的自行车。