宁皓网 Drupal 8：电子商务

下载 commerce 模块可以使用 drush 命令 ... 下载 commerce ... 选择一下要下载的版本 .. commerce 模块里面包含了很多模块 .

我们先试着启用一下 commerce 这个模块 .. 会提示这个模块要依赖几个其它的模块提供的功能，是不是要下载它们 ..

输入 y ，确认一下 .

最后这里会提示一个错误 .. 说 commerce 模块需要一个特别的 php 扩展，bcmath ..

先退出来 ..

我的环境用的是 docker 搭建的 ... 先用编辑器打开这个项目 ... 这个 docker-compose-dev.yml 就是我配置环境服务用的一个文件 ..

这个 console 服务里，我用了一个自定义的镜像，这个镜像在阿里云上 .. 我已经在这个镜像里安装了 commerce 需要的 php 扩展 ..

现在我只需要把对镜像的修改拉取到本地 .. 然后重新再去创建需要的服务容器就可以了，这样新的容器里就会包含需要的 php 扩展了 .

复制一下镜像的名字 ... 执行一下 docker pull ... 再加上镜像的名字 ..

完成以后，我们再去拉取 php 这个服务用的镜像的更新 ..

使用同样的 docker pull 命令 ..

完成以后我们可以先执行一下 docker-compose down ...

然后再去启动一下 .. 我的本地开发环境用的是一个特别的 compose 文件，所以这里要用一个 -f 去指定一下这个 compose 文件的名字 ..

完成以后再进入到 console 服务 ..

再试试启用一下 commerce 模块 ... 这次没有提示 commerce 需要的 php 扩展 ... 但是说 Address 模块需要两个 Library ...

下面我们再去解决这个问题 ..

Composer 是管理 PHP 包用的工具 .. 我们可以用 Composer 去管理 Drupal 项目需要的东西 .. 比如 Drupal 的一些模块 ..

让 Composer 知道 Drupal 的模块在哪里，就需要先配置一个 Drupal 仓库 .. 执行一下 composer config repositories.drupal .. 添加一个名字是 drupal 的仓库 .. composer .. 后面再加上仓库的地址 ...https://packages.drupal.org/8 .. 这个是 Drupal 官方的 Composer 仓库地址 ..

然后再用一下 composer require ... 去下载一个 drupal 模块 ... drupal 下面的 address .. 再指定一下版本 .. 这样 composer 会自动去下载 address 依赖的其它的 Library ...

完成以后，再启用一下 commerce 模块 ... 这次就提示成功了 ..

composer config repositories.drupal composer https://packages.drupal.org/8
composer require "drupal/address ~1.0"

安装了 commerce 模块以后，在工具栏上会有个新的菜单项目 .. Commerce .. 现在这个界面上只有一个 configuration ... 配置 ... 而且这个配置界面里面也没什么可以配置的东西 ..

再回到扩展这里 .. 浏览到 Commerce 区域 ..

现在我想启用 Commerce Cart .. 但是这个模块又依赖了一些其它的东西 .. 手工去下载它们比较麻烦 ... 所以我们可以再去用一下 drush ..

drush en commerce_cart .

这里会提示 commerce_cart 依赖的东西，问我们是不是要去下载它们. . 输入 y ，确认一下 ..

完成以后回到扩展界面 ... 这里显示 Commerce Cart 模块已经被启用了 ...

同时这个模块依赖的其它的模块也被启用了 .. 比如 Commerce Order ，订单 ... Commerce Price .. 价格 .. Commerce Product .. 产品 .. 还有 Commerce Store ... 商店 ...

再回到 Commerce 的管理界面 ..

你会看到这个配置界面上会多出来一些可以配置的选项 ..

再回到 Commerce 界面 ..

这里也会多出来一些可以管理的选项 ...

先打开 Commerce 的管理界面 ... Configuration，先去做点配置 .. 打开 Currencies .. 货币 ..

