JD店铺设计经验一览

20150716adfadf

由于屏蔽一切JS代码,因此要达到便于维护、设计美观的目的,则需要多利用JD自带模块的特点进行制作。

  • 使用模块中的自定义模板来调用。即可达到只修改模板,就能同步所有(但页面仍然需要“发布”才能看到更新)。
  • 默认的店铺公共头部不可二次设计,所以从长远来考虑,可以用“店内搜索框”模块代替。
  • 在加载页面时,module-function=”tabAutoLayout“的jSortContent和jSortTab的宽度会自动写入width,因此无法达到类似window.onresize的效果。
  • 切换样式方式module-function=”autoLayout,tabClass“,可以作用在a标签上,以达到current后按钮内容的变化。
  • 多行省略号方法module-function=”addEllipsis”,需要声明字数才能达到效果,这对于自适应框架来说就没啥意义了。而ext-overflow: ellipsis;需要在一行内才行,因此直接采用overflow: hidden;的方法。
  • 尽量使用:hover + transition组合,来让页面元素动起来。

推荐模块

  • 侧边栏:可自由编辑。比“自定义内容区”好的一点是,它是由编辑+模板组成,靠$!slide.content把编辑的内容添加进去。不采用默认的模板内容,那么该模块就是一个灵活的通用模板。
    例如<div class=”user-flat-v1-common”><h2>$!slide.content</h2></div>,在编辑中只需要填写文字,而要修改标签或结构时,则更改模板内容即可。
  • 店内搜索框:可编辑固定内容。自带默认关键词($!keyword)、热搜词($!hotKeywordArray)等。
  • 分页显示商品:可编辑固定内容,商品自动更新。编辑默认排序为上架时间、好评度、价格、销量,且商品内容自动更新($!item)和定位当前页($!orderBy),需要注意的是价格有两个状态,需要靠$!direction进行判定。
  • 分类推荐:可创建分类,导入商品SKU。分类部分,可通过遍历$goodsCategoryRecList得出分类名,而滑动指示条只能用class=”jSortTabArrow”来表示,当前分类的页面只能自己定义curr来实现,所以有5个分类的话,就要做5个对应的页面。商品列表部分只能手动输入。
  • 代码特效:不可编辑。对于只放置固定模板的地方,可以用这个模块。

浮动导航
使用侧边栏模块。该模块自身只能设置是否在第一屏显示来,而第一屏的判定高度是写死的值,实际上无法达到完美的触发效果(既scroll到610px时才会显示)。
缩减后的声明代码:<div class=”j-module” module-function=”base” module-param=”{show:$!slide.isFirstShow}”>

CSS限制解除
/* Unlock width 990px */
.layout,.w990{width:100%}
/* spacing margin-bottom:10px */
.layout-area .fn-clear{margin-bottom: 0px;}

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据