POP UP Mail đăng ký

POP UP Mail đăng ký

  1. Chèn đoạn code html vào trong thẻ <body> ở theme.liquid.


{% if settings.check_hidden_presen %}
{% include 'form_email_popup' %}
{% endif %}



  1.  Tạo 1 file Snippets tên là: form_email_popup và paste code này trong file đó:


<!-- Trigger/Open The Modal -->
<button id="popup-btn"></button>
<!-- The Modal -->
<div id="popup-subscribe" class="popup">
<!-- Modal content -->
<div id="popup-modal" class="popup-content  animate down clearfix">
<span class="close-popup">
<i class="fa fa-times" aria-hidden="true"></i>
</span>
<div  class="grid">
<div class="col-xs-6 pull-right">
<div class="popup-wrapper">
<div class="popup-title">
{{settings.title_popup}}
</div>
<div class="popup-desc">
{{settings.popip_desc}}
</div>
<div class="popup-list">
<ul class="no-bullets">
<li>
{{settings.popup_content_bllets}}
</li>
</ul>
</div>
<div class="popup-form">
<div class="form-desc">
{{settings.dangky_popup_des}}
</div>
<form accept-charset='UTF-8' action='/account/contact' class='contact-form' method='post'>
<input name='form_type' type='hidden' value='customer'>
<input name='utf8' type='hidden' value='✓'>
<div class="input-group">
<input type="email" value="" placeholder="Nhập email của bạn..." name="contact[email]" id="Email" class="input-group-field" aria-label="email@example.com">
<input type="hidden" name="contact[tags]" value="newsletter">
<button type="submit" name="subscribe" id="subscribe" value="GỬI">{{settings.button_gui_title}}</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

<script>
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
$(document).ready(function(){
var date = new Date();
var minutes = 60;
date.setTime(date.getTime() + (minutes * 60 * 1000));
if (getCookie('popupNewLetterStatus') != 'closed') {
$('#popup-btn').trigger('click');
setCookie('popupNewLetterStatus', 'closed', date);
};
})
var modal = document.getElementById('popup-subscribe');
var span = document.getElementsByClassName("close-popup")[0];

var btn = document.getElementById("popup-btn");
btn.onclick = function() {
modal.style.display = "block";
setTimeout(function(){
$('#popup-modal').addClass('show');
}, 500)
}
span.onclick = function() {
hidePopupSub(modal)
}

window.onclick = function(event) {
if (event.target == modal) {
hidePopupSub(modal)
}
}
function hidePopupSub(modal){
$('#popup-modal').removeClass('show');
setTimeout(function(){
modal.style.display = "none";
}, 500)
}



</script>



  1. Chèn css vào cuối file style.css


/*popup_mail*/
.popup .popup-content {
background: url({{'hinhanh_popup_mail.jpg' | asset_url}});
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: auto;
max-width: 750px;
width: 90%;
top: 50px;
position: relative;
}
.popup .popup-content .popup-title {
color: #000000;
margin-bottom: 15px;
}
.popup .popup-content .popup-wrapper {
background: rgba(255, 255, 255, 0.8);
padding: 50px 15px;
}
.popup .popup-content .form-desc {
color: #000000;
margin-bottom: 15px;
}
.popup .popup-content form input {
width: 100%;
height: 30px;
line-height: 30px;
padding: 0 15px;
color: #000000;
background: #fff;
border: 1px solid #000000;
border-radius: 0px !important;
outline: 0 !important;
margin-bottom: 15px;
}
.popup .popup-content form button {
height: 30px;
line-height: 30px !important;
padding: 0 10px;
margin: 0;
border: 0px;
color: #fff;
background: #000000;
outline: 0 !important;
box-shadow: none;
float: right;
}

.popup .close-popup {
position: absolute;
top: -15px;
right: -15px;
color: #fff;
font-size: 18px;
font-weight: bold;
display: block;
height: 30px;
width: 30px;
background-color: #000000;
text-align: center;
z-index: 9999;
border-radius: 50%;
line-height: 30px;
}
.popup {
display: none;
position: fixed;
z-index: 999999999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
background-color: rgba(0, 0, 0, 0.8);
}
.show {
display: block !important;
}



  1. Tạo Settings


<fieldset>
<legend>Popup đăng ký mail cho khách hàng</legend>
<table>
<tr class="horizontal">
<th>
<label for="hotline_mobile">Hiển thị popup đăng ký mail ?</label>
</th>
<td>
<input type="checkbox" name="check_hidden_presen">
</td>
</tr>
<tr class="horizontal">
<th>
<label for="popup_modal">Hình ảnh nền của popup đăng ký mail</label>
</th>
<td>
<input type="file" name="hinhanh_popup_mail.jpg" id="hinhanh_popup_mail.jpg" />
</td>
</tr>

<tr class="horizontal">
<th>
<label for="popup_modal">Tiêu đề của popup</label>
</th>
<td>
<input type="text" name="title_popup" class="text" />
</td>
</tr>

<tr class="horizontal">
<th>
<label for="popup_modal">Giới thiệu của popup</label>
</th>
<td>
<input type="text" name="popip_desc" class="text" />
</td>
</tr>

<tr class="horizontal">
<th>
<label for="popup_modal">Nội dung của popup đăng ký</label>
</th>
<td>
<input type="text" name="popup_content_bllets" class="text" />
</td>
</tr>

<tr class="horizontal">
<th>
<label for="popup_modal">Tiêu đề của đăng ký:</label>
</th>
<td>
<p class="text-danger">Vd: Đăng ký, Register</p>
<input type="text" name="dangky_popup_des" class="text" />
</td>
</tr>

<tr class="horizontal">
<th>
<label for="popup_modal">Tiêu đề của nút button</label>
</th>
<td>
<p class="text-danger">Vd: Đăng ký, Register</p>
<input type="text" name="button_gui_title" class="text" />
</td>
</tr>



</table>
</fieldset>



← Bài trước Bài sau →