能否用Shopify Liquid替代实现营业时间的JavaScript代码？

云原生阿岚

2026-8-13

问题描述

我已经为网站搭建了营业时间时间表，但希望移除冗余JavaScript，仅通过Shopify Liquid实现。我对Liquid并不熟悉，能否指引方向？是否可实现“判断特定日期是否处于某时段内”的条件逻辑？

原实现代码如下：

JavaScript

var currentDate = new Date();
var weekday = [];
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var currentDay = weekday[currentDate.getDay()];

var currentTimeHours = currentDate.getHours();
currentTimeHours = currentTimeHours < 10 ? "0" + currentTimeHours : currentTimeHours;
var currentTimeMinutes = currentDate.getMinutes();
var timeNow = currentTimeHours + "" + currentTimeMinutes;

var currentDayID = "#" + currentDay; //gets todays weekday and turns it into id
$(currentDayID).toggleClass("today"); //this works at hightlighting today

var openTimeSplit = $(currentDayID).children('.opens').text().split(":");

var openTimeHours = openTimeSplit[0];
openTimeHours = openTimeHours < 10 ? "0" + openTimeHours : openTimeHours;

var openTimeMinutes = openTimeSplit[1];
var openTimex = openTimeSplit[0] + openTimeSplit[1];

var closeTimeSplit = $(currentDayID).children('.closes').text().split(":");

var closeTimeHours = closeTimeSplit[0];
closeTimeHours = closeTimeHours < 10 ? "0" + closeTimeHours : closeTimeHours;

var closeTimeMinutes = closeTimeSplit[1];
var closeTimex = closeTimeSplit[0] + closeTimeSplit[1];

if (timeNow >= openTimex && timeNow <= closeTimex) {
    $(".openorclosed").toggleClass("open");
} else {
    $(".openorclosed").toggleClass("closed");
}

CSS

.openinghours {
    margin:10px;
    padding:0 10px 0 10px;
    overflow: hidden;
    display: inline-block;
}
.openinghourscontent {
    float:left;
}
.openinghourscontent h2 {
    display:block;
    text-align:center;
    margin-top:.33em;
}

.today {
    color: #8AC007;
}
.opening-hours-table tr td:first-child {
    font-weight:bold;
}
#open-status {
    display:block;
    margin-top:-1em;
    text-align:center;
}
.openorclosed:after {
    content:" åbent på disse tider:";
}
.open {
    color:green;
}
.open:after {
    content:" Åbent";
    color: #6C0;
}
.closed:after {
    content:" Lukket";
    color: red;
}
.opening-hours-table tr td {
    padding:5px;
}

HTML

<section class="openinghours">
    <div class="openinghourscontent section">
        <div class="header">
             <h2></h2>
<span id="open-status"><small class="openorclosed">Vi har </small></span>

        </div>
        <table class="opening-hours-table">
            <tr id="Monday" itemprop="openingHours" title="Open Monday at 9am to 6pm">
                <td>Mandag</td>
                <td class="opens">12:00</td>
                <td>-</td>
                <td class="closes">19:00</td>
            </tr>
            <tr id="Tuesday" itemprop="openingHours" title="Open Tuesday at 9am to 6pm">
                <td>Tirsdag</td>
                <td class="opens">12:00</td>
                <td>-</td>
                <td class="closes">22:00</td>
            </tr>
            <tr id="Wednesday" itemprop="openingHours" title="Open Wednesday at 9am to 6pm">
                <td>Onsdag</td>
                <td class="opens">12:00</td>
                <td>-</td>
                <td class="closes">19:00</td>
            </tr>
            <tr id="Thursday" itemprop="openingHours" title="Open Thursday at 9am to 8pm">
                <td>Torsdag</td>
                <td class="opens">12:00</td>
                <td>-</td>
                <td class="closes">19:00</td>
            </tr>
            <tr id="Friday" itemprop="openingHours" title="Open Friday at 9am to 6pm">
                <td>Fredag</td>
                <td class="opens">12:00</td>
                <td>-</td>
                <td class="closes">19:00</td>
            </tr>
            <tr id="Saturday" itemprop="openingHours" title="Open Saturday at 10am to 6pm">
                <td>Lørdag</td>
                <td class="opens">12:00</td>
                <td>-</td>
                <td class="closes">19:00</td>
            </tr>
            <tr id="Sunday" itemprop="openingHours" title="Open Sunday at 11am to 4pm">
                <td>Søndag</td>
                <td class="closed"> </td>
                <td></td>
                <td class="closes"></td>
            </tr>
        </table>
  
        <script>
            (function(e, t, n, r) {
                if (e) return;
                t._appt = true;
                var i = n.createElement(r),
                    s = n.getElementsByTagName(r)[0];
                i.async = true;
                i.src = '//dje0x8zlxc38k.cloudfront.net/loaders/s-min.js';
                s.parentNode.insertBefore(i, s)
            })(window._appt, window, document, "script")
        </script>
    </div>
