CODEWITHSUNDEEP
javascriptjqueryshopifyliquid
aBe
aBe

Reputation: 77

Shopify Liquid - how to show content based on dates

On my Shopify store I want to show an HTML banner in a liquid file from 02/01/2022 - 02/14/2022. It's only for Valentines day orders so I want to auto show the banner just on those dates from the 1st to the 14th.

Upvotes: 0

Views: 1705

Answers (2)

Chukwuemeka
Chukwuemeka

Reputation: 176

From the Spotify liquid documentation, you can create a conditional code path using the code snippet below:

{% assign start = "2022-01-02" | date: '%s' %}
{% assign end = "2022-02-14" | date: '%s' %}
{% assign today = "now" | date: '%s' %}
{% if  start <= today and today <= end %}
    <h2>Show banner</h2>
{% endif %}

This code will only show the banner within the specified timeframes. You can try it out on the Liquid editor here: https://liquidjs.com/playground.html

Upvotes: 3

Reza Saadati
Reza Saadati

Reputation: 5419

Use a simple if-statement. With Date() you get all info that you need.

const date = new Date();

if (date.getDate() > 14 && date.getMonth() === 1 && date.getFullYear() === 2022) {
    document.getElementById('banner').style.display = 'none';
}
<div id="banner">BANNER</div>

Ensure that date.getMonth() is set to 1 for February, since values start with 0.

Upvotes: 0

Related Questions