Name Last Update
src Loading commit data...
.babelrc Loading commit data...
.eslintrc.json Loading commit data...
.gitignore Loading commit data...
README.md Loading commit data...
index.js Loading commit data...
package.json Loading commit data...
rollup.config.js Loading commit data...

YOHO!前端js的功能封装包,主要用于在活动页面中,对主要功能的封装。

封装实现的功能

1. 用户相关

1. 获取用户的信息和状态
2. 验证登录
3. 收藏商品

2. 促销相关

1. 优惠券领取
2. YOHO币领取

3. 分享相关

1. 分享到微信好友
2. 分享到朋友圈

4. 个性化展示

1. 个性化数据页面内元素标记
2. 获取数据绑定到界面

使用说明

  1. 本插件jssdk 依赖于jQuery, 所以请先加载 jQuery;

  2. 然后加载本插件jssdk;

功能说明

  1. 获取用户信息和状态: app: url中的uid 来判断用户是否登录

    浏览器:jsonp调用接口来判断用户是否登录

  2. 验证登录:auth() 若用户未登录,则会将所以的 <a class="auth">标签的href属性 替换为 登录url

  3. 收藏商品:favout(skn) 收藏传入skn所相对应的商品

  4. 优惠券领取: 给 标签加上yoho-conpon类名,并加上 data-token 属性,值为后台生成的 token。

    示例:

        <a class="yoho-conpon" href="javascript:;" data-token="29-6ea9ab1baa0efb9e19094440c317e21b">
            <h1>领券按钮</h1>
        </a>
  5. 有货币领取: 给 标签加上yoho-coin类名,并加上 data-token 属性,值为后台生成的 token。

    示例:

        <a class="yoho-coin" href="javascript:;" data-token="22e369853df766fa44e1ed0ff613f563bd">
            <h1>有货币领取按钮</h1>
        </a>
  6. 分享相关: 如果需要定制分享参数时,通过方式自定义

    示例:

            <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. 个性化推荐:

    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