How to add a pop-ups to nopcommcerce
Here is the solution to add one without create new model and view.
Go to theme/xxx/view/home/Index.cshtml
The key points to achieve it is Click picture->popup dialog->input email->check email->check slide->send email
We use the function of emailproducttofriend, which doesn’t require recaptcha,however, in order to provent from spam, we use jQuery to fake one later.
In order to avoid creating model and view, we use jQuery to post the data to server like below:
var data = {"YourEmailAddress":YourEmailAddress,
"FriendEmail":"jenny@microanalytix.co.nz",
"PersonalMessage":"Email: "+YourEmailAddress+" Team: "+team,
"send-email":"Send email"};
$.ajax({
type : "post",
url : "productemailafriend/5443",
data : data,
async : false,
});
Here is the html part to get the information, between the code, the
<div id="drag"></div>
is call the function of slide which will be used later
<div id="footy">
<div>
<label>Please input your Email</label><input id="YourEmailAddress" name="YourEmailAddress" type="text"/>
<br>
<label>Please choose your team</label>
<select id="team">
<option value="NRL">NRL</option>
<option value="AFL">AFL</option>
</select>
</div>
<div id="drag"></div>
<input id="footysubmit" class="button-1" type="button" value="Send Email"/>
<label class="footysend">We will contact you later</label>
</div>
After finish the part of html, we would work on jQuery part. The plugin used for pop-ups is jQuery-ui, which could be see from _Root.Head.cshtml
Html.AddScriptParts("~/Scripts/jquery-ui/jquery-ui.js");
Html.AppendCssFileParts("~/Scripts/base/jquery-ui.css");
Then it is called in index.cshtml as below:
$('.footapp').click(function () {
$("#footy" ).dialog();
})
Then work on the email validation, we choose RegExp to achieve it as below
/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
However, the website crashed due to the RegEx has @ char, while nopcommerce used the Razor which is using @ character, so we need to change it to
/^\w+((-\w+)|(\.\w+))*\@@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
Then we need to work on the slide, by adding the plugin of drag in _Root.Head.cshtml
Html.AddScriptParts("~/Scripts/drag/js/drag.js");
Html.AppendCssFileParts("~/Scripts/drag/css/drag.css");
However, we need to change the css and js of drag to fit our requirment:
For js, we need to add an attribute which would be employed later to activate our buttom:
function dragOk(){
handler.removeClass('handler_bg').addClass('handler_ok_bg');
text.text('success');
text.attr("onselectstart","true");
drag.css({'color': '#fff'});
handler.unbind('mousedown');
$(document).unbind('mousemove');
$(document).unbind('mouseup');
}
Then call the attribute in index.cshtml like below:
$("#footysubmit").click(function(){
if($('.drag_text').attr("onselectstart")=="true"){
which means if it = true, it passed the validation then we can send email.
Here are some tips in drag.css, for example, adjust its height and width, update the photo by upload to server instead of using online one.
.handler_bg{
background: #fff url("../1.png") no-repeat center;
}
.handler_ok_bg{
background: #fff url("../2.png") no-repeat center
}
Here is the full code for index.cshtml
@{
Layout = "~/Views/Shared/_ColumnsTwo.cshtml";
}
<div class="page home-page">
<div class="page-body">
@Html.Widget("home_page_top")
@Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
@Html.Action("HomepageCategories", "Catalog")
@Html.Action("HomepageProducts", "Catalog")
@Html.Action("HomepageBestSellers", "Catalog")
@Html.Action("HomePageNews", "News")
@Html.Action("HomePagePolls", "Poll")
@Html.Widget("home_page_bottom")
</div>
<div class="footapp" >
<img style="width:158px;height:158px" src="../../Content/images/FOOTY.png" >
</div>
<div class="layapptop">
<!--<div class="app">
<a href="products-on-promotion">
<section class="slider-contaner">
<ul class="slider">
<li class="slider-item slider-item1"></li>
<li class="slider-item slider-item2"></li>
</ul>
</section>
</a>
<div class="app_box">
<i class="icon_a"></i>
<div class="app_tab_con">
<img style="width:98px;height:98px" src="../../Content/images/tree.jpg" >
</div>
<h2>Click to open gift</h2>
</div>
</div>-->
<div class="server_box">
<a class="server" href="contactus">
<img style="width:98px;height:58px" src="../../Content/images/ContactUs.png" >
</a>
<div class="server_con">
<i class="icon_a"></i>
<h2>1800 643 339</h2>
<p>worktime 9:00-17:00</p>
</div>
</div>
<div id="footy">
<div>
<label>Please input your Email</label><input id="YourEmailAddress" name="YourEmailAddress" type="text"/>
<br>
<label>Please choose your team</label>
<select id="team">
<option value="NRL">NRL</option>
<option value="AFL">AFL</option>
</select>
</div>
<div id="drag"></div>
<input id="footysubmit" class="button-1" type="button" value="Send Email"/>
<label class="footysend">We will contact you later</label>
</div>
</div>
</div>
<script>
$(function() {
$('#drag').drag();
$('.footapp').click(function () {
$("#footy" ).dialog();
})
$("#footysubmit").click(function(){
if($('.drag_text').attr("onselectstart")=="true"){
var team = $("#team").val();
var YourEmailAddress=$('#YourEmailAddress').val();
if(YourEmailAddress==''){
$('#YourEmailAddress').focus();
alert("Please input your Email address");
}else{
if(YourEmailAddress.match(/^\w+((-\w+)|(\.\w+))*\@@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)){
var data = {"YourEmailAddress":YourEmailAddress,
"FriendEmail":"jenny@microanalytix.co.nz",
"PersonalMessage":"Email: "+YourEmailAddress+" Team: "+team,
"send-email":"Send email"};
$.ajax({
type : "post",
url : "productemailafriend/5443",
data : data,
async : false,
});
$(".footysend").show(0.5);
$('#YourEmailAddress').val("");
}else{
alert("Please input correct Email address");
$('#YourEmailAddress').focus();
return false;
}
}
}else {
alert("Please slide to unlock")
}
});
})
</script>
Here is the part of css we updated for the feature
#footy{
display: none;
text-align: center;
}
.footysend{
display: none;
}
.footapp{
width: 220px;
height: 140px;
position: fixed;
z-index: 99;
right: 20px;
bottom: 300px;
}