YOHO!前端js的功能封装包,主要用于在活动页面中,对主要功能的封装。
封装实现的功能
1. 用户相关
1. 获取用户的信息和状态
2. 验证登录
3. 收藏商品
2. 促销相关
1. 优惠券领取
2. YOHO币领取
3. 分享相关
1. 分享到微信好友
2. 分享到朋友圈
4. 个性化展示
1. 个性化数据页面内元素标记
2. 获取数据绑定到界面
5. 移动端打开app
1. 通过url的openapp参数来判断是否打开 app。
使用说明
本插件jssdk 依赖于jQuery, 所以请先加载 jQuery;
然后加载本插件jssdk;
功能说明
-
获取用户信息和状态: app: url中的uid 来判断用户是否登录
浏览器:jsonp调用接口来判断用户是否登录
验证登录:auth() 若用户未登录,则会将所以的
<a class="auth">
标签的href
属性 替换为 登录url收藏商品:favout(skn) 收藏传入
skn
所相对应的商品-
优惠券领取: 给 标签加上
yoho-conpon
类名,并加上data-token
属性,值为后台生成的 token。示例:
<a class="yoho-conpon" href="javascript:;" data-token="29-6ea9ab1baa0efb9e19094440c317e21b"> <h1>领券按钮</h1> </a>
-
有货币领取: 给 标签加上
yoho-coin
类名,并加上data-token
属性,值为后台生成的 token。示例:
<a class="yoho-coin" href="javascript:;" data-token="22e369853df766fa44e1ed0ff613f563bd"> <h1>有货币领取按钮</h1> </a>
-
分享相关: 如果需要定制分享参数时,通过方式自定义
示例:
<input id="shareLink" type="hidden" value="http://feature.yoho.cn/1228/1228MEMBER/index.html"> <input id="shareDesc" type="hidden" value="VIP专场劲爆开启->VIP独享4重福利,超值冬品限时5折,更有专享年终福利券等你抢!"> <input id="shareImg" type="hidden" value="http://feature.yoho.cn/public/shareimg/1228member.png"> <input id="shareTitle" type="hidden" value="【YOHO!BUY有货】12月28日潮集会员日">
-
个性化推荐:
7.1. 定义商品模版
示例:
<div class="product-source" condition='{"sort":"111","limit":10, "pid":1}'> <input id="imgwh" type="hidden" name="" value="450x500"> <div class="feature-product-info"> <a class="product-detail" href='http://item.yohobuy.com/product/pro_330189_424569/PUMADUPLEXEVOPARTYDiBangXie36146103.html?from=search-s-51184789_1_1&openby:yohobuy={"action":"go.productDetail","params":{"product_id":"330189","from":"search-s-51184789_1_1"}}'> <div> <img class="product-detail-img" src="http://img10.static.yhbimg.com/goodsimg/2016/11/21/12/01c6529b3ecdc8c6085a48446f331fae4c.jpg?imageMogr2/thumbnail/450x500/extent/450x500/background/d2hpdGU=/position/center/quality/60"> </div> <div class="product-detail-text"> <div class="name"> <span class="product-name">双贴袋连帽棉夹克【两色可选】</span> </div> <div class="price"> <span class="sale-price">¥589.00</span> <span class="market-price">¥779.00</span> </div> </div> </a> <a class="product-brand" href="http://m.yohobuy.com/product/index/brand?shop_id=1540"> <span class="brand-name">Life After Life</span> <span class="brand-go">进入店铺</span> </a> </div> </div>
7.2. 详细说明
以下class名 需要固定不变,引入的 jssdk 会通过class名 来做动态替换
.product-source: 一个商品池标示,属性condition是检索条件(详细说明见7.3) #imgwh: value值为 商品图片显示的宽x高 .feature-product-info: 标示一个商品item .brand-name: 店铺名称(如果不需要显示店铺,可不需要) a.product-brand: 进入店铺的url (如果不需要显示店铺,可不需要) a.product-detail: 进入商品详情页 url .product-detail-img: 商品图片 .product-name: 商品名称 .sale-price: 销售价格 .market-price: 市场价格
7.3. condition 说明
参数名称 说明 示范 sort 商品的分类,如果是多个,用逗号隔开 123,111,114 brand 商品的品牌,如果是多个,用逗号隔开 144,349 pid 活动id 123 enum 是否是枚举:1:是,0:不是 1 limit 获取个数,当enum为1时,limit无效 10