Baymax-shopify-countdown NPM

倒计时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

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

@everything-registry/sub-chunk-1219

1.0.1

5 years ago

1.0.0