Dokumentasi Fitur Kostum Cetak Struk

bukaOlshop versi 45.0 membawa fitur baru yaitu kostum halaman cetak struk. Fitur ini memungkinkan anda untuk mengatur halaman cetak struk transaksi menggunakan html, sehingga tampilan bisa lebih di kostumasi sesuai yang anda inginkan. Hasil cetak struk dapat di print melalui bluetooth, simpan ke gallery, atau di share ke aplikasi lain.

Sebelum menggunakan fitur ini, berikut hal-hal yang harus Anda ketahui:

1. APK olshop memiliki versi bulid  70 keatas.
2. Anda harus menggunakan paket Pro, dan BISNIS.

Sebelum memulai tutorial ini, kami ingatkan teman-teman agar teliti dalam memasang fitur ini agar tidak ada error seperti kesalahan sintaks dsb.

Pastikan juga teman-teman memahami konsep dasar kode HTML.

Chapter 1 : Mengaktifkan Fitur

Untuk mengaktifkan fitur kostum cetak struk, anda bisa mengaktifkannya di menu pada gambar dibawah:

Setelah anda mengaktifkan fitur kostum cetak struk, anda wajib memasang kode html yang akan digunakan nantinya. Untuk memasukan kode html, ikuti langkah-langkah berikut:

• Pindah ke tab TOKO, klik Personal Branding.
• Pindah ke tab KOSTUM HTML.
• Klik Kostum Halaman Cetak Struk

Pada halaman input kode html ini, anda dapat memilih ingin menginput dalam bentuk html atau menggunakan script dari store. Jika anda ingin menggunakan script dari store, anda perlu menginstal script dengan kategori tampikan APK khusus, dengan posisi pemasangan di kostum halaman cetak struk.

Jika anda ingin menggunakan html, anda dapat memulainya dengan melakukan generate kode html template yang sudah bukaolshop sediakan, tombol generate kode html terletak di atas halaman dengan logo pensil.

Chapter 2 : Shortcode Khusus Cetak Struk

Pada kostum halaman cetak struk ini, bukaOlshop hanya menyediakan 1 shortcode khusus yaitu {{json_struk_transaksi}}. Shortcode tersebut berisi data json yang harus diolah oleh javascript didalam kode html agar bisa menampilkan data ke user. bukaOlshop tidak menyediakan shortcode single seperti pada fitur kostum halaman checkout atau detail transaksi, karena data pada kostum cetak struk ini lebih simple.

Selain shortcode {{json_struk_transaksi}}, anda juga bisa menggunakan seluruh shortcode yang ada di sini:

https://help.bukaolshop.com/dokumentasi-fitur-shortcode-pada-html/

Jika anda meletakkan shortcode {{json_struk_transaksi}} di html, maka akan menghasilkan data json dengan struktur seperti gambar berikut:

 

Pada data json diatas, semua perhitungan transaksi sudah dilakukan di sisi server, jadi anda tinggal menampilkan nilai yang anda. Data produk berada di key “list_data_produk” yang berupa array. Dalam array tersebut berisi objek data produk seperti nama produk, jumlah barang, catatan, harga, dan data resi.

Pada bagian terakhir dari json, anda akan melihat key “tipe_struk”. tipe struk ini merupakan key yang bisa anda gunakan untuk mengetahui tipe dari struk yang akan di cetak, nilai dari tipe struk ini yaitu dapat berupa : “standart”,”pln”,”pulsa”,”voucher”,”pascabayar”. Jika tipe_struk bernilai pln, maka key “token_pln” akan berisi data token PLN.

bukaOlshop mendeteksi tipe struk ini berdasarkan nama produk (baik huruf besar atau kecil), berikut ini kriteria yang bukaOlshop terapkan:

1. PLN : “pln”,”listrik”
2. Pulsa : “pulsa”,”telkomsel”,”xl”,”three”,”indosat”,”isat”,”paket data”,”tsel”,”tri”,”axis”,”smartfren”,”byu”,”internet”
3. Voucher : ‘voucher’,’game’,’free fire’,’mobile legend’,’steam’,’money’,’topup’,’higgs’,’arena’,’unipin’,’pubg’
4. Pascabayar : “pascabayar”,”postpaid”,”indihome”,”bpjs”,”tagihan”

Jika pada nama produk diatas tidak terdapat salah satu dari kata kunci diatas, maka tipe struk akan dialihkan ke tipe standart. Selain itu, jika pada transaksi terdapat lebih dari 1 produk, maka otomatis tipe struk standart akan digunakan.

Jika anda kurang puas dengan daftar kata kunci diatas, anda dapat menentukan sendiri template apa yang ingin digunakan pada kode javascript yang ada pada script html, penentuan template dapat anda lihat pada function setDataProduk didalam script.

Chapter 3 : Tips dalam implementasi

Pada cetak struk transaksi ini, tampilan halaman dapat anda tentukan sendiri sesuai keinginan anda. Jika user pada aplikasi anda tidak ada rencana untuk melakukan print kedalam bentuk struk kertas secara langsung, anda dapat meng-kostum tampilan halaman lebih bebas, seperti menambahkan akses warna, bentuk gambar logo lebih bebas, dan lain-lain.

Namun, jika user anda, atau anda sendiri, ingin melakukan printing ke dalam bentuk kertas struk via bluetooth, maka ada beberapa hal yang anda harus perhatikan, berikut daftarnya:

• Gunakan logo hitam putih atau line art.

Jika anda ingin menampilkan logo pada struk transaksi, pastikan logo anda dapat di print baik apabila di cetak dalam bentuk hitam putih. Anda dapat mengupload gambar logo yang berbeda dari logo aplikasi anda pada Personal Branding -> Teks & Icon -> Bagian Kostum Struk

Logo yang anda upload diatas dapat diakses di json dengan key url_icon_aplikasi. Jika anda tidak mengupload gambar diatas, maka logo aplikasi yang akan digunakan.

Pastikan logo yang anda upload dapat di cetak dalam bentuk hitam putih, lihat contoh yang benar pada gambar dibawah:

• Gunakan font family dan size yang tepat.

Pada kode script yang bukaOlshop sediakan, font family menggunakan font yang dirancang agar bagus saat di cetak via printer thermal, dan ukuran minimal font yaitu 12pt. Jika anda melakukan perubahan, pastikan anda tetap menggunakan font berjenis monospace, dan ukuran font 12pt atau diatasnya. Saat print menggunakan bluetooth, apk olshop akan otomatis merubah font size ke minimal 15pt agar hasil print dapat terlihat jelas.

• Ukuran kertas

Aplikasi apk olshop dan bukaOlshop, di setting untuk mencetak struk dengan ukuran kertas 58mm, jika anda memiliki printer dengan ukuran lebih besar, maka anda harus menggunakan opsi untuk print lewat aplikasi pihak ketiga. Anda dapat menginstal aplikasi printer pihak ketiga dari playstore, misalnya aplikasi RawBT atau ESC POST Print Service. Aplikasi RawBT  dapat mencetak struk dengan kualitas lebih HD dibanding koneksi bluetooth bawaan APK olshop, kekurangan aplikasi tersebut yaitu free versionnya mengandung watermark.

• Cetak via Smartphone, jangan lewat tablet.

Pada dasarnya, struk yang di print ke kertas bentuknya berdasarkan apa yang tampil di layar hp anda. Jika anda menggunakan tablet dengan layar yang besar, maka struk yang di print juga akan besar dan dapat menghasilkan hasil cetak yang tidak sesuai keinginan, jadi kami sarankan agar akses dan cetak struk melalui smartphone pada umumnya.