Cara Dasar Membuat Template Toko Online Menggunakan simpleCart Milik Wojodesign

www.azid45.web.id - Cara Dasar Membuat Template Toko Online Menggunakan simpleCart Milik Wojodesign. Assalamualaikum.Wr.Wb pada kesempatan ini saya akan membahas terkait pembuatan template produk jual beli online dengan platform blogger.

Pada pembuatan produk jual beli online tentunya hal yang paling pokok menurut saya adalah javascript yang support untuk Cart Product. Javascript khusus produk sudah banyak bertebaran di google khususnya google yang berbahasa Inggris.

Selain itu di youtube juga Anda akan lebih mudah mencari javascript ini plus dengan tutorialnya. Akan tetapi bila Anda seorang pemula dalam coding maka saya menyarankan untuk menggunkan simpleCart milik Wojodesign. Meskipun javascript ini sudah 7 tahun tidak di update tapi keunggulannya termasuk luar biasanya.

Jika Anda ingin mendapatkan javascript ini, Anda bisa lihat pada artikel sebelumnya tentang "simpleCart Javascript Checkout Via Whatsapp".

Salah satu keunggulan dari script ini adalah sangat mudah untuk di eksekusi dan sudah terdapat logastroge sehingga data cart yang pernah di klik oleh pengunjung tidak akan hilang meski pengunjung pindah halaman bahkan menutup browsernya.

Selain keunggulan tersebut javascript ini bagi saya juga mudah untuk diedit ulang sesuai keinginan. Meskipun secara default javascript ini hanya support checkout Paypal dan Gmail (dengan syarat harus ada script khusus support Gmailnya) namun dengan sedikit editing kita bisa menggunakan script tersebut support checkout Whatsapp bahkan sangat rapi.

Secara standar script simpleCart menggunakan mata uang USD sebagai mata uang utama, kita bisa mengubah menjadi IDR dengan cara mencari kode // Currencies dan menambahkan kode IDR sebagai berikut:

"IDR": { code: "IDR", symbol: "Rp.", name: "Indonesia Rupiah" },

Sehingga akan nambah kodenya seperti ini

currencies = {
"IDR": { code: "IDR", symbol: "Rp.", name: "Indonesia Rupiah" },
"USD": { code: "USD", symbol: "$", name: "US Dollar" },
............................................................................
},

Dengan settingan tersebut sudah support IDR, tinggal kita harus tahu output yang harus digunakan dari simpleCart ini.

Ada beberapa kode  HTML yang harus Anda ketahui agar javascript ini bisa digunakan secara optimal, yaitu

cartStyle: "div",
cartColumns: [
{ attr: "name", label: "Name" },
{ attr: "price", label: "Price", view: 'currency' },
{ view: "decrement", label: false },
{ attr: "quantity", label: "Qty" },
{ view: "increment", label: false },
{ attr: "total", label: "SubTotal", view: 'currency' },
{ view: "remove", text: "Remove", label: false }
],

Dari kode ini nanti akan muncul output di blog produk Anda yaitu nama produk (Name), harga produk (Price), jumlah produk (Qty), subTotal (harga total per produk), dan remove (tombol hapus produk). Untuk decrement dan increment menggunakan pemanggel label false jadi saat output ada tombol plus dan minus namun tidak ada penamaannya.

Dari kode diatas kita dapat menambahkan - mengurangi, dan juga editing. Seperti Name ditambahkan view sebagaimana price dan lain sebagainya.

Contoh saja, saya akan menambahkan foto/gambar agar output produk lebih menarik maka kita bisa menambahkan kode sebagai berikut;

{attr:"thumb",label:false,view:"image"},

Sehingga menjadi

cartStyle				: "div",
cartColumns			: [
{attr:"thumb",label:false,view:"image"},
{ attr: "name", label: "Name" },
{ attr: "price", label: "Price", view: 'currency' },
{ view: "decrement", label: false },
{ attr: "quantity", label: "Qty" },
{ view: "increment", label: false },
{ attr: "total", label: "SubTotal", view: 'currency' },
{ view: "remove", text: "Remove", label: false }
],

Untuk urutan posisi kode tersebut juga mempengaruhi outputnya. Jika Anda ingin mengubah nama terlebih dahulu baru gambar Anda bisa mengubah kode name di atas sendiri.