Add currency .. 添加货币 .. 输入名字 .. CNY ... 表示人民币 .. Currency code， 货币代号 ... 再输入一个 CNY .. 下面还有一个用三位数字表示的货币 ... 打开这个 ISO 4217 链接 .. 搜索一下 CNY ... 查看一下人民币对应的三位数字是多少 .. 这里显示是 156 ..

输入 156 ..

Symbol 是符号 ... 输入表示人民币的符号 ..

Fraction digits，表示小数点后面的位数 .. 这里可以使用默认的 2 ...

保存一下 .. 现在我的 Commerce 里面就有了一种可以使用的货币了，也就是刚才我们添加的人民币。

再添加一种货币 ... 名字是 USD，表示美元 .. 货币代码 USD .. 再查看一下对应的 USD 的三位数字 ... 这里显示的是 840 ..

再添加一个表示美元的符号 ... 小数点后面是两位 .. 再保存一下 ..

这样我们就有了两种可以使用的货币， 人民币，还有美元 ..

在 Commerce 的 Configuration 这里，有一个 Store types .. 在这里你可以添加商店的类型 .. 现在有个默认的商店类型，就是这个 online .. 你创建的商店可以属于某个类型 ..

编辑一下它 .. 在这里你可以去管理这个商店类型，你可以给它添加一些自定义的字段 .. Manage form display 这里，是在创建商店的时候要填写的一些字段 ..

Name ，名字，Email，邮件，Default currency，默认的货币，Address，地址，还有 Supported billing countries .. 支持的国家 ..

回到 Commerce 的主管理界面 .. Stores ... 这里是商店的管理界面 .. Add store .. 添加一个商店 ..

输入商店的名字 .. Ninghao .. 再输入一个邮件地址 ... service@ninghao.net

Default currency .. 默认的货币 ... CNY ... 再配置一下地址 .. Country 是 China .. Street address .. Greenland ..

再选择一下省 ... Shandong .. City .. Jinan .. District .. 槐荫区 ..

Supported billing countries .. 支持的国家 .. 默认选择了 All countries .. 所有的国家 ..

如果你的商店只面对某些国家，可以在这里单独去选择一下 ..

Owner .. 是商店的拥有者 .. 在这里可以选择网站上的某个用户 ..

最后再保存一下 ..

这样我的 Commerce 里面，就会有一个商店了 ..

一件商品，比如一件 T 恤，它的尺寸，颜色这些东西就是商品的属性。打开 Commerce 的管理界面 .. 找到 Product attributes .. 在这里可以管理商品属性 .. 添加一个新的商品属性 ..

Name 是属性的名字，比如 Color ，表示颜色 .. Element type ，元素的类型，现在是 Select list ，选择列表 ..

在 Value 这里，可以输入这个属性里面包含的值 .. Black .. Red .. 再添加一个 Green ...

然后保存一下 ..

再回到 Commerce .. Configuration，Product variation types .. 商品的变化类型 ..

编辑一下这个默认的商品变化 ... 在 Attributes 这里，会看到刚才我创建的 Color 这个属性 ... 勾选一下 ..

再保存一下这个商品变化类型 .. 这样在创建商品变化的时候，就可以使用 Color 这个属性了 ..

每件商品都可以有很多种变化，每个变化都可以有自己的一些字段，比如不同的属性的组合，或者一些自定义的字段，比如一辆自行车可能有不同的颜色，每种颜色都可以是这件商品的一个变化，不同颜色的自行车的展示图片可以是不一样的 .. 每种变化还可以有自己的 SKU，价格 .. 这样你可以更容易去跟踪商品的不同的变化的销售情况 ..

打开 Comemrce .. Configuration .. Product variation types .. 这里可以管理商品的变化， 编辑一下 Default 这个变化 .. Manage fields .. 管理字段 .

添加一个新的字段 ... 类型是 Image .. 输入一个标签 .. Product Image ... 用这个字段可以上传商品的展示图片 ..

再打开 Manage display，管理显示 .. 隐藏 Product Image 字段的标签 .. 再调整一下显示的顺序 ..

