Cara Membuat Notifikasi Order Pembelian di Blog

Udah lama nih ga share tutorial blogger di blog ini. Pada kali ini saya ingin membagikan sebuah tutorial Blogger yaitu "Notifikasi Order" biasanya tuh notifikasi order ini ada di situs jual beli kayak hosting dan domain. Saya tertarik buat menerapkan diblogger ternyata bisa dan bagus, apalagi buat kalian yang situs nya ada jual beli suatu produk pastinya.

Notifikasi order ini saya buat dengan pure vanilla javascript tanpa jQuery yah. penggunaan data pakai array object dulu mungkin nanti akan saya update lagi supaya jadi otomatis mengambil dari suatu database dan dijadikan notifikasi order.

Bagi yang tertarik untuk tutorial ini bisa langsung dicoba:

Cara Membuat Notifikasi Order Pembelian

1. Buka blogger
2. Masuk ke Tema > Klik Edit HTML (saya anggap kalian udah tau caranya)
3. Cari kode </body> dan tambahkan javascript berikut

 <script>/*<![CDATA[*/
       const dataOrder = {
            "data":[
                {
                    nama:"rian",
                    image:"img/0.jpg",
                    kota:"bandung",
                    tanggal:"2 hari yang lalu",
                    produk:"ps4",
                    url:"www.google.com"
                },
                {
                    nama:"", // Nama Pembeli
                    image:"", // Gambar profile pembeli
                    kota:"", // kota asal pembeli
                    tanggal:"", // tanggal pembelian
                    produk:"", // pembelian produk apa
                    url:"" // url pembelian apa
                },
                {
                    nama:"", // Nama Pembeli
                    image:"", // Gambar profile pembeli
                    kota:"", // kota asal pembeli
                    tanggal:"", // tanggal pembelian
                    produk:"", // pembelian produk apa
                    url:"" // url pembelian apa
                }
                // Paste disini untuk menambah data pembeli
            ]
        };
        dataOrder.data.forEach((el) =>{
            var img = "//lh3.googleusercontent.com/-QlJpOYV6yF4/XNEPty8zjJI/AAAAAAAAF6k/7RaA8suy7AsVhOYwcP6WLMf2qc54GUXWwCEwYBhgL/h60/ava.png";
            if(el.image != ""){
                img = el.image
            }
            document.querySelector('.livesales').innerHTML += '<div class="item"><div class="image"><span class="img" style="background-image:url('+img+')"></div><div class="content"><button class="close"></button><span class="info"><b>'+el.nama+'</b> dari <b>'+el.kota+'</b> telah membeli <a href="'+el.url+'" target="_blank">'+el.produk+'</a><small>'+el.tanggal+'</small></span></div></div>'
        })
        document.querySelector('.livesales > .item:not(:first-child)').classList.remove('active')
        setInterval(() => {
            document.querySelector('.livesales .item:first-child').classList.add('active');
            setTimeout(() => {
                document.querySelectorAll('.livesales .item:first-child').forEach((el) =>{
                    el.classList.remove('active');
                })
                document.querySelector('.livesales').append(document.querySelector('.livesales').childNodes[0])
            }, 4000);
        }, 10000);
        document.querySelectorAll('.item .close').forEach((el) =>{
            el.addEventListener('click', ()=>{
                document.querySelector('.item').classList.remove('active')
            })
        })
/*]]>*/</script>

4. Jangan lupa tambahkan kode css nya biar jadi menarik

.livesales{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;font-weight:400;line-height:1.6}
.livesales .item{position:fixed;bottom:0;left:0;display:flex;overflow:hidden;z-index:200;max-width:300px;font-size:16px;background:rgba(255,255,255,.95);padding:15px 20px;box-shadow:0 10px 15px rgba(0 0 0 /8%);color:#222;transition:all .4s ease;border-radius:4px;line-height:1.4;opacity:0;visibility:hidden}
.livesales .item.active{left:20px;bottom:20px;opacity:1;visibility:visible}
.livesales .item .image{display:flex;padding-right:20px}
.livesales .item .img{background:#eeeeee url(//lh3.googleusercontent.com/-QlJpOYV6yF4/XNEPty8zjJI/AAAAAAAAF6k/7RaA8suy7AsVhOYwcP6WLMf2qc54GUXWwCEwYBhgL/h60/ava.png);background-size:cover;display:block;width:80px;height:80px;border-radius:80%;box-shadow:0 0 0 4px rgba(0 0 0 0 2%)}
.livesales .item .content{position:relative}
.livesales .item button{display:inline-block;width:30px;height:30px;line-height:30px;font-size:100%;margin:-15px -20px 10px 20px;border:none;background:transparent;color:#222;cursor:pointer;font-weight:500;position:absolute;right:0}
.livesales .item button:before{content:'x'}
.livesales .item .info b{color:#222}
.livesales .item .info a{color:#2fad4a;text-decoration:none}
.livesales .item .info a:hover{text-decoration:underline}
.livesales .item small{font-size:75%;opacity:.8;display:block;border-top:1px solid rgba(0,0,0,.06);margin-top:8px;padding-top:8px}
.livesales .item small:after{content:'';display:block;clear:both}

5. Biar tampilan nya muncul. Kalian bisa tambahkan kode html dibawah. Bisa diatas </body> atau </head>

<div class="livesales"></div>

6. Simpan

Untuk menambahkan array object atau data pembelianya, kalian copy kode dibawah ini dan paste pada kode yang sudah ditandai diatas

,{
                    nama:"", // Nama Pembeli
                    image:"", // Gambar profile pembeli
                    kota:"", // kota asal pembeli
                    tanggal:"", // tanggal pembelian
                    produk:"", // pembelian produk apa
                    url:"" // url pembelian apa
                }

Buat yang ingin melihat bagaimana hasilnya bisa klik link demo dibawah ini:

Demo

Jangan lupa dishare sob, biar semakin semangat lagi buat tutorial yang baru.