</section>

实现方案

完全可以用Shopify Liquid实现你的需求，Liquid提供了日期时间处理和条件判断的内置对象与过滤器，能替代原JS的全部逻辑。

1. 结构化营业时间数据

先把营业时间整理成Liquid可调用的结构化数据，推荐直接在模板里定义，或者用Shopify元字段存储（方便后台修改）：

{% assign business_hours = {
  "Monday": {"open": "12:00", "close": "19:00", "label": "Mandag"},
  "Tuesday": {"open": "12:00", "close": "22:00", "label": "Tirsdag"},
  "Wednesday": {"open": "12:00", "close": "19:00", "label": "Onsdag"},
  "Thursday": {"open": "12:00", "close": "19:00", "label": "Torsdag"},
  "Friday": {"open": "12:00", "close": "19:00", "label": "Fredag"},
  "Saturday": {"open": "12:00", "close": "19:00", "label": "Lørdag"},
  "Sunday": {"open": "", "close": "", "label": "Søndag"}
} %}

2. 用Liquid实现渲染与状态判断

替换原HTML和JS逻辑，直接用Liquid完成今日高亮、营业状态判断：

<section class="openinghours">
  <div class="openinghourscontent section">
    <div class="header">
      <h2></h2>
      <span id="open-status">
        {% assign current_day = 'now' | date: '%A' %}
        {% assign current_time = 'now' | date: '%H%M' | plus: 0 %}
        {% assign today_hours = business_hours[current_day] %}
        
        {% if today_hours.open != blank %}
          {% assign open_time = today_hours.open | replace: ':', '' | plus: 0 %}
          {% assign close_time = today_hours.close | replace: ':', '' | plus: 0 %}
          
          {% if current_time >= open_time and current_time <= close_time %}
            <small class="openorclosed open">Vi har</small>
          {% else %}
            <small class="openorclosed closed">Vi har</small>
          {% endif %}
        {% else %}
          <small class="openorclosed closed">Vi har</small>
        {% endif %}
      </span>
    </div>
    <table class="opening-hours-table">
      {% for day_key in business_hours %}
        {% assign day = day_key[1] %}
        {% assign is_today = (day_key[0] == current_day) %}
        <tr id="{{ day_key[0] }}" {% if is_today %}class="today"{% endif %} itemprop="openingHours" {% if day.open != blank %}title="Open {{ day_key[0] }} at {{ day.open }} to {{ day.close }}"{% endif %}>
          <td>{{ day.label }}</td>
          {% if day.open != blank %}
            <td class="opens">{{ day.open }}</td>
            <td>-</td>
            <td class="closes">{{ day.close }}</td>
          {% else %}
            <td class="closed"></td>
            <td></td>
            <td class="closes"></td>
          {% endif %}
        </tr>
      {% endfor %}
    </table>
  </div>
</section>

3. 保留原有CSS

原CSS无需修改，直接沿用即可。

关键Liquid知识点说明

{{ 'now' | date: '%A' }}：获取当前服务器时间对应的星期全称（英文，和我们定义的键名匹配）
{{ 'now' | date: '%H%M' }}：获取当前时间的数字格式（如1430代表14:30），加plus: 0转成数字方便比较
replace: ':'：去掉时间字符串里的冒号，统一格式用于数字比较
{% if %}条件判断：实现今日高亮、营业时段判断的核心逻辑

内容的提问来源于stack exchange，提问作者Elias Nielsen

能否用Shopify Liquid替代实现营业时间的JavaScript代码？

JavaScript #

CSS #

HTML #

1. 结构化营业时间数据 #

2. 用Liquid实现渲染与状态判断 #

3. 保留原有CSS #

关键Liquid知识点说明 #