然后打开 Manage form display ，管理表单显示 .. 这里设置的是创建商品变化用的那个表单 .. 设置一下 Product Image 这个字段的预览图像的尺寸 ..

每件商品都可以属于一个商品类型，比如你的商店卖自行车，你就可以去创建一个自行车类型的商品，在商品类型上你可以添加商品的一些通用的东西，比如商品的标题，简介 ..

一些商品的变化特有的东西，比如一辆自行车的绿色，还有黑色，可能要使用不同的展示图片，这些东西要放在商品的变化类型里。

一件商品里面可以包含多个商品的变化。 商品与商品变化之间的关联是用 Entity reference 创建的 ..

在 Commerce .. Configuration ... Product types 这里 .. 可以管理商品的类型 .. 现在这里有个默认的商品类型 ..

每个商品类型都可以有自己的一些字段 .. 你可以根据自己的需求去创建商品类型 .. 这个默认的商品类型里面有三个字段 .. Body ，产品的描述 .. Stores .. 所属的商店 .. Variations .. 商品的变化 ..

在 Manage form display 这里，可以管理创建商品用的表单 .. Manage display 这里管理的是商品的显示 ...

打开 Commerce .. Products .. 这里是管理商品的界面 .. 添加一个商品 .. 这里出现的字段是商品类型提供的 .. 先输入 Title ，商品的标题 .. 再来一段介绍 ..

下面这段是商品的变化，这些字段是商品变化类型里提供的 .. SKU 是商品的编号 ..

Price 是价格 .. 2800 .. 货币是美金 ..

Color 是我为商品变化添加的一个商品属性 .. 选择 Black ... 黑色 ..

Product Image 是我在默认的商品变化类型里添加的一个图像字段 .. 选择一张要上传的商品图片 ..

Create variation，创建变化 ..

继续再添加一个商品变化 ... 同样，需要先输入 SKU ..

设置一下价格 ... 选择对应的货币 ... 再设置一下它的 Color 属性 ...

选择一张商品图片 ..

再创建这个商品变化 ..

最后再保存一下这个商品 ...

现在你看到的是这个商品的展示 ... 上面会有标题 .. 介绍 .. 这些是来自商品的类型 .. 下面是一个商品图片 .. 颜色 .. SKU，价格 .. 这些东西来自商品的变化类型 ..

我们可以选择一下这个商品的 Color 属性 .. 现在是 Black ... 再选择一下 Green ..

页面上的一些相关的地方会有变化，比如商品的展示图片，SKU，价格这些东西 ..

Drupal 8 的 twig 模板引擎可以让我们非常灵活的展示内容 .. 我们先去定制一下产品页面的显示 ..

先用浏览器的开发者工具检查一下这个产品展示页面上出现的内容 .. .. 这里会显示这块内容用的是 commerce 下面的 commerce-product 这个模板控制输出的 ..

在上面的模板建议里，我们可以使用这个 commerce-product--default 这个模板文件，它是专门为 default 这种产品准备的模板文件 ..

先在模块里面，找到 commerce .. modules .. product.. templates .. commerce-product.html.twig .. 复制一份这个文件 ..

放在自己的主题的目录下面 .. 我的前台主题是在 themes/ninghao 这个目录里 ..

再重命名一下这个文件 .. 加上 --default .. 这样这个模板文件只会影响到 default 这种商品 ..

在这个模板文件里面，我们可以使用 devel 模板提供的 dpm .. 输出 product 里的东西 .. 重建一下缓存 ..

现在这个产品页面内容的显示就会用到我的主题下面提供的这个模板文件了 ..

再看一下上面输出的 product 里的东西 .. 这里的 title 就是产品的标题 .. body 是产品的描述 .. 下面还有一些 variation 字段 ..

回到我的主题 ... 打开主题的 info 文件 .. 在 Libraries 这里，我已经用了来自 ninghao_ui 模块提供的两个资源库 .. ui.container ... 还有 ui.grid ..

