Would this javascript be possible with Shopify Liquid?

EliasNielsen
November 7, 2022
73 views
1 vote
2 Answers

I’ve set up this opening hours timetable for my website, but I wanted to get rid of unnecessary javascript and therefore wanted to do with liquid only.

I’m not very familiar with it but could anyone maybe point me in the right direction? Is it possible to do "if certain day between this and that time" conditions?

Thanks a lot for helping out,

https://codepen.io/EliasUUUU/pen/GRyMgyj

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");
}

.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;
}

   <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>

Tags: liquid

Answers

Chosen as BEST ANSWER

So, I ended up using Fabio's method, but I wanted to avoid using metafields even though it probably is the better solution. For the interested the code can be found below. The example here is timetable for a week with monday closed tuesday-friday 12-19, saturday 11-19 and sunday closed. The current day is highlighted, also out of opening hours, while open/closed status is shown on top of the table switching between green/red.

    .day_open {
        color: black;
    }
    .day_closed {
        color: light-grey;
    }

    .now_open:before {
        content:"⬤ ";
        color: green;
        vertical-align: baseline;
        padding-right: 3px;
        font-size: 12px;
    }

    .now_open:after {
        content:" We're open";
    }
        
    .now_closed:before {
        content:"⬤ ";
        color: red;
        vertical-align: baseline;
        padding-right: 3px;
        font-size: 12px;
    }

    .now_closed:after {
        content:" We're closed";
    } 
    
    .openclosed {
        font-size: 12px;
    }

    .now_open.openclosed  {
        margin-bottom:15px;
        margin-top:10px;
    }

    .now_closed.openclosed {
        margin-bottom:15px;
        margin-top:10px;
    }

    .opening-hours-table tr td:first-child {
                    font-weight:bold;
                }
    .opening-hours-table tr td:nth-child(2) {
                    padding-left:20px;
                }
    .opening-hours-table tr td {
                    padding:5px 0px;
                    border: none;
                }
    .opening-hours-table td {
                    border: none !important;
                }
    .opening-hours-table {
                    font-size: 14px;
                }

        {% assign current_day = "now" | date: "%A" %}
        {% assign current_hour = "now" | date: "%H" %}
        {% assign opening1 = "Monday" %}
        {% assign opening_hour1 = "-" %}
        {% assign closing_hour1 = "-" %}
        {% assign opening2 = "Tuesday" %}
        {% assign opening_hour2 = "12" %}
        {% assign closing_hour2 = "19" %}
        {% assign opening3 = "Wednesday" %}
        {% assign opening_hour3 = "12" %}
        {% assign closing_hour3 = "19" %}
        {% assign opening4 = "Thursday" %}
        {% assign opening_hour4 = "12" %}
        {% assign closing_hour4 = "19" %}
        {% assign opening5 = "Friday" %}
        {% assign opening_hour5 = "12" %}
        {% assign closing_hour5 = "19" %}
        {% assign opening6 = "Saturday" %}
        {% assign opening_hour6 = "11" %}
        {% assign closing_hour6 = "19" %}
        {% assign opening7 = "Sunday" %}
        {% assign opening_hour7 = "-" %}
        {% assign closing_hour7 = "-" %}
    
        
            {% for opening in current_day %} 
                {% assign open_class = "" %}    
                {% if current_day == opening1 %}
                {% assign open_class = "now_closed" %}
                {% endif %}
                {% if current_day == opening1 %}
                    {% if current_hour < closing_hour1 %}
                        {% if current_hour >= opening_hour1 %}
                            {% assign open_class = "now_open" %}
                        {% endif %}
                    {% endif %}
                {% endif %}
            {% endfor %}
        <table id="openings" class="opening-hours-table">
    
                {% assign day_class = "day_closed" %}
                <div class="{{ open_class }} openclosed"> </div>    
                <tr class="{{ day_class }}"><td>{{ opening1 }}:</td><td> Closed </td></tr>
    
                <!-- /////// -->
    
                {% for opening in current_day %}
                    {% assign open_class = "" %}   
                    {% if current_day == opening2 %}
                    {% assign open_class = "now_closed" %}
                    {% endif %}
                    {% if current_day == opening2 %}
                        {% if current_hour < closing_hour2 %}
                            {% if current_hour >= opening_hour2 %}
                                {% assign open_class = "now_open" %}
                            {% endif %}
                        {% endif %}
                    {% endif %}   
                {% endfor %}
            {% assign day_class = "day_closed" %}
            {% if current_day == opening2 %}
                        {% assign day_class = "day_open" %}
                    {% endif %}
            <div class="{{ open_class }} openclosed"> </div>        
            <tr class="{{ day_class }}"><td>{{ opening2 }}:</td><td>{{ opening_hour2 }}:00 - {{ closing_hour2 }}:00</td></tr>
    
            <!-- /////// -->
    
                {% for opening in current_day %} 
                    {% assign open_class = "" %}    
                    {% if current_day == opening3 %}
                    {% assign open_class = "now_closed" %}
                    {% endif %}
                    {% if current_day == opening3 %}
                        {% if current_hour < closing_hour3 %}
                            {% if current_hour >= opening_hour3 %}
                                {% assign open_class = "now_open" %}
                            {% endif %}
                        {% endif %}
                    {% endif %}
        
                {% endfor %}
            {% assign day_class = "day_closed" %}
            {% if current_day == opening3 %}
                        {% assign day_class = "day_open" %}
                    {% endif %}
            <div class="{{ open_class }} openclosed"> </div>      
            <tr class="{{ day_class }}"><td>{{ opening3 }}:</td><td>{{ opening_hour3 }}:00 - {{ closing_hour3 }}:00</td></tr>
    
            <!-- /////// -->
    
            {% for opening in current_day %} 
                {% assign open_class = "" %}    
                {% if current_day == opening4 %}
                {% assign open_class = "now_closed" %}
                {% endif %} 
                {% if current_day == opening4 %}
                    {% if current_hour < closing_hour4 %}
                        {% if current_hour >= opening_hour4 %}
                            {% assign open_class = "now_open" %}
                        {% endif %}
                    {% endif %}
                {% endif %}      
            {% endfor %}
        {% assign day_class = "day_closed" %}
        {% if current_day == opening4 %}
                    {% assign day_class = "day_open" %}
                {% endif %}
        <div class="{{ open_class }} openclosed"> </div>    
        <tr class="{{ day_class }}"><td>{{ opening4 }}:</td><td>{{ opening_hour4 }}:00 - {{ closing_hour4 }}:00</td></tr>
            
                 <!-- /////// -->
    
                 {% for opening in current_day %}
                    {% assign open_class = "" %}    
                    {% if current_day == opening5 %}
                    {% assign open_class = "now_closed" %}
                    {% endif %}
                    {% if current_day == opening5 %}
                     {% if current_hour < closing_hour5 %}
                     {% if current_hour >= opening_hour5 %}
                                 {% assign open_class = "now_open" %}
                     {% endif %}   
                     {% endif %}  
                     {% endif %}       
                 {% endfor %}
                 {% assign day_class = "day_closed" %}
                 {% if current_day == opening5 %}
                         {% assign day_class = "day_open" %}
                     {% endif %}
            <div class="{{ open_class }} openclosed"> </div>     
            <tr class="{{ day_class }}"><td>{{ opening5 }}:</td><td>{{ opening_hour5 }}:00 - {{ closing_hour5 }}:00</td></tr>
                 
                    <!-- /////// -->
        
                    {% for opening in current_day %}   
                        {% assign open_class = "" %}  
                        {% if current_day == opening6 %}
                        {% assign open_class = "now_closed" %}
                        {% endif %}
                        {% if current_day == opening6 %}
                            {% if current_hour < closing_hour6 %}
                                {% if current_hour >= opening_hour6 %}
                                    {% assign open_class = "now_open willy" %}
                                {% endif %}
                            {% endif %}    
                        {% endif %}  
                    {% endfor %}
                    {% assign day_class = "day_closed" %}
                {% if current_day == opening6 %}
                            {% assign day_class = "day_open" %}
                        {% endif %}
            <div class="{{ open_class }} openclosed"> </div>       
            <tr class="{{ day_class }}"><td>{{ opening6 }}:</td><td>{{ opening_hour6 }}:00 - {{ closing_hour6 }}:00</td></tr>
    
                <!-- /////// -->
                {% for opening in current_day %} 
                {% assign open_class = "" %}    
                {% if current_day == opening7 %}
                {% assign open_class = "now_closed" %}
                {% endif %}
                {% if current_day == opening7 %}
                    {% if current_hour < closing_hour1 %}
                        {% if current_hour >= opening_hour1 %}
                            {% assign open_class = "now_open" %}
                        {% endif %}
                    {% endif %}
                {% endif %}
            {% endfor %}
            {% assign day_class = "day_closed" %}
            <tr class="{{ day_class }}"><td>{{ opening7 }}:</td><td> Closed </td></tr>
             
        
        </table>

(Edit)

The tip is to use the filter date

This is a quick example

{% assign openings = "MON,TUE,WED,FRI,SUN" | split: "," %}
{% assign opening_hour = "09" %}
{% assign closing_hour = "19" %}
{% assign current_day = "now" | date: "%a" | upcase %}
{% assign current_hour = "now" | date: "%H" %}

<div id="openings">
    {% for opening in openings %}
        {% assign day_class = "" %}
        {% if current_day == opening %}
            {% if current_hour < closing_hour %}
                {% if current_hour >= opening_hour %}
                    {% assign day_class = "now_open" %}
                {% endif %}
            {% endif %}
        {% endif %}

        <div class="{{ day_class }}">{{ opening }}: {{ opening_hour }}:00 - {{ closing_hour }}:00</div>
    {% endfor %}
</div>
<style>
    .now_open {
        color: green;
    }
</style>

You can check here the available formats http://www.strfti.me/

Note that current_day and current_hour are both strings so you need to compare strings with strings.

It would be easier if the days are saved in a metadata so you can use them as an object.

Please signup or login to give your own answer.

Click here to cancel reply.