Skip to content

Instantly share code, notes, and snippets.

@bjornbennett
Last active July 26, 2021 16:02
Show Gist options
  • Save bjornbennett/9afb024296cd78e2aedd9cb3ac0b1135 to your computer and use it in GitHub Desktop.
Save bjornbennett/9afb024296cd78e2aedd9cb3ac0b1135 to your computer and use it in GitHub Desktop.
Shopify jQuery Cookie Modal - This snippet adds a popup modal that use the js cookie jQuery plugin - https://github.com/js-cookie/js-cookie. Cookie expiration is controlled via settings for the client to control.
<!-- MODAL - insert this in the main template so it is available for any page -->
{% if settings.enable-home-newsletter-modal != blank%}
<div class="tbm_modal-container">
<div class="tbm_modal">
<div class="tbm_modal-left-col" style="background-image:url({{ settings.tbm_modal_bg_image | img_url: 'original' }});">
</div>
<div class="tbm_modal-right-col">
<h2>{{settings.tbm_cookie-modal-title}}</h2>
<p>{{settings.tbm_cookie-modal-content}}</p>
<!--FORM-->
<div id="mc_embed_signup">
<form action="{{ settings.tbm_cookie-modal-mailchimp }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="{{settings.tbm_cookie-modal-email-placeholder}}" required="" type="email">
<input value="{{ settings.tbm_cookie-modal-submit-text }}" name="subscribe" id="mc-embedded-subscribe" class="button" type="submit">
</form>
</div>
<!--FORM ENDS-->
<span class="tbm_modal-close">{{settings.tbm_cookie-modal-close-message}}</span>
</div>
<div class="tbm_modal-clear"></div>
</div>
<div class="tbm_modal-clickable"></div>
</div>
<!-- MODAL SCRIPTS AND CODE-->
{{ 'js.cookie.js' | asset_url | script_tag }}
<script type="text/javascript">
$(document).ready(function(){
// resize modal column
function tbm_modalResize(){
var tbm_modalR = $('.tbm_modal-right-col').height();
$('.tbm_modal-left-col').height(tbm_modalR);
}
tbm_modalResize();
$(window).resize(function(){
tbm_modalResize();
});
var cookieExpireSet = {{settings.tbm_cookie-expires}};
var loftModalNewsletterCookie = "__loft_modal-newsletter-cookie";
{%if settings.tbm_cookie-expires == "-1"%}
Cookies.remove( loftModalNewsletterCookie , { path: '' });
console.log('loft modal cookie removed');
{% endif %}
// set cookie, show popup
if( Cookies.get(loftModalNewsletterCookie) != '1'){
setTimeout(function(){
tbm_modalResize();
$('.tbm_modal-container').fadeIn(600);
tbm_modalResize();
}, {{settings.tbm_cookie-modal-delay}} );
Cookies.set( loftModalNewsletterCookie , '1', { expires: cookieExpireSet });
} else {
console.log('loft popup - already visited');
}
// close modal
$('.tbm_modal-close, .tbm_modal-clickable').click(function(){
$('.tbm_modal-container').fadeOut(400);
});
});
</script>
{% endif %}
<!-- MODAL STYLES -->
<style>
/*===============================
Newsletter Modal SCSS
===============================*/
.tbm_modal-container {
display: none;
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,0.6);
z-index: 1000000;
top: 0;
left: 0;
}
.tbm_modal {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 0px;
text-align: center;
display: table;
width: 700px;
.tbm_modal-left-col, .tbm_modal-right-col {
float: left;
display: table-cell;
padding: 50px 20px;
vertical-align: middle;
}
.tbm_modal-left-col {
width: 35%;
display: block;
background-size: cover;
background-position: center;
}
.tbm_modal-right-col {
width: 65%;
}
.tbm_modal-clear {
clear: both;
}
h2 {
font-size: 35px;
font-weight: 800;
margin: 0!important;
line-height: 1.7;
&::before {
content: "";
display: block;
border-top: 3px solid #39b54a;
width: 80px;
margin: 10px auto;
}
}
p {
font-style: italic;
font-family: times;
font-size: 16px!important;
margin-top: 0;
margin-bottom: 40px;
}
input[type=email],
input[type=submit] {
display: block!important;
float: none!important;
width: 60% !important;
margin: 0 auto 10px!important;
text-align: center;
max-width: inherit !important;
}
input[type=email] {
padding: 8px 25px;
background: #fff;
text-align: left !important;
border: 2px solid #dedede;
text-align: center;
}
input[type=submit] {
padding: 12px 10px 12px;
height: inherit !important;
background: #39b54a;
color: #fff;
font-weight: 800;
text-transform: uppercase;
font-size: 12px;
border: 0;
}
span.tbm_modal-close {
font-size: 12px!important;
color: #888;
text-decoration: underline;
margin-top: 40px;
display: block;
cursor: pointer;
}
}
.tbm_modal-clickable {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: -1;
cursor: pointer;
}
@media(max-width:992px){
.tbm_modal {
width: 80%;
}
.tbm_modal h2 {
font-size: 16px;
font-weight: 100;
margin: 0px 0 10px!important;
line-height: 1;
}
.tbm_modal-left-col, .tbm_modal-right-col {
padding: 10px 20px;
}
.tbm_modal input[type=submit] {
margin: 0;
padding: 6px 0px 0px;
font-size: 11px;
line-height: 2!important;
height: auto!important;
width: 100%!important;
border: 0;
border-radius: 0;
}
.tbm_modal input[type=email] {
padding: 5px;
height: inherit;
margin-bottom: 6px!important;
line-height: 1;
border: 0;
border-radius: 0;
}
.tbm_modal span.tbm_modal-close {
margin: 0;
}
.tbm_modal p {
margin-bottom: 15px;
line-height: 1.3;
font-size: 14px!important;
}
.tbm_modal form {
margin-bottom: 10px;
}
.tbm_modal-closeable {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: transparent;
display: block;
z-index: 9999;
}
}
</style>
<!-- MODAL SCHEMA - add to settings_schema.json -->
{%comment%}
{
"name": "Newsletter modal",
"settings": [
{
"type": "header",
"content": "Modal Settings"
},
{
"type": "checkbox",
"id": "enable-home-newsletter-modal",
"label": "Enable newsletter modal"
},
{
"type": "text",
"id": "tbm_cookie-expires",
"label": "How many days should modal not show",
"default": "1",
"info": "Setting to 1, will show after One day"
},
{
"type": "text",
"id": "tbm_cookie-modal-delay",
"label": "Delay modal appearing",
"default": "1000",
"info": "Milliseconds, e.g 1000 = 1s"
},
{
"type": "header",
"content": "Modal content"
},
{
"type": "image_picker",
"id": "tbm_modal_bg_image",
"label": "Upload modal image"
},
{
"type": "text",
"id": "tbm_cookie-modal-title",
"label": "Title",
"default": "GET 10% OFF"
},
{
"type": "textarea",
"id": "tbm_cookie-modal-content",
"label": "Content",
"default": "Subscribe now and receive a discount on your first order"
},
{
"type": "text",
"id": "tbm_cookie-modal-submit-text",
"label": "Submit button text",
"default": "Sign Up"
},
{
"type": "text",
"id": "tbm_cookie-modal-email-placeholder",
"label": "Enter email here",
"default": "Your Email"
},
{
"type": "text",
"id": "tbm_cookie-modal-close-message",
"label": "Close message",
"default": "No thanks, I don't like gifts"
}
]
}
{%endcomment%}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment