README.md 5.46 KB

Raw Blame History Permalink



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" cloneitem="true" condition='{"sort":"111","limit":10, "pid":1}'>
        <input class="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/id 需要固定不变，引入的 jssdk 会通过class名 来做动态替换


class/id
说明


.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
商品图片url


.product-name
商品名称 （如果不需要显示，可不写）


.sale-price
销售价格


.market-price
市场价格


7.3. condition 说明


参数名称
说明
示范


sort
商品的小分类，如果是多个，用逗号隔开
123,111,114


misort
商品的中分类，如果是多个，用逗号隔开
123,111,114


msort
商品的大分类，如果是多个，用逗号隔开
123,111,114


gender
性别
1,3


brand
商品的品牌，如果是多个，用逗号隔开
144,349


pid
活动id
123


enum
是否是枚举：1:是，0:不是
1


limit
获取个数,当enum为1时，limit无效
10


sn
库存筛选条件
10 (库存 > 10)


pd
折扣筛选条件
0.45,0.55 (5折)