shopify开发常见模块功能一：网站活动倒计时

shopify开发常用场景一：倒计时

常用场景代码提取，使得在shopify页面共用倒计时，且互不干扰，欢迎大家补充指正！

1.DOM结构

js 复制代码

<div class="countdown__block">
    <div
        class="countdown__timer flex text-center"
        data-year="{{ section.settings.timer_years }}"
        data-month="{{ section.settings.timer_months }}"
        data-day="{{ section.settings.timer_days }}"
        data-hour="{{ section.settings.timer_hours }}"
        data-minute="{{ section.settings.timer_minutes }}"
        >
        <div class="countdown__item" id="days">
          <p class="h5">00</p>
          <span class="text-xs">DAYS</span>
        </div>
        <div class="countdown__item" id="hours">
          <p class="h5">00</p>
          <span class="text-xs">HRS</span>
        </div>
        <div class="countdown__item" id="minutes">
          <p class="h5">00</p>
          <span class="text-xs">MIN</span>
        </div>
        <div class="countdown__item" id="seconds">
          <p class="h5">00</p>
          <span class="text-xs">SEC</span>
        </div>
    </div>
</div>

2.1 css样式可以自定义-参考

js 复制代码

  .countdown__block { 
      padding: 10px;
      width: 100%;
      grid-template-columns: 1fr;

      {% if block.settings.show_border %}
      border: 1px solid #d3d3d3;
      {% endif %}

      {% if block.settings.background != blank %}
      background: {{ block.settings.background }};
      {% endif %}

      {% if block.settings.background_gradient != blank %}
      background: {{ block.settings.background_gradient }};
      {% endif %}

      {% if block.settings.text_color != blank %}
      color: {{ block.settings.text_color }};
      {% endif %}
  }

  .countdown__block > .countdown__header {
      gap: 10px;
      justify-content: center;
  }

  .countdown__block > .countdown__header .text,
  .countdown__block > .countdown__header p,
  .countdown__block > .countdown__header span {
      line-height: 1;
      margin-block-start: 0;
  }

  .countdown__block > .countdown__timer { 
      display: flex;
      justify-content: center;
      align-items: center; 
  }

  @media (min-width: 1100px) {
      .countdown__block {
          grid-template-columns: 1fr 2fr;
      }
  }

  @media (min-width: 900px) {
      .countdown__block{ 
        gap: 4%;
        padding: 20px 10px;
      }
      .countdown__block > .countdown__timer {
          gap: 4px;
      }

      .countdown__block > .countdown__header {
          justify-content: flex-start;
      }

      .countdown__block > .countdown__timer {
          margin-top: 10px; 
          gap: 10px;
      }
  }

  .icon-countdown {
      width: 40px;
      height: 40px;
  }

  @media (min-width: 800px) {
      .icon-countdown {
          width: 55px;
          height: 55px;
      }
  }

  .countdown__item {
      margin: 0 5px;
      text-align: center;
      position: relative;

      {% if block.settings.time_background_color != blank %}
      background: {{ block.settings.time_background_color }};
      {% endif %}

      {% if block.settings.time_text_color != blank %}
      color: {{ block.settings.time_text_color }};
      {% endif %} 
      
      min-width: 60px;
      padding: 6px;
      border-radius: 12px;
      line-height: 1rem;
  }
  @media (min-width: 800px) {
      .countdown__item {
        min-width: 66px;
        padding: 8px 6px;
      }
  }

  .countdown__item > p {
      margin: 0;
      line-height: 1;
  }

  .countdown__item > span {
      opacity: 0.8;
  }

2.2 抽离的js

js 复制代码

function startCountdown(timerElement) {
    let targetYear = timerElement.dataset.year;
    let targetMonth = timerElement.dataset.month - 1; // 月份从0开始
    let targetDay = timerElement.dataset.day;
    let targetHour = timerElement.dataset.hour;
    let targetMinute = timerElement.dataset.minute;

    let targetTime = new Date(
        targetYear,
        targetMonth,
        targetDay,
        targetHour,
        targetMinute
    ).getTime();

    function formatNumber(num) {
        return num < 10 ? '0' + num : num;
    }

    function updateCountdown() {
        let now = new Date().getTime();
        let distance = targetTime - now;

        let days = Math.floor(distance / (1000 * 60 * 60 * 24));
        let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        let seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // 更新子元素的内容
        timerElement.querySelector("#days p").textContent = formatNumber(days);
        timerElement.querySelector("#hours p").textContent = formatNumber(hours);
        timerElement.querySelector("#minutes p").textContent = formatNumber(minutes);
        timerElement.querySelector("#seconds p").textContent = formatNumber(seconds);

        // 倒计时结束后清除
        if (distance < 0) {
            clearInterval(interval);
            timerElement.parentElement.style.display = "none"; // 隐藏父级元素
        }
    }

    let interval = setInterval(updateCountdown, 1000);
    updateCountdown();
}

// 启动倒计时的函数
function initializeCountdowns() {
    const countdownTimers = document.querySelectorAll(".countdown__timer");
    countdownTimers.forEach(timer => {
        startCountdown(timer); // 启动倒计时
    });
}

// 页面加载完成后初始化倒计时
document.addEventListener("DOMContentLoaded", initializeCountdowns);

3.在theme.liquid文件引入

<script src="{{ 'custom-countdown.js'| asset_url }}" defer="defer"></script>