Cara Membuat Notifikasi Order Pembelian di Blog

Rian
Rian
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
  4.  <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>
  5. Jangan lupa tambahkan kode css nya biar jadi menarik
  6. .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}
  7. Biar tampilan nya muncul. Kalian bisa tambahkan kode html dibawah. Bisa diatas </body> atau </head>
  8. <div class="livesales"></div>
  9. 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:

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

4 comments : Cara Membuat Notifikasi Order Pembelian di Blog

  1. Terima kasih pak, tutorialnya sangat bermanfaat,
    Cocok banget nih buat pengguna website olshop
    • Rian
      Sama sama gan, senang bisa membantu
  2. Mul Yono
    apakah di semua template bawaan blogger bisa?
    • Rian
      Bisa dipakai di semua template blogger bawaan