——————————目录大纲——————————
————————————————————————一、背景
梳理目前所有 https://www.lenovo.com/us/en/case-studies-customer-success-stories 页面的相关信息。
二、正文
1、case-studies-customer-success-stories
1.1 引用模板
使用模板:lenovo-www/ui.content/src/main/content/jcr_root/conf/lenovo-www/settings/wcm/templates/lenovo-success-landing-page-template
1.2 页面生成
1.2.1
创建完资源后,填完General的必填项后来到Customer Success Stroy Tab页下

在这个属性页下,点击create page之前需要填写1个必填字段
Success - Root Page Path:页面的存储位置,一旦保存不能修改(测试环境的case study页面在这个路径下/content/lenovo/www/global/en/case-studies-customer-success-stories)
随后点击Create Page就可以创建成功,点击View Page可以查看创建的Page

创建出来的Page在列表中可以通过关键字搜到,默认新创建的排在第一位

创建出来的Page在sites列表中,默认新创建的排在最后一位

1.3 页面构成
1.3.1 主banner

对应Editor位置:

1.3.2 主卡片

对应Editor位置:

1.3.3 中部焦点(Smart in focus)

对应Editor位置:


对应组件:
lenovo-platform/ui.apps/src/main/content/jcr_root/apps/lenovo-platform/components/content/feature-stories-section
数据来源:
lenovo-platform/core/src/main/java/com/lenovo/platform/core/models/FeaturedStoriesSectionModel.java
getFeatureStories()方法
1.3.4 中部LOGO墙

对应Editor位置:


1.3.5 搜索模块(Search Filter Container)

对应Editor位置:


对应组件:
lenovo-platform/ui.apps/src/main/content/jcr_root/apps/lenovo-platform/components/content/filter-container
filter的条件是依靠Session storage里面的selected_filters和last_filter字段存储:

数据来源:
EAGLE-12730
-
Getting issue details...
STATUS
filter这块的处理逻辑主要来自于JS:https://www.lenovo.com/etc.clientlibs/lenovo-www/clientlibs/clientlib-success/filter/v1/filter.lc-93c59a6ec90f2bfda9ac06095f33fc28-lc.min.js
对应代码里路径为:
lenovo-www/ui.apps/src/main/content/jcr_root/apps/lenovo-www/clientlibs/clientlib-success/filter/v1/filter/js/filter.js
处理流程大致如下:
1、页面加载的时候会获取url中的参数或者是session storage里面的selected_filters
如果这两个里面任一有值,则会调用方法ajaxCall()查接口:
https://author-p44761-e196277.adobeaemcloud.com/exp-services/lenovo/successstoryfilters.successstories.json?searchPath=content/lenovo/www/global/en/case-studies-customer-success-stories
成功获取数据filters(主分类)和mappings(子分类)后,调用filters_loop()方法和 customerstories_loop()方法处理数据。
filters_loop():该方法遍历过滤器数据,生成移动端和桌面端的过滤器按钮,并将其插入到相应的 HTML 元素中 customerstories_loop():该方法遍历客户故事数据,生成客户故事的 HTML 内容,并将其插入到页面中
2、然后在customerstories_loop()中会调用getParameters()方法设置初始过滤器状态
getParameters():方法会根据 URL 中的 # 或 sessionStorage 中的 selected_filters 设置过滤器的初始状态 ,还会更新过滤器的计数和滚动到过滤器容器的位置
3、筛选功能的关联关系(代码层面与页面展示)

代码位置:lenovo-platform/core/src/main/java/com/lenovo/platform/core/servlets/SuccessStoryFiltersServlet.java
代码:

对应的genericlist:


如何配置才能筛选出想要筛出的资源?
1 从assets中的某个图片打开属性,配置对应的metadata字段就能筛出

有mapping关系的字段有Product Group & Series *、Services、Industry、Audience Segment;
Asset Title、Asset Description 编辑上对应的关键字也可以mapping到;
2 保存完信息需要找到对应的tab下点击update page才能更新到网页上

2、featured-stories
2.1 引用模板
lenovo-www/ui.content/src/main/content/jcr_root/conf/lenovo-www/settings/wcm/templates/lenovo-success-landing-page-template
2.2 页面生成
2.3 页面构成
2.3.1 头部banner

对应Editor位置:

2.3.2 中部banner

对应Editor位置:

2.3.3 底部Filter Container(Featured Filter Container)

对应Editor位置:

组件位置:
lenovo-platform/ui.apps/src/main/content/jcr_root/apps/lenovo-platform/components/content/filter-container/v2/featured-filter-container
数据来源:
lenovo-platform/core/src/main/java/com/lenovo/platform/core/models/FeatureFilterModel.java
参考1.3.5搜索模块(SearchFilterContainer)
3、case study detail page
EAGLE-12859
-
Getting issue details...
STATUS
4、其他资料
添加 Adobe Analytics:https://experienceleague.adobe.com/zh-hans/docs/platform-learn/implement-in-websites/implement-solutions/analytics
上一篇
Virtusa速记下一篇
case-study页面数据生成