nathan/ptcoffee_django
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add modal menu for newsletter

Browse Source
This commit is contained in:
Nathan Chapman 2022-04-05 11:23:35 -06:00
parent f55a87dca4
commit f803491fa3
4 changed files with 107 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/static/scripts/cookie.js
View File

@ -16,9 +16,9 @@ export function getCookie(name) {
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 expires = new Date(Date.now() + twentyYears).toUTCString()
const expires = new Date(Date.now() + expiration).toUTCString()
const cookie = `${body}; domain=; path=/; SameSite=Lax; expires=${expires}`
document.cookie = cookie
}

37
src/static/scripts/index.js Normal file
View 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)
});

54
src/static/styles/main.css
View File

@ -202,6 +202,60 @@ img {
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 {
max-width: 4rem;
vertical-align: middle;

15
src/templates/base.html
View File

@ -18,11 +18,24 @@
{% endcompress %}
<script type="module" defer src="{% static 'scripts/initializers/timezone.js' %}"></script>
<script type="module" defer src="{% static 'scripts/index.js' %}"></script>
{% block head %}
{% endblock %}
</head>
<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">&times;</span>
</div>
<div class="modal-menu__form">
<div class="_form_1"></div>
</div>
</div>
</div>
<header class="site__header">
<div>
<a href="{% url 'storefront:product-list' %}"><img class="site-logo" src="{% static 'images/site_logo.svg' %}" alt=""></a>
@ -69,7 +82,7 @@
<div>
<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>
<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 class="site__copyright">