Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例

关于 Mobile First 的概念，请查看我这篇文章：什么是前端开发中的 mobile first 策略.

下图是 SAP 电商云 Spartacus UI 的搜索结果页面：

其布局设计：template: SearchResultListPageTemplate

Section2 就是上图这块黑色的条幅。

ProductLeftRefinements：左边这块区域。

facet：

template 的定义：

对应的 css：

在 Chrome 开发者工具里将当前设备模拟成 mobile 之后，左边的 ProductLeftRefinements 就消失了：

在手机上，我们需要显式点 filter by，才能打开 facet：

更多Jerry的原创文章，尽在：“汪子熙”:

Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例相关推荐

如何在 SAP 电商云 Spartacus UI 中创建新的页面
Spartacus 中的页面基于使用相关 API 从 SAP Commerce 后端获取的 CMS 页面.来自 SAP Commerce 端的数据定义了元数据,如 url.标题等,以及页面的结构.结构 ...
SAP 电商云 Spartacus UI 的 checkout 设计
What is behavior before Jerry's fix The chapter below described the behavior BEFORE Jerry's fix. Sce ...
RxJs 操作符 withLatestFrom 在 SAP 电商云 Spartacus UI 中的应用
看下面这段代码: getSupportedDeliveryModes(): Observable<DeliveryMode[]> {return this.checkoutStore.pi ...
SAP 电商云 Spartacus UI 中的 cx-message 和 global message
前者如果消息类型为 ERROR,除非用户手动点击 X,否则不会消失: 后者为 Global Message,数秒钟后会自动消失: 后者通过 globalMessageService 的 add 方法抛 ...
SAP 电商云 Spartacus UI Proxy Facade 的一个实际例子
如何理解 SAP 电商云 Spartacus UI 中的 proxy facade? Jerry 这篇文章什么是 SAP 电商云 Spartacus UI 的 proxy façade提供了理论上的解 ...
SAP 电商云 Spartacus UI 产品搜索结果的设计明细
我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面: http://localhost:4000/electronics-spa/en/USD/search/sony ...
SAP 电商云 Spartacus UI 从 CMS 取回 slots 和 component 之后的处理
从前一篇文章SAP 电商云 Spartacus UI 的双重 layout 配置层设计我们得知,Spartacus 层面的 layout-config.ts 可以控制 page template 应 ...
SAP 电商云 Spartacus UI ComponentDataProvider defer 工厂函数
为什么 this.componentService.getItems 最后就触发到 Component-data.provider.ts 工厂函数的执行了? 29行的 getService: getS ...
SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改
我们知道在 SAP 电商云 Spartacus UI 里,用户可以通过下拉菜单更改当前访问 site 的语言: 监控语言变化的代码: this.subscription.add(this.langua ...

Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例

Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例相关推荐

最新文章

热门文章