JavaScript ile sahte satın alma bildirimi yapımı
1 yıl önce#calismalarSon zamanlarda e-ticaret ile uğraşan sitelerin çok sıklıkla başvurduğu bir yöntem olan siteye gezen müşteriye sahte bildirim yollama olayını ele alacağız.
Bu yöntemin mantığı potansiyel müşterileriniz sitenizde dolaşırken belirli aralıklarla sol alt kısımdan çıkan bir bildirimle karşılaşır. Bildirim içeriğinde bir müşterinin x ürününü x dakika önce aldığı yazmaktadır. Bir nevi kullanıcıyı satın almaya teşvik etmek için kullanılan bir yöntem.
Web sitemiz için sahte satın alma bildirimi göndermeyi yaparken basit ve temel şekilde JavaScript kütüphanesinden yararlanacağız. Öncelikle HTML vs JavaScript kodlarımızı yerleştirmek için index.html adında dosyamızı oluşturalım. Aşağıdaki kodları içerisine yerleştireceğiz. Ben aklınız karışmaması için JavaScript kodlarını HTML içerisinden oynattım. Eğer isterseniz .js uzantılı dosya oluşturup JavaScript kodlarını onun içerisine yazarak sonradan index.html dosyasına çağırabilirsiniz.
<!DOCTYPE html>
<html lang="tr" >
<head>
<meta charset="UTF-8">
<title>Sahte Bildirim</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<section class="bildirim-dis-alan">
<div class="bildirim">
<div class="bildirim-hizalama">
<div class="bildirim-gorsel">
<img id="harita" src="https://wiki.openstreetmap.org/w/images/d/d1/Tile_osm-no-label.png" style="width: 50px; height: 50px">
</div>
<div class="bildirim-icerik-alani">
<p class="bildirim-icerik">
Bir müşteri <span id="sehir">İstanbul</span> bölgesinden<br><span id="urun">Youtube Abone</span> hizmeti satın aldı.
<small>
<span id="zaman">1</span> dakika önce
</small>
</p>
</div>
</div>
<div class="kapat"></div>
</div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script id="rendered-js" >
var Sehirler = new Array();
Sehirler[0] = "İstanbul";
Sehirler[1] = "Ankara";
Sehirler[2] = "İzmir";
Sehirler[3] = "Bursa";
Sehirler[5] = "Konya";
Sehirler[4] = "Kayseri";
Sehirler[6] = "Samsun";
Sehirler[7] = "Manisa";
Sehirler[8] = "Adana";
Sehirler[9] = "Eskişehir";
Sehirler[10] = "Antalya";
Sehirler[11] = "Mersin";
Sehirler[12] = "Hatay";
Sehirler[13] = "Balıkesir";
Sehirler[14] = "Van";
Sehirler[15] = "Tekirdağ";
Sehirler[16] = "Sakarya";
Sehirler[17] = "Denizli";
Sehirler[18] = "Ordu";
Sehirler[19] = "Tokat";
Sehirler[20] = "Sivas";
var Bolgeler = new Array();
Bolgeler[0] = "https://s3.amazonaws.com/provely-public/images/maps/02a342794409deaf5f29216201d9da30.jpg";
Bolgeler[1] = "https://s3.amazonaws.com/provely-public/images/maps/359f4e0ae29d7fb7af480e4e87ced439.jpg";
Bolgeler[2] = "https://s3.amazonaws.com/provely-public/images/maps/4b2aee97b83b39dd44d9be1041e06a83.jpg";
Bolgeler[4] = "https://s3.amazonaws.com/provely-public/images/maps/2211ef3aabad24eb566b23da26669662.jpg";
Bolgeler[5] = "https://s3.amazonaws.com/provely-public/images/maps/3d147c6ba113929f5a004a5e9dcc832e.jpg";
Bolgeler[6] = "https://s3.amazonaws.com/provely-public/images/maps/e10212e09e6eb3b49d00e046870445af.jpg";
Bolgeler[7] = "https://s3.amazonaws.com/provely-public/images/maps/e10212e09e6eb3b49d00e046870445af.jpg";
Bolgeler[8] = "https://s3.amazonaws.com/provely-public/images/maps/e10212e09e6eb3b49d00e046870445af.jpg";
Bolgeler[9] = "https://s3.amazonaws.com/provely-public/images/maps/e10212e09e6eb3b49d00e046870445af.jpg";
Bolgeler[10] = "https://s3.amazonaws.com/provely-public/images/maps/e10212e09e6eb3b49d00e046870445af.jpg";
Bolgeler[11] = "https://s3.amazonaws.com/provely-public/images/maps/e10212e09e6eb3b49d00e046870445af.jpg";
Bolgeler[12] = "https://s3.amazonaws.com/provely-public/images/maps/e10212e09e6eb3b49d00e046870445af.jpg";
Bolgeler[13] = "https://s3.amazonaws.com/provely-public/images/maps/e10212e09e6eb3b49d00e046870445af.jpg";
Bolgeler[14] = "https://s3.amazonaws.com/provely-public/images/maps/e10212e09e6eb3b49d00e046870445af.jpg";
Bolgeler[15] = "https://s3.amazonaws.com/provely-public/images/maps/e10212e09e6eb3b49d00e046870445af.jpg";
Bolgeler[16] = "https://s3.amazonaws.com/provely-public/images/maps/e10212e09e6eb3b49d00e046870445af.jpg";
Bolgeler[17] = "https://s3.amazonaws.com/provely-public/images/maps/e10212e09e6eb3b49d00e046870445af.jpg";
Bolgeler[18] = "https://s3.amazonaws.com/provely-public/images/maps/e10212e09e6eb3b49d00e046870445af.jpg";
Bolgeler[19] = "https://s3.amazonaws.com/provely-public/images/maps/e10212e09e6eb3b49d00e046870445af.jpg";
Bolgeler[20] = "https://s3.amazonaws.com/provely-public/images/maps/e10212e09e6eb3b49d00e046870445af.jpg";
var Urunler = new Array();
Urunler[0] = "Instagram Takipçi";
Urunler[1] = "Twitter Takipçi";
Urunler[2] = "Tiktok İzlenme";
Urunler[3] = "Tiktok Takipçi";
Urunler[4] = "Instagram Beğeni";
Urunler[5] = "Trend Topic";
Urunler[6] = "Instagram Keşfet";
Urunler[7] = "Twitter Retweet";
Urunler[8] = "Twitter Beğeni";
Urunler[9] = "Instagram Yorum";
Urunler[10] = "Youtube Abone";
Urunler[11] = "Youtube İzlenme";
Urunler[12] = "Youtube Yorum";
Urunler[13] = "Twitter Yorum";
setInterval(function () {$(".bildirim-dis-alan").stop().slideToggle('slow');}, 3000);
$(".kapat").click(function () {
$(".bildirim-dis-alan").stop().slideToggle('slow');
});
setInterval(function () {
var Deger = Math.floor(20 * Math.random());
$("#harita").attr("src", Bolgeler[Deger]);
$('#sehir').text(Sehirler[Deger]);
$('#urun').text(Urunler[Math.floor(13 * Math.random())]);
var timeVal = Math.floor(28 * Math.random());
$('#zaman').text(timeVal);
}, 6000);
</script>
</body>
</html>Yukarıdaki yer alan JavaScript kodları içerisinden bildirimin hangi sıklıklarla çıkacağını, hangi şehirlerin gösterileceğini, hangi ürünlerin satın alacağını ayarlayabilirsiniz. Sahte bildirim gösterme kodumuzun hazır olması için son bir aşama kaldı, onun için de style.css adında bir CSS dosyası oluşturalım ve aşağıdaki kodları içerisine aktaralım.
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600");
.bildirim-dis-alan {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 9999999999999 !important;
font-family: "Open Sans", sans-serif;
}
.bildirim-dis-alan .bildirim {
width: 400px;
border: 0;
text-align: left;
z-index: 99999;
box-sizing: border-box;
font-weight: 400;
border-radius: 6px;
box-shadow: 2px 2px 10px 2px rgba(11, 10, 10, 0.2);
background-color: #fff;
position: relative;
cursor: pointer;
padding-left: 10px;
}
.bildirim-dis-alan .bildirim .bildirim-hizalama {
display: flex !important;
align-items: center;
height: 80px;
}
.bildirim-dis-alan .bildirim .bildirim-hizalama .bildirim-gorsel img {
max-height: 75px;
width: 90px;
overflow: hidden;
border-radius: 6px 0 0 6px;
object-fit: cover;
}
.bildirim-dis-alan .bildirim .bildirim-hizalama .bildirim-icerik-alani {
margin: 0;
height: 100%;
color: gray;
padding-left: 20px;
padding-right: 20px;
border-radius: 0 6px 6px 0;
flex: 1;
display: flex !important;
flex-direction: column;
justify-content: center;
}
.bildirim-dis-alan .bildirim .bildirim-hizalama .bildirim-icerik-alani .bildirim-icerik {
font-family: inherit !important;
margin: 0 !important;
padding: 0 !important;
font-size: 14px;
line-height: 18px;
}
.bildirim-dis-alan .bildirim .bildirim-hizalama .bildirim-icerik-alani .bildirim-icerik small {
margin-top: 0px !important;
display: block !important;
font-size: 12px !important;
opacity: 0.8;
}
.bildirim-dis-alan .bildirim .kapat {
position: absolute;
top: 8px;
right: 8px;
height: 12px;
width: 12px;
cursor: pointer;
transition: 0.2s ease-in-out;
transform: rotate(45deg);
opacity: 0;
}
.bildirim-dis-alan .bildirim .kapat::before {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: gray;
position: absolute;
left: 0;
top: 5px;
}
.bildirim-dis-alan .bildirim .kapat::after {
content: "";
display: block;
height: 100%;
width: 2px;
background-color: gray;
position: absolute;
left: 5px;
top: 0;
}
.bildirim-dis-alan .bildirim:hover .kapat {
opacity: 1;
}
#urun{font-weight:bold;}Evet çoğu sitelerde ücretli karşılığı satılan kullanıcıya sahte satın alma bildirimi gönderme kodumuz hazır. Bunu aşırı derecede suistimal etmeden kullanarak çok iyi sonuçlar elde edebilirsiniz. Dosyaları derlemekle uğraşmak istemiyorsanız sizin için derlediğim halini buraya tıklayarak indirebilirsiniz.