added cookie popup

2 files changed, 48 insertions, 0 deletions

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 201710f..59b4d26 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -71,6 +71,10 @@ weight = 1
 description = "This is meta description"
 author = "Themefisher"
 
+# cookies
+[params.cookies]
+enable = true
+expire_days = 2
 
 # banner
 [params.banner]
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 3fa918e..b94ba75 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -70,3 +70,47 @@
 <script src="{{ $search.Permalink }}"></script>
 
 <script src="{{`plugins/search.js` | absURL }}"></script>
+
+
+<!-- cookie -->
+{{ if site.Params.cookies.enable }}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
+<div id="js-cookie-box" class="cookie-box cookie-box-hide">
+	This site uses cookies. By continuing to use this website, you agree to their use. <span id="js-cookie-button" class="wp-block-button__link" style="margin-left: 10px;">I Accept</span>
+</div>
+<script>
+	(function ($) {
+		const cookieBox = document.getElementById('js-cookie-box');
+		const cookieButton = document.getElementById('js-cookie-button');
+		if (!Cookies.get('cookie-box')) {
+			cookieBox.classList.remove('cookie-box-hide');
+			cookieButton.onclick = function () {
+				Cookies.set('cookie-box', true, {
+					expires: {{ site.Params.cookies.expire_days }}
+				});
+				cookieBox.classList.add('cookie-box-hide');
+			};
+		}
+	})(jQuery);
+</script>
+
+<!-- cookie style -->
+<style>
+.cookie-box {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  text-align: center;
+  z-index: 9999;
+  padding: 1rem 2rem;
+  background: rgb(71, 71, 71);
+  transition: all .75s cubic-bezier(.19, 1, .22, 1);
+  color: #fdfdfd;
+}
+
+.cookie-box-hide {
+  display: none;
+}
+</style>
+{{ end }}
\ No newline at end of file