我在产品模板里要用到它们提供的样式去布局 ... 打开我的产品模板 .. 在这个元素里面，用一下 addClass ... 添加几个 css 类 .. ui stackable grid ..

在下面再添加一个包装 .. 上面加上 ten wide column ... 这些类是 semantic ui 里布局用的 ..

在这个包装里，我要包装一下商品的图片 .. 这个图片就是这个 variation_field_product_image ..

再添加一个包装 .. 加上 six wide column .. 占用六个网格 ..

在它里面，用一个 h2，包装一下商品的标题 .. product.title ...

回到商品页面，预览一下 ... 左边这里会显示产品的图片 ... 右边这块儿会显示一个商品的标题 ..

在标题的下面可以显示商品的价格 .. product.variation_price ..

然后是 product.body .. 产品的简介 ..

下面再用一下 product 下面的 variation_sku ..

再往下是 product 的 variations ...

然后再去掉这个模板文件里自带的这行代码 ...

回到浏览器，预览一下 ...

现在你看到的就是用的我的自定义的商品模板输出的 .. ..

再回到这个模板文件 ... 去掉输出 product 的这行代码 ..

在商品页面上会显示一个大标题 .. 下面还有一个标签栏 .. 我想隐藏这个大标题，然后把标签栏放到页面的底部 .. 先找到我的主题的 info 文件 ... 在 regions 这里可以先添加两个区域 ... 一个是 title ...

还有一个是 bottom ...

再复制一份主题目录下面的 page.html.twig .. 这个模板你可以在核心自带的主题里找到 .. 模板文件的名字可以是 page--product.html.twig ..

这样这个模板文件只会用在 product 类型的内容上 ..

这两个模板文件里面，现在只会显示 header 还有 content 区域的内容 .. 在 page.html.twig 里面，在 header 的下面输出一下 title 区域的内容 ..

在 content 区域的下面，输出 bottom 区域的内容 ..

然后把这个 bottom 也放在 page--product 这个模板里面 .. 因为这个模板文件里没有输出 title 区域的内容，所以发布在这个区域上的区块也就不会被显示 ..

重建一下缓存 ..

打开 结构 .. 区块 .. 找到 Page Title .. 把它放在 Title 这个区域上显示 ... 再找到 Tabs ... 让它在 Bottom 区域上显示 ..

再去预览一下 ...

现在这个产品页面上就不会再显示页面的大标题了 ... 这个 tabs ，会在内容的底部显示 ..

回到主题 .. 打开主题的样式表 ... 你可以在这里添加一些自定义的样式，去定制一下产品页面的显示 ... 这里我直接把我改好的样式粘贴过来 ...

还有一个小标志 ... 把它放在我的自定义的前台主题目录的下面 ...

再预览一下 ...

这个 Price 标签可以隐藏起来 ... 打开 Commerce .. Configuration .. Product variation types .. 编辑一下这个默认的变化 ..

Manage display ... 隐藏 Price 字段的标签 ... 再保存一下 ...

现在你看到的就是我定制的商品页面的显示 ...

点一下这个产品页面的 Add to cart .. 添加到购物车 .. 这里会出现一个错误，提示 CurrencyMismatchException ... 这应该是个 bug ..

我的商店默认的货币是人民币，不过我在添加商品的时候给商品选择的货币是美元 .. 所以会遇到现在这个问题 ..

打开 Commerce ... Stores ... 编辑一下我的这个商店 ..

把默认的货币换成 USD .. 再保存一下 ..

回到这个商品页面 ... 添加到购物车 ... 如果还遇到这个问题，可以再回到 Commerce .. Order ... Carts ...

选中我的购物车 .. 把它删除掉 ...

再回到商品页面 ... 添加到购物车 ..

这样就不会再遇到问题了 ...

打开 购物车 ... 这里会显示当前用户的购物车里的内容 ...

现在显示的是购物车页面，这个页面的主要内容就是这个购物车表格，这块内容是用视图输出的 ... 如果你不确定，可以检查一下这块内容的元素，打开了 twig 模板引擎的调试功能以后，这里会显示一些有用的信息 ..

