Add modal menu for newsletter
This commit is contained in:
Nathan Chapman
parent
f55a87dca4
commit
f803491fa3
@ -16,9 +16,9 @@ export function getCookie(name) {
|
|||||||
|
|
||||||
const twentyYears = 20 * 365 * 24 * 60 * 60 * 1000
|
const twentyYears = 20 * 365 * 24 * 60 * 60 * 1000
|
||||||
|
|
||||||
export function setCookie(name, value) {
|
export function setCookie(name, value, expiration=twentyYears) {
|
||||||
const body = [ name, value ].map(encodeURIComponent).join("=")
|
const body = [ name, value ].map(encodeURIComponent).join("=")
|
||||||
const expires = new Date(Date.now() + twentyYears).toUTCString()
|
const expires = new Date(Date.now() + expiration).toUTCString()
|
||||||
const cookie = `${body}; domain=; path=/; SameSite=Lax; expires=${expires}`
|
const cookie = `${body}; domain=; path=/; SameSite=Lax; expires=${expires}`
|
||||||
document.cookie = cookie
|
document.cookie = cookie
|
||||||
}
|
}
|
||||||
|
|||||||
37
src/static/scripts/index.js
Normal file
37
src/static/scripts/index.js
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { getCookie, setCookie } from "./cookie.js"
|
||||||
|
|
||||||
|
// Get the modal
|
||||||
|
const modal = document.querySelector(".modal-menu");
|
||||||
|
|
||||||
|
// Get the <span> element that closes the modal
|
||||||
|
const closeBtn = document.querySelector(".close-modal");
|
||||||
|
|
||||||
|
const oneDay = 1 * 24 * 60 * 60 * 1000
|
||||||
|
|
||||||
|
// When the user clicks on <span> (x), close the modal
|
||||||
|
closeBtn.addEventListener("click", event => {
|
||||||
|
modal.style.display = "none";
|
||||||
|
setCookie('newsletter-modal', 'true', oneDay)
|
||||||
|
})
|
||||||
|
|
||||||
|
const scrollFunction = () => {
|
||||||
|
let modalDismissed = getCookie('newsletter-modal')
|
||||||
|
console.log(modalDismissed)
|
||||||
|
if (modalDismissed != 'true') {
|
||||||
|
if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
|
||||||
|
modal.style.display = "block";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onscroll = () => {
|
||||||
|
scrollFunction();
|
||||||
|
};
|
||||||
|
|
||||||
|
// When the user clicks anywhere outside of the modal, close it
|
||||||
|
window.addEventListener("click", event => {
|
||||||
|
if (event.target == modal) {
|
||||||
|
modal.style.display = "none";
|
||||||
|
}
|
||||||
|
setCookie('newsletter-modal', 'true', oneDay)
|
||||||
|
});
|
||||||
@ -202,6 +202,60 @@ img {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* MODAL MENU */
|
||||||
|
.modal-menu {
|
||||||
|
display: none;
|
||||||
|
position: fixed; /* Stay in place */
|
||||||
|
z-index: 1; /* Sit on top */
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%; /* Full width */
|
||||||
|
height: 100%; /* Full height */
|
||||||
|
overflow: auto; /* Enable scroll if needed */
|
||||||
|
background-color: rgb(0,0,0); /* Fallback color */
|
||||||
|
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal Content/Box */
|
||||||
|
.modal-menu__content {
|
||||||
|
background-color: #fefefe;
|
||||||
|
margin: 25vh auto;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #888;
|
||||||
|
max-width: 40rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-menu__form {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-menu__header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The Close Button */
|
||||||
|
.close-modal {
|
||||||
|
color: #aaa;
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-modal:hover,
|
||||||
|
.close-modal:focus {
|
||||||
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.fair_trade--small {
|
.fair_trade--small {
|
||||||
max-width: 4rem;
|
max-width: 4rem;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|||||||
@ -18,11 +18,24 @@
|
|||||||
{% endcompress %}
|
{% endcompress %}
|
||||||
|
|
||||||
<script type="module" defer src="{% static 'scripts/initializers/timezone.js' %}"></script>
|
<script type="module" defer src="{% static 'scripts/initializers/timezone.js' %}"></script>
|
||||||
|
<script type="module" defer src="{% static 'scripts/index.js' %}"></script>
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="modal-menu">
|
||||||
|
<div class="modal-menu__content">
|
||||||
|
<div class="modal-menu__header">
|
||||||
|
<h4>Sign up for our newsletter</h4>
|
||||||
|
<span class="close-modal">×</span>
|
||||||
|
</div>
|
||||||
|
<div class="modal-menu__form">
|
||||||
|
<div class="_form_1"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<header class="site__header">
|
<header class="site__header">
|
||||||
<div>
|
<div>
|
||||||
<a href="{% url 'storefront:product-list' %}"><img class="site-logo" src="{% static 'images/site_logo.svg' %}" alt=""></a>
|
<a href="{% url 'storefront:product-list' %}"><img class="site-logo" src="{% static 'images/site_logo.svg' %}" alt=""></a>
|
||||||
@ -69,7 +82,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<h4>Problem with your order?<br>Have a question?</h4>
|
<h4>Problem with your order?<br>Have a question?</h4>
|
||||||
<p>Please contact us, we’re happy to help you over the phone at <a href="tel:+13603855856">(360) 385-5856</a> between 8:00 am and 10:00 pm Pacific Time.</p>
|
<p>Please contact us, we’re happy to help you over the phone at <a href="tel:+13603855856">(360) 385-5856</a> between 8:00 am and 10:00 pm Pacific Time.</p>
|
||||||
<div class="_form_1"></div><script src="https://bltc999.activehosted.com/f/embed.php?id=1" type="text/javascript" charset="utf-8"></script>
|
<div class="_form_1"></div><script src="https://ptcoffee.activehosted.com/f/embed.php?id=1" type="text/javascript" charset="utf-8"></script>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="site__copyright">
|
<div class="site__copyright">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user