倒计时API与使用案例

倒计时API

构造函数 CountDown

注意：

​ 1、下面的 Collection 的值 都是指 Collection 的 handle

公共属性 （静态属性）

| 属性 | 说明/返回 | 返回类型 | | ----------------- | ----------------------------------------------------------- | -------- | | publicData | 倒计时组（所有倒计时数据都在这里面可以找到） | JSON | | publicCollections | 倒计时组的藏品（集合/collection）组，（含有倒计时的藏品集） | Array |

公共方法（静态方法）

| 方法 | 类型 | 参数类型 | 说明/返回 | 返回类型 | | ------------- | ------------------------------------------------------------ | -------------- | ------------------------------------------------------------ | -------- | | getCollection | function(collections)collections 藏品【必需】（集合/collection）组 | Array | 返回参数中含有倒计时的藏品 | Array | | getDHMS | function(t,type)t 毫秒数【必需】type 类型【可选】Number、String 默认值：String | Number，String | 将毫秒数转换为天时分秒，格式 {d,h,m,s}。类型有两个值 Number 和 String，默认值是 StringNumber：则天时分秒的值是 数值类型String：则天时分秒的值是 字符串类型，且 <10 的值会在前面加 0，如 5，则返回的是 05 | JSON |

实例化

// CountDown 实例化
const CD = new CountDown(collection, {
	on: {
        init: function(data) {
            console.log("初始化完成", data);
        },
        watchStartRemTiem: function (t, data) {
            console.log("监听距离倒计时启动剩余时间",t,data)
        },
        watchEndRemTiem: function(t, data) {
            console.log("监听距离倒计时结束剩余时间",t,data)
        }
   }
})

——————————————————————————————————————————————————————————————————————————
参数： collection 是倒计时的 藏品（集合/collection）的话柄

实例参数

| 参数 | 类型 | 说明 | | ---------- | -------------- | --------------------------------------------------- | | collection | String【必需】 | collection 是倒计时的 藏品（集合/collection）的话柄 | | options | Object【可选】 | 选项，这里是配置倒计时实例的属性，目前只有on事件 |

实例事件

| 事件 | 类型 | 说明 | | ----------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | init | function(data)data：倒计时实例的数据【JSON】 | 实例初始化完成后的回调 | | watchStartRemTiem | funtion(t，data)t 距离倒计时启动剩余毫秒数【数值类型】data 倒计时实例的数据【JSON】 | 监听距离倒计时启动剩余毫秒数。即，当距离倒计时启动剩余毫秒数发生变化变化时的回调 | | watchEndRemTiem | funtion(t，data)t 距离倒计时结束剩余毫秒数【数值类型】data 倒计时实例的数据【JSON】 | 监听距离倒计时结束剩余毫秒数。即，当距离倒计时结束剩余毫秒数发生变化变化时的回调 |

实例方法

| 方法 | 类型 | 说明 | | ---------- | ---------- | ---------- | | clearTimer | function() | 清除定时器 | | destroy | function() | 注销实例 |

使用案例

安装

1、将 ib-countdowns.liquid 倒计时section文件 上传到 section 目录下

2、在 theme.liquid 的 body 正下方插入

{% section 'ib-countdowns' %}

提示： ib-countdowns 不一定要在 theme.liquid 中引入，假如你只有产品页面使用该倒计时，你也可以在只产品页面中引入。我们所需要确保的是，该文件放在我们实例化倒计时前面

逻辑（这里叫：倒计时三部曲 吧）

如何使用该组件，我这里给大家梳理下主要逻辑，其实也很简单，主要有三步

第一步：获取 倒计时的 collection

第二步：实例化 倒计时

第三部：渲染 倒计时的DOM

一、在特定的产品使用（一个或多个）倒计时

大家都是程序猿，我就不说太细，这里我就直接放代码，并对逻辑和要点做下描述

我们将下方代码作为一个片段，并插入到我们 产品页面所要显示的位置，就可以看到效果，当然，你的倒计时数据也要设置正确，不如也不会显示

<!--
 * @Author: 郑勇锋
 * @Description: 
 * @Date: 2020-07-29 17:31:30
 * @LastEditors: 郑勇锋
 * @LastEditTime: 2020-07-29 17:33:53
 * @FilePath: \ibtheme\snippets\ib-product-countdown.liquid
-->
<style>
    .ib-countdown {
        display: none;
    }
    .ib-countdown[data-startime="0"] {
        display: block;
    }
    .ib-countdown .ib-countdown-timer {
        text-align: center;
        margin: 20px auto;
        background: rgb(255, 65, 81);
        border-radius: 30px;
        max-width: 400px;
        font-family: 'Open Sans', sans-serif;
        overflow: hidden;
        display: inline-block;
        padding: 0 30px;
    }
    .ib-countdown .ib-countdown-timer > span {
        display: block;
        float: left;
        font-size: 26px;
        color: #FFFFFF;
        height: 60px;
        padding: 10px 20px 0;
        line-height: 25px;
        border-style: inset;
        border-color: rgba(255, 255, 255, 0.45);
        border: 0;
        border-right: 1px solid #FF7E89;
        position: relative;
    }
    .ib-countdown .ib-countdown-timer > span:last-child {
        border-right: 0;
    }
    .ib-countdown .ib-countdown-timer > span::after {
        content: "";
        position: absolute;
        bottom: 0;
        height: 25px;
        line-height: 16px;
        padding-bottom: 9px;
        font-size: 12px;
        text-align: center;
        width: 100%;
        left: 0;
    }
    .ib-countdown .ib-countdown-timer > span.days::after {
        content: "days";
    }
    .ib-countdown .ib-countdown-timer > span.hours::after {
        content: "hours";
    }
    .ib-countdown .ib-countdown-timer > span.minutes::after {
        content: "minutes";
    }
    .ib-countdown .ib-countdown-timer > span.seconds::after {
        content: "seconds";
    }
</style>
<!-- 倒计时 -->
<div id="countdown-container"></div>

<script>
    {% if request.page_type == "product"%}
    $(document).ready(function () {
        
        // 获取产品的 collection 数组
        {% assign collections = product.collections%}
        const collections = []
        {% for collection in product.collections %}
            collections.push("{{ collection.handle }}")
        {% endfor %}
        
        // 获取含有倒计时 collection 数组
        const collectionCDs = CountDown.getCollection(collections);

        // 渲染 倒计时DOM 的方法
        const addCountdownDOM = (container, data) => {
            console.log(container);
            let endRemTiem = CountDown.getDHMS(data.endRemTiem);
            let startRemTiem = CountDown.getDHMS(data.startRemTiem);
            console.log(endRemTiem, startRemTiem);
            if (!container || !data) return;
            const html = /*html*/`
                <div class="ib-countdown" data-startime="${data.startRemTiem}" data-name="${data.data.name}" data-position="${data.data.position}">
                    <div class="ib-countdown-timer">
                        <span class="days">${endRemTiem.d}</span>
                        <span class="hours">${endRemTiem.h}</span>
                        <span class="minutes">${endRemTiem.m}</span>
                        <span class="seconds">${endRemTiem.s}</span>
                    </div>
                    <div class="ib-countdown-content">
                        ${data.data.content}
                    </div>
                </div>
            `
            $(container).append(html)
        }
        
        // 更新 倒计时DOM 中的时间
        const updateCountdownDOM = (t, data) => {
            const endRemTiem = CountDown.getDHMS(t);
            const timerDom = $(`.ib-countdown[data-position="${data.data.position}"] .ib-countdown-timer`);
            timerDom.find(".days").html(endRemTiem.d);
            timerDom.find(".hours").html(endRemTiem.h);
            timerDom.find(".minutes").html(endRemTiem.m);
            timerDom.find(".seconds").html(endRemTiem.s);
            if (t === 0) {
                return $(`.ib-countdown[data-position="${data.data.position}"]`).slideUp();
            }
        }
        // 实例化倒计时
        const CD = [];
        // 遍历 产品中的倒计时 并 实例化 他们
        collectionCDs.forEach((collection, index) => {
            CD[index] = new CountDown(collection, {
                on: {
                    init: function(data) {
                        console.log("初始化完成", data);
                        // 向 #countdown-container 中插入倒计时DOM
                        addCountdownDOM("#countdown-container", data)
                    },
                    watchStartRemTiem: function (t, data) {
                        // 更新 对应 倒计时DOM data-startime 中的值（距离倒计时启动的毫秒数）
                        // 这里我设置了个样式 .ib-countdown[data-startime="0"] { display: block; }，什么意思就不用我说了吧，大家看看就懂了
                        $(`.ib-countdown[data-position="${data.data.position}"]`).attr({"data-startime": `${t}`})
                    },
                    watchEndRemTiem: function(t, data) {
                        // 更新 对应倒计时DOM 的时间
                        updateCountdownDOM(t, data)
                    }
                }
            });
            
        });
  
    });
    {% endif %}
</script>

———————————————————————————————————————————————————— 注意 ——————————————————————————————————————————————————————————————
这逻辑中有两个主要点，
一、如何拿到该产品的含有倒计时的 collection 数组
第一是先拿到 产品的系列集合，第二是 通过  getCollection 获取符合条件的 collection

二、如何找到对应的倒计时DOM
在 倒计时数据中 我个每个倒计时设置了一个 position 属性，表示倒计时在倒计时组中的位置，也是一个辨别倒计时的属性（类似于索引）。我们可以给每个 倒计时DOM 设置个 data-position 属性 以此来建立它们的关系

二、在特定的页面使用倒计时

这里我只讲逻辑，因为我现在还没有去 开发 该案例，等后面我有需要写该需求的需求时，我再给大家补充

我们就按照上面的 倒计时三部曲，进行说明

第一步：如何获取倒计时的 collection

​ 1、我们先在要添加倒计时的部分或者页面里面、添加一个自定内容（叫：倒计时：里面只需要一个藏品选择器，而这个藏品的值要和 我们倒计时的藏品值一致即可）

​ 2、通过 液体语言 去获取上一步设置的值即可，该值便是我们倒计时的 collection

第二步：实例化 该倒计时

第三步：渲染 DOM

第二步、第三步 和我们上面 《在特定的产品使用（一个或多个）倒计时》都差不多，只不过，我们这里只有一个倒计时