Cara Membuat Notifikasi Pembelian di Blogger

Cara mudah membuat notifikasi riwayat pembelian di platform blogger, sangat cocok digunakan pada website toko online.

Fernn.id - Pada kesempatan kali ini saya ingin share tutorial yang mana sebelumnya sudah pernah saya lihat dan juga ada ketertarikan untuk membuatnya. Tutorial tersebut adalah Cara Membuat Notifikasi Pembelian di Blogger yang mana bisa anda pasang di platform apapun.

Banyak sekali keuntungan yang bisa anda dapatkan jika memasang notifikasi pembelian, salah satunya mempercantik tampilan halaman dan menambah kepercayaan calon pembeli karena situs anda aktif atau bisa dikatakan aktif dalam bertransaksi.

Notifikasi pembelian seperti ini biasanya diterapkan dan bisa sobat temukan di berbagai situs jual beli seperti hosting, dan domain. Admin sendiri tertarik waktu pertama kali melihatnya dan ingin mencoba memasangnya di blogger yang ternyata bagus dan simpel meskipun ada kekurangannya.

Kekurangannya tersebut ialah kita (sebagai penjual) harus menambahkannya secara manual apabila ada pembelian baru. Kenapa begitu? karena sampai saat ini blogger masih tidak mengizinkan penggunanya untuk mengotak-atik database masing-masing. Jadi metode penggunaan data hanya bisa menggunakan array object yang membutuhkan tenaga ekstra.

Cara Membuat Notifikasi Pembelian

Untuk menerapkan tutorial yang sederhana ini anda hanya perlu menambahkan javascript dan juga css kedalam template yang anda gunakan.

  1. Silahkan masuk terlebih dahulu ke Blogger
  2. Kemudian pada dashboard, pilih pada menu Tema > Edit HTML
  3. Tambahkan javascript berikut ini ke template dan letakkan diatas kode </body>
    <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. Tambahkan juga css berikut ini, dan letakkan diatas kode ]]></b:skin>
    .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. Terakhir klik tombol Simpan.

Untuk lebih jelas bagaimana demo / pratinjau dari pemasangan notifikasi pembelian ini, silahkan klik tombol dibawah.

Pratinjau

Mungkin sekian dahulu artikel dari Cara Membuat Notifikasi Pembelian di Blogger kali ini. Semoga bisa bermanfaat dan membantu bisnis anda lebih baik lagi untuk kedepannya.
Terimakasih