Sebagaimana price dengan view currency, label foto (thumb) juga mempunyai view dengan input masukan image. Agar pemanggil image ini berjalan dengan baik dan tidak bug kita harus membuat kode imagenya dengan mencari kelompok kode Cart View. Kurang lebih seperti ini

// built in cart views for item cells
cartColumnViews = {
attr: function (item, column) {
return item.get(column.attr) || "";
},

Jika sudah ketemu tinggal menambahkan kode dibawah ini

image: function (item, column) {
return "<img src='" + item.get(column.attr) + "'/>"

atau bisa menggunakan

image: function (item, column) {
return ["<img src='" + item.get(column.attr) + "' alt='" +item.text+ "'/>"]

Output tata letak yang lainnya kita juga bisa melihat kode dibawah ini:

// write out cart
writeCart: function (selector) {
var TABLE = settings.cartStyle.toLowerCase(),
isTable = TABLE === 'table',
TR = isTable ? "tr" : "div",
TH = isTable ? 'th' : 'div',
TD = isTable ? 'td' : 'div',
THEAD = isTable ? 'thead' : 'div',

Kode diatas akan menampilkan output berupa tabel. Karena kita akan fokus checkout Whatsapp dan agar tampilan output produk tersebut bisa di editing di template kita dengan mudah Anda bisa mengubah kode table, tr, th, dan td, menjadi kode "div" saja. Sehingga akan seperti dibawah ini:

// write out cart
writeCart: function (selector) {
var TABLE = settings.cartStyle.toLowerCase(),
isTable = TABLE === 'div',
TR = isTable ? "div" : "div",
TH = isTable ? 'div' : 'div',
TD = isTable ? 'div' : 'div',
THEAD = isTable ? 'div' : 'div',

Dari sini Anda bisa memanipulasi dan bereksperiment terkait kode yang saya sebutkan diatas. Kode tersebut menurut saya adalah kode inti yang perlu dipelajari lebih mendalam agar chekout Whatsapp berjalan secara sempurna.

Baiklah sebagaimana pernyataan sebelumnya bahwa javascript tersebut tidak akan berjalan tanpa kode pemanggil yang berupa kode HTML (ini penamaan saya, tidak tau bahasa resmi kodingnya). Untuk kode HTML standarnya adalah sebagai berikut

<div class="simpleCart_shelfItem">
    <h2 class="item_name"> Awesome T-shirt </h2>
    <input type="text" value="1" class="item_Quantity">
    <span class="item_price">$35.99</span>
	<a class="item_add" href="javascript:;"> Add to Cart </a>
</div>

Dari contoh ini kode item_name, item_Quantity, item_price, item_add semuanya harus terbungkus oleh kode simpleCart_shelfItem. Kode tersebut adalah kode utama, jadi pastikan Anda meletakkan kode ini dengan pas pada blog Anda.

Biasanya kode simpleCart_shelfItem diletakkan berdampingan di post-outer. Ini juga tergantung templatenya ya. Untuk kode item_name bisa di pasang di kode title postingan agar item_name ini secara otomatis mengidentifikasi judul produk Anda. Untuk gambar atau foto Anda bisa memasangnya di kode <img ....> postingan Anda dengan class='item_thumb'. Begitu juga harga produk Anda bisa menambahkan kode class='item_price'.

Untuk kode item_add adalah kondisional saja, Anda bisa memasangnya di bawah postingan produk atau dimanapun asal letakknya masih di dalam kode simpleCart_shelfItem.

Selain kode HTML diatas ada kode lagi yang perlu Anda ingat diantaranya adalah:

item_Quantity
item_remove
item_size
simpleCart_Quantity
simpleCart_total
simpleCart_Empty

dari ketika kode tersebut harus di dalam atribut class=' ...' dan bisa di bungkus dengan div/span atau yang lainnya. Contoh saja <div class='item_Quantity'>.

Khusu item_size harus terbungkus dengan kode select option, seperti dibawah ini:

 	<select class="item_size">
        <option value="Small"> Small </option>
        <option value="Medium"> Medium </option>
        <option value="Large"> Large </option>
    </select>

Demikianlah artikel terkait Cara Dasar Membuat Template Toko Online Menggunakan simpleCart Milik Wojodesign. Selamat berkreasi dan semoga bemanfaat. Amin