这里用了一个 block 模板 ... 说明这块儿内容是一个区块 ...

在这个内容包装的元素上，有一个 class 是 view-commerce-cart-form ... 所以这块内容很可能用的是一个叫 commerce cart form 的视图输出的 ...

上面会告诉我们这块内容用的模板文件 ... 这是是一个视图的模板文件，所以可以肯定的是，这块儿内容一定是用的视图输出的 ...

用这些细节，我们可以判断输出的内容来自哪里 ..

打开 Structure .. Views ..

先找找名字是 Cart 的视图 .. 这个 Cart form 上面有个标签 .. commerce_cart_form .. 打开这个视图观察里面的字段 ..

或者禁用这个视图 .. 再到前台页面去预览一下 .. 页面上再在什么也不显示了 ... 说明这个页面上显示的购物车，用的就是刚才我们找到的那个视图输出的 ..

再找到这个刚才被禁用的视图 ... Enable ... 再启用一下它 ...

现在页面上的购物车又可以正常显示了 ...

在视图这里，找到 Cart form 这个视图 .. 编辑一下它 ..

添加一个字段 ... 搜索一下 Image ... 没有找到 Image 字段 .. 我们需要先去添加一个 Relationship ... 也就是关联 .. 在 高级 这个区域里面，添加一个关联 ...

类型是 Product variation .. 商品的变化 .. 添加并配置 .. 再应用一下 .. 然后再去添加一个字段 ... 搜索 Image ... 这样就会找到我们在商品变化里添加的 Product Image 这个字段了 ..

选中它 ... 添加并配置字段 ..

选择一种图像样式 ... 再设置一下图像链接到的目标 ... 然后 Apply .. 应用一下 ..

重新调整一下字段的顺序 ... 把这个商品图片放在最上面 ...

保存一下视图 ..

回到购物车页面 .. 刷新一下 ...

现在在这个购物车上的商品项目就会显示一个商品的图像 ... 这个图像就是在商品变化里的 Product Image 字段 ...

再打开这件商品 ... 选择一个不同的颜色 ... 添加到购物车 ..

再回到购物车页面 ... 刷新 ..

同样，这里会显示新添加到购物车上的商品的图像 ...

在这个购物车页面，现在只有一个 Update cart，更新购物车的按钮，还不能结账 .. 先打开扩展 ... 在 Commerce 区域这里，找到 Commerce Checkout ... 这个就是结账用的模块 ..

安装一下它 ...

回到这个购物车页面 .. 刷新一下 ..

现在这里会多出来一个 Checkout 按钮 ... 点一下这个结账按钮 ..

这一步让用户填写账单信息 .. 先选择国家 ... China .. Last name 是 Wang ... First name 是 Hao ... Company 是公司 ... 王皓和小雪 ..

Street address .. 街道地址 ..

再选择一个省份 ... 山东 .... City 是 济南 ... 然后再选择一个具体的区 ...

Postal code 是邮政编码 ...

再点一下继续 ...

这一步是一个预览 .. 左边这里会显示联系还有账单信息 ... 右边是这个订单里面包含的具体的商品 ...

Pay and complete purchase ..

支付并完成购买 ..

因为我的商店里还没有可以使用的支付方法 .. . 所以会直接显示订单已经完成了 ..

打开 Commerce ... Orders ... 这里是订单的管理界面 ... 在这里可以找到刚才我提交的这个订单 ...

Drupal Commerce 提供了一个结账流程的指示 ... 你可以把它放在结账页面上显示出来 .. 默认 Commerce 是多步的结账流程 ... 这个指定可以提示用户还有几步可以完成购买 ..

打开 Structure .. Block layout ...

找到 Content 这个区域 .. Place block ... 在这个区域上放一个区块 .. 搜索一下 checkout .. 这里有个 Checkout progress ..

不显示标题 ... 保存区块 ...

调整一下区块的位置 ... 再保存一下 ...

再回到这个结账页面 ... 现在这里会显示一个结账流程 ..

