Plug in Image Handler 2.0 untuk pengguna Zen Cart

Assalamualaikum & Salam Sejahtera,

Hari ni saya ingin membuat tutorial tentang cara-cara membuat effect mouse over untuk pengguna Zen Cart seperti yang anda dapat lihat dalam istockphoto.com. Anda boleh lihat satu contoh disini

Ok, sebelum itu, tutorial ini tidak mengajar apa itu Zen Cart. Jadi bagi yang zero knowledge tentang Zen Cart, saya harap anda boleh la belajar dulu apa itu Zen Cart dengan membeli produk SKO dari SaifulSham ataupun taip “zen cart tutorial” kat google. Plug in ini dinamakan Image Handler dan versi terkini adalah 2.0. dan anda boleh download plug in tersebut secara percuma disini

Untuk proses instalasi, anda boleh rujuk kepada manual asal Image Handler – http://breakmyzencart.com/ih-doc. Oh ya, tujuan saya menulis tutorial ini adalah kerana manual yang diberikan oleh pencipta plug in ini agak teknikal dan susah nak faham. Jadi anda boleh juga rujuk kepada manual asal kerana manual asal memang detail. Anggaplah tutorial saya ini untuk memudahkan proses pemahaman anda.

Sediakan 3 gambar yang berlainan saiz. Gambar yang paling kecil adalah gambar yang akan dipaparkan sebagai “thumbnail”, gambar sederhana adalah image yang terhasil semasa “mouse over”. Apa yang perlu diberi perhatian disini adalah semasa memberi nama kepada gambar-gambar tersebut. Katakan anda telah menetapkan untuk memberi nama “mouse” kepada gambar-gambar anda. Jadi apa yang anda perlu buat adalah seperti berikut :

Gambar kecil : mouse.jpg

Gambar sederhana : mouse_MED.jpg

Gambar besar : mouse_LRG.jpg

Sekarang anda perlu set size untuk image-image tersebut. Di dalam admin area anda, pergi Configuration > Images. Lihat diruangan “Title”, anda akan jumpa options seperti “Small Image Width” dan “Small Image Height”. Itu adalah saiz untuk image kecil. Masukkan value untuk options tersebut. Contohnya, anda boleh set image secil sebagai 98×98.

Kemudian, masih di ruangan “Title”, lihat pula pada option “Product Info - Image Width” dan “Product Info - Image Height”. Options ini menentukan saiz untuk image sederhana anda. Masukkan value seperti biasa.

Ok, sekarang kita akan test plug in Image Handler 2.0 yang kita dah setting ini. Di dalam admin area, pergi ke Catalog>Categories/Products. Jika website anda masih baru dan belum mempunyai apa-apa kategori, sila buat satu kategori baru. Caranya mudah sahaja, klik button “new category” dan isikan maklumat yang diperlukan. Ok, selepas itu, masuk kedalam kategori baru anda tadi, dan create new product. Isi apa yang diperlukan, dan pada bahagian “Products Image”, browse gambar kecil (dalam contoh ini mouse.jpg) dan pada bahagian “Upload to directory”, pilih “Main Directory”

Selepas itu, buka ftp anda dan uploadkan gambar sederhana ke directory : /public_html/images/medium/

dan uploadkan gambar besar ke directory : /public_html/images/large/

Selepas itu..? Mane ade lagi dah..dah siap

Senang kan? Jika anda ada sebarang masalah, boleh tinggalkan diruangan komen. Insyaallah saya akan cuba menjawabnya.

Selamat mencuba,

-MZ-