WooCommerce Skill Tree for WPLMS

WooCommerce Skill Tree for WPLMS 是某个客户定制的 WordPress 插件,其作用是扩展 基于 WooCommerce 的 WPLMS 主题,使它有个技能树功能。

需求分析

以下为已有环境的状况、前提条件以及客户需求:

  • 在WPLMS中,课程是绑定在产品上的,每个产品绑定一个课程;
  • 客户已购买了一套icon,用于标示不同的职业角色;
  •  做一个页面,这个页面显示某个职业角色的若干级别(如菜鸟、初级、中级、全部)以及全部课程,各个级别的切换以小圆点进行,要有多个职业角色;

以下为优化用户体验后的实际功能:

  • 实现上述的客户需求;
  • 获取当前用户已购买/已学习的课程占当前角色全部课程的百分比,并以进度条形式显示在小圆点的背景中;
  • 判断当前用户在当前角色中的位置,并将其自动定位到某个级别(如果当前用户尚未全部购买/学习某一个低级别里的课程,为其显示这个低级别里的课程,否则继续往更高级别判断,如果当前用户已经学习了"高级"中的全部课程,为其默认显示当前角色的全部课程);
  • 小圆点以及小圆点上方表示级别的文字在激活(当前)状态下的特定颜色/背景色;

新增一个职业角色

在启用 WooCommerce Skill Tree for WPLMS 后,新建一个页面,选定页面模板为“技能树”(技能树页面的标题不用填写):

Skill Tree for WPLMS

然后点击编辑器右侧的“发布”,之后会看到在编辑器右上方会出现如下截图(为截取全图,我缩放了页面):

Skill Tree for WPLMS

在“潜在顾客的角色”下面选定这个页面的职业角色;

在“XX对应的产品”下面分别选择 WooCommerce 产品(可多选);

在"XX对应的简短描述"下面输入简短描述,这个简短描述将会在小圆点 Hover 时显示;

在“全部对应的简短描述”,这个描述将会在“全部”对应的小圆点被hover时出现;

然后,在编辑器中输入这个职业角色的描述,职业角色的描述将会是在如下图大字后的那一段儿文字:

Skill Tree for WPLMS

文章标题不用填写,点击编辑器右侧的“更新”,查看页面,会看到如下效果“:

 

Skill Tree for WPLMS

如上,左上角为选定的角色LOGO;

页面正上方为职业角色的名称,以及描述(描述和职业角色的字体一致,其实我觉得是不妥的);

下面是各个级别的小圆点以及全部课程的小圆点,当当前用户没有学习/购买过、或者没有学习/购买完“菜鸟”级别下的全部课程,将会默认为其显示菜鸟级别对应的内容,点击某个小圆点可以切换到其对应级别所看到的内容;

当某学员学习了该职业角色的某些课程后,将会默认看到如下的样子(假如该学员已经即将学习完“高级”下的全部课程了):

Skill Tree for WPLMS

已经购买/学习过的课程将不可被购买。

备注

当前小圆点上方文字的CSS 选择器:

当前小圆点的CSS 选择器:

css文件位置:  assets/css/wc-skill-tree.css 第65行左右。

 


error: 错误信息!