默认结账的流程是多步的，现在是在 Order information 这里，在这会要求用户填写地址 ... 下一步是 Review ... 检查订单 ... 然后是完成结账 .. 这个结账流程我们是可以自己去定制的 ..

打开 Commerce .. Configuration .. Checkout flows ..

你可以在这去创建不同的结账流程，然后分配给不同的订单类型去使用 .. 现在这里有个 Default ... 默认的结账流程 ..

编辑一下 ..

Plugin 是这个结账流程用的插件 ... 默认只有一个 Multistep ... 多步的结账流程 .. 我们应该可以通过结账流程插件去扩展结账流程 .. 比如可能会有单页面的结账流程插件 ..

Display checkout progress ... 显示结账流程 ..

Order summary view .. 订单摘要视图 ... 在这里，可以选择一下负责展示订单摘要的那个视图 ..

下面是一些面板 .. 在结账的每一步的上面，会有一些面板 ... 这些面板可以展示或者收集一些信息 .. 比如在 Login 这一步的下面，有个 Login or continue as guest .. 登录或继续使用访问身份 ..

打开一个新的浏览器窗口 .. 再打开一个商品 ... 添加到购物车 ... 打开购物车 ... 结账 ..

因为我现在没有登录 .. 所以结账流程的第一步就是 Login，提示我们登录 ... 或者 Continue as Guest .. 在 Order informatin 这一步里，会先让我们输入 Contact information ，联系方式 ...

默认就是让匿名用户输入一个电子邮件地址 ..

再回到结账流程管理这里 .. Login 之后是 Order information ，订单信息 .. 这里有两个 Pane .. 两个面板 .. Contact information ... 用户如果没有登录会要求用户输入一个电子邮件地址 ..

Billing information .. 这个面板是让用户输入账单信息 .. 就是用户的具体的地址 ...

Review 这一步是让用户在支付之前预览一下订单信息 ..

然后是 Payment，支付 ... 因为我们还没有启用支付模块，所以这里不会有支付的方法 ...

Complete ... 是最后的完成订单 ...

我们可以试一下，把这个 Billing information 拖到 Disabled 这个区域上来 .. 这样可以禁用这个面板 ..

保存 .. 回到结账页面 ...

再刷新一下 ... 之前让用户输入地址的那个面板，现在就不见了 .. 因为我们把它从结账流程里面去掉了 ...

先打开 Extend ... 扩展 .. 在 Commerce 下面，找到 Commerce Payment .. 它是支付用的模块 .. 还有下面这个 Commerce Payment Example ... 这个模块提供了一个演示的支付方法 ..

安装一下这两个模块 ...

回到这个支付流程 ... 编辑一下默认的支付流程 .. 在 Order information 这里，会出现一个 Payment Information ... 支付相关的信息 ..

然后在 Payment 区域的下面，又会出现一个 Payment Process ... 处理支付 ...

再回到结账页面 ... 刷新一下 ..

这里会显示 No payment gateways are defined, create one first ... 还没有支付方法，先去创建一个 ..

打开 Commerce ... 配置 ... 这里会有一个 Payment gateways ..

Add payment gateway ... 输入支付方法的名字 ... Test .. Plugin 这里可以选择一种支付方法，现在我这里只有一些演示用的支付方法 .. 随便选一个 ..

然后保存 ...

再回到结账页面 .. 现在这里会出现一个 Payment information 面板 ...

输入一些支付相关的信息 ... 然后继续下一步 ..

预览一下 ... 再 Pay and complete purchase ... 支付并完成购买 ..

这里会出现一个提示，说支付要跳转到支付服务器 ... 稍等一下 ...

完成以后，会提示一个完成的信息 ...

刚才我们选择的是站外支付方法，比如国内的支付宝，用户选择这种支付方式，支付的时候会跳转到支付宝网站，用户完成支付以后会被支付宝重定向到我们的网站，我们收到支付宝的请求，处理一下，没有问题，就会显示一个完成的提示 ...