I’m new to liquid in Shopify. I found this guy on YouTube who provided a script to add to the DAWN theme in Shopify. It is all great except it lacks one thing, it’s a delay of 5 seconds. Having a delay would be a better customer experience so the popup isn’t in their face the moment they are on the website.
Can someone help by adding the Delay for me to this by any chance?
Thank you in advance, I would really appreciate it.
This is the Liquid file:
{{ "custom-subscriber-popup.css" | asset_url | stylesheet_tag }}
<div id="customNewsletter">
<div class="customNewsletter__container">
<button id="customNewsletter__close">X</button>
<div class="customNewsletter__logo">
<img src="{{ section.settings.logo | img_url: 'master' }}" alt="" />
</div>
<div class="customNewsletter__text">
<h1>{{ section.settings.heading }}</h1>
<p>{{ section.settings.paragraph }}</p>
{% form 'customer', class: 'custom__newsletter-form' %}
<input type="hidden" name="contact" value="newsletter">
<div class="newsletter-form__field-wrapper">
<div class="field">
<input
id="NewsletterForm--{{ section.id }}"
type="email"
name="contact[email]"
class="field__input"
value="{{ form.email }}"
aria-required="true"
autocorrect="off"
autocapitalize="off"
autocomplete="email"
{% if form.errors %}
autofocus
aria-invalid="true"
aria-describedby="Newsletter-error--{{ section.id }}"
{% elsif form.posted_successfully? %}
aria-describedby="Newsletter-success--{{ section.id }}"
{% endif %}
placeholder="{{ 'newsletter.label' | t }}"
required
>
<label class="field__label" for="NewsletterForm--{{ section.id }}">
{{ 'newsletter.label' | t }}
</label>
<button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
{% render 'icon-arrow' %}
</button>
</div>
{%- if form.errors -%}
<small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
{%- endif -%}
</div>
{%- if form.posted_successfully? -%}
<h3 class="newsletter-form__message newsletter-form__message--success form__message" id="Newsletter-success--{{ section.id }}" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
{%- endif -%}
{% endform %}
</div>
</div>
</div>
{{ 'custom-subscriber-popup.js' | asset_url | script_tag }}
{% schema %}
{
"name": "Pop Up",
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo",
"info": "Logo goes here"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Heading Here",
"placeholder": "Place Your Heading Here",
"info": "Header for your popup"
},
{
"type": "textarea",
"id": "paragraph",
"label": "Paragraph",
"default": "Tell your customer why they should subscribe.",
"placeholder": "Subscribe now to hear about great deals!",
"info": "Paragraph area for pop up"
}
],
"presets": [
{
"name": "Pop Up"
}
]
}
{% endschema %}
{% javascript %}
{% endjavascript %}
Script for the theme.liquid file:
{% if customer.accepts_marketing != true %}
<script>
console.log("does not accept marketing")
let cookieStatus = Cookies.get('popUpVisited');
if (!cookieStatus) {
const popUpForm = document.getElementById('customNewsletter');
console.log("passed condition");
popUpForm.style.display = "flex";
Cookies.set('popUpVisited', 'true', { expires: 0 })
}
</script>
{% endif %}
This is the JS.cookie.min.js file:
/*! js-cookie v3.0.1 | MIT */
!(function (e, t) {
"object" == typeof exports && "undefined" != typeof module
? (module.exports = t())
: "function" == typeof define && define.amd
? define(t)
: ((e = e || self),
(function () {
var n = e.Cookies,
o = (e.Cookies = t());
o.noConflict = function () {
return (e.Cookies = n), o;
};
})());
})(this, function () {
"use strict";
function e(e) {
for (var t = 1; t < arguments.length; t++) {
var n = arguments[t];
for (var o in n) e[o] = n[o];
}
return e;
}
return (function t(n, o) {
function r(t, r, i) {
if ("undefined" != typeof document) {
"number" == typeof (i = e({}, o, i)).expires &&
(i.expires = new Date(Date.now() + 864e5 * i.expires)),
i.expires && (i.expires = i.expires.toUTCString()),
(t = encodeURIComponent(t)
.replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent)
.replace(/[()]/g, escape));
var c = "";
for (var u in i)
i[u] &&
((c += "; " + u), !0 !== i[u] && (c += "=" + i[u].split(";")[0]));
return (document.cookie = t + "=" + n.write(r, t) + c);
}
}
return Object.create(
{
set: r,
get: function (e) {
if ("undefined" != typeof document && (!arguments.length || e)) {
for (
var t = document.cookie ? document.cookie.split("; ") : [],
o = {},
r = 0;
r < t.length;
r++
) {
var i = t[r].split("="),
c = i.slice(1).join("=");
try {
var u = decodeURIComponent(i[0]);
if (((o[u] = n.read(c, u)), e === u)) break;
} catch (e) {}
}
return e ? o[e] : o;
}
},
remove: function (t, n) {
r(t, "", e({}, n, { expires: -1 }));
},
withAttributes: function (n) {
return t(this.converter, e({}, this.attributes, n));
},
withConverter: function (n) {
return t(e({}, this.converter, n), this.attributes);
},
},
{
attributes: { value: Object.freeze(o) },
converter: { value: Object.freeze(n) },
}
);
})(
{
read: function (e) {
return (
'"' === e[0] && (e = e.slice(1, -1)),
e.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent)
);
},
write: function (e) {
return encodeURIComponent(e).replace(
/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,
decodeURIComponent
);
},
},
{ path: "/" }
);
});
This is the Custom-subscriber-pop.js file:
const newsletter__modal = document.getElementById("customNewsletter");
const newsletter__close = document.getElementById("customNewsletter__close");
newsletter__close.addEventListener("click", () => {
newsletter__modal.style.display = "none";
});
Wrap the code into the setTimeout function to delay the execution of the code.
read more about setTimeout function Here
<script>
console.log("does not accept marketing")
let cookieStatus = Cookies.get('popUpVisited');
if (!cookieStatus) {
const popUpForm = document.getElementById('customNewsletter');
console.log("passed condition");
setTimeout(function() {
popUpForm.style.display = "flex";
},5000);
Cookies.set('popUpVisited', 'true', { expires: 0 })
}
</script>