Archive

Archive for the ‘Tutorial’ Category

Kustomisasi ( Customize ) Customer reassurance block Prestashop 1.5.4

Kita dapat melakukan kustomisasi Block Customer reassurance melalui script PHP-nya pada folder C:\xampp\htdocs\presta1540\modules\blockreinsurance – ada beberapa script PHP yang ada di folder  ini, perhatikan gambar dibawah ini :

c1_edit_reassurance

C:\xampp\htdocs\presta1540\modules\blockreinsurance\img – seluruh gambar yang dipergunakan pada block ini disimpan dalam folder ini, silakan rubah dan ganti semau anda.

Bukalah file style.css dengan text editor seperti  notepad/notepad++  dan edit-lah beberapa script dibawah ini

c2_edit_reassurance

Hasil edit-an menjadi seperti ini :

c3_edit_reassurance

Selamat mencoba…

Semoga berhasil…

 

Note : Sebelum melakukan perubahan terhadap tema ( theme ) sebaiknya di backup terlebih dahulu atau salin kemudian diganti judul thema-nya.

 

Advertisements

Meng-optimasi Customer reassurance block Prestashop 1.5.4

1_edit_reassurance

Customer reassurance block adalah feature yang ada dalam Prestashop 1.5.4, ini dapat kita optimasi melalui Control Panel/Admin/Dashboard yang disediakan oleh Prestashop

1. Masuklah ke Control Panel/Admin/Dashboard Prestashsop dengan mengetikan pada browser anda http://localhost/presta1540/admin  ( biasanya Prestashop meminta anda mengganti folder admin menjadi folder lain misal : admin123, tulislah sesuai dengan folder admin yang anda buat, untuk mengecek folder admin anda dapat melakukannya lewat File Explorer C:\xampp\htdocs\presta1540 ),  selanjutnya akan muncul layot login, isilah Username dan Password yang anda Isi pada saat meng-Install.

2. Pada menu tab modules – modules – Front Office Features pada tab Module : List Modules carilah Customer reassurance block seperti dibawah ini :

2_edit_reassurance

3. Klik Configure, akan muncul kotak dialog selanjutnya seperti dibawah ini :

3_edit_reassurance

4. Jika ingin meng-edit klik pada gambar ini  21_edit_reassurance dan jika ingin menghapus klik gambar ini22_edit_reassurance

5. Pada pilihan edit akan muncul menu dialog seperti ini :

4_edit_reassurance

6. Setalah anda melakukan peng-isi-an baik itu Add New  / Edit  terhadap block ini simpanlah dengan meng-klik button Save

7. Layout hasil dari penambahan dari block Customer reassurance

5_edit_reassurance

6_edit_reassurance

Selamat mencoba….

Install Prestashop 1.5.4.0

Bahan-Bahan yang diperlukan untuk meng-install Prestashop ini adalah sebagai berikut :

1. Download Prestashop 1.5.4.0 di http://www.prestashop.com/en/download atau di http://code.google.com/p/prestashop/downloads/list
2. Download Language zip sesuai keperluan anda, secara default English di  http://www.prestashop.com/download/lang_packs/gzip/1.5.4.0/en.gzip
3. Ekstrak prestashop_1.5.4.0.zip kedalam folder C:\xampp\htdocs

edit_1

4. Salin/Copy file en.gzip ke dalam folder C:\xampp\htdocs\presta1540\translations setelah edit-lah file language.xml di dalam folder C:\xampp\htdocs\presta1540\install\langs\en

Sebelum diedit

<?xml version=”1.0″ encoding=”UTF-8″?>
<language>
<name><![CDATA[English (English)]]></name>
      <language_code>en-us</language_code>
<date_format_lite>m/j/Y</date_format_lite>
<date_format_full>m/j/Y H:i:s</date_format_full>
<is_rtl>false</is_rtl>
</language>

Setelah diedit

<?xml version=”1.0″ encoding=”UTF-8″?>
<language>
<name><![CDATA[English (English)]]></name>
         <language_code>en</language_code>
<date_format_lite>m/j/Y</date_format_lite>
<date_format_full>m/j/Y H:i:s</date_format_full>
<is_rtl>false</is_rtl>
</language>

5. Lanjutkan dengan membuat database kosong melalui phpMyAdmin, buka browser favorit anda ketik http://localhost/phpmyadmin dan enter, sebelumnya aktifkan XAMMP Control Panel, Start Apache, Start MySql

6. Pada dialog Create new database isikan nama file-nya misal presta1540 lanjutkan dengan meng-klik Create ( ingatlah file ini akan digunakan saat pertama kali peng-install-an prestashop

install7

7. Tutup phpMyAdmin lanjutkan dengan melakukan peng-installan system prestashop dengan mengetikan melalui browser anda http://localhost/presta1540/install akan muncul layout seperti ini :

install1

8. Klik Next, akan muncul layout lainnya seperti dibawah ini :

install2

Klik pada kotak kecil pada tulisan “I agree to the above terms and conditions” lanjutkan dengan mengetik Next dan akan muncul layout selanjutnya dan isikan data-data yang diperlukan

Database Server        : localhost                  –> default
Database Name          : presta1540             –>database yg sebelumnya di buat
Database Login          : root                            –>default, kondisi online hrs dirubah
Database Password  : kosong                      –>default kosong, biarkan saja pd
kondisi online ( tidak di localhost ) wajib diisi
Database Engine         : MyISAM                  –>default, jika akan diganti dengan yg
lain, seperti InnoDB, aktifkan dulu
melalui my.cnf pada folder  mysql/bin
Table Prefix                   : ps_                            –> default, bisa diganti dengan yang  lain seperti
                                                                                         toko_ atau tk_

setelah diisi semua lakukan pengetesan dengan meng-klik “Test your database connection now!”. Jika berhasil akan muncul dialog box “Database is Connected” dan lanjutkan dengan meng-klik Next seperti gambar dibawah ini

install3

Selanjutnya akan muncul layout baru, lakukan pengisian / sesuai dengan keinginan anda, seperti gambar dibawah ini, dan lanjutkan dengan meng-klik Next

install4

Jika tidak ada masalah, akan muncul kotak dialog selanjutnya

install5

 

 

install6

 

Peng-install-an selesai silakan ketik di browser anda http://localhost/presta1540

selamat mencoba

Modifikasi Maintenance mode Prestashop ( Mode Offline )

Maintenance mode atau mode pemeliharan, perbaikan atau mode offline Prestashop dapat kita modifikasi agar terlihat lebih cool.. ya paling tidak terkesan tidak kaku-lah, nah sekarang mari kita coba me-modifikasi Maintenance mode Prestashop.

Pertama, non-active-kan dahulu toko anda dengan meng-klik tab preferences l pada admin module (BO) lalu ceklist pada pilihan No kemudian disimpan dengan meng-klik button save di bagian bawah

enable shop handycraft plasa

Status Enable Shop : Yes menyatakan toko / shop bisa /siap dikunjungi sedangkan mode : No sebaliknya alias tidak bisa dikunjungi ( offline ) untuk memastikan hal ini silakan anda klik View my shop yang ada di pojok kanan atas module BO ini, tampilan default-nya adalah seperti gambar dibawah ini :

maintenance-Handycraft-Plasa

Kedua, bagaimana cara modifikasi tampilan default dari maintenance mode ini agar terlihat lebih friendly, carilah file maintenance.tpl pada folder themes anda, kemudian bukalah dengan Notepad++ atau text editor favorite anda, lihat gambar berikut ini

maintenance-tpl

maintenance-css

Hasil dari perubahan yang saya lakukan menjadi seperti ini

offline-handycraftplasa-net

Selamat Mencoba, semoga berhasil

JBXMenu – Menu Bar Vista Version (2)

Anda dapat membuat menu bar pada header prestashop anda menggunakan JBXMenu plus sedikit modifikasi dan jadilah menu bar seperti Vista yang anda inginkan, dibawah ini saya sajikan beberapa menu bar yang bisa anda pergunakan :

File-file png.ini simpan pada module JBXMenu di

C:\xampp\htdocs\presta144\modules\jbx_menu\gfx\menu\

dan jangan lupa cek-lah terlebih dahulu file superfish-modified.css yang ada pada folder

C:\xampp\htdocs\presta144\modules\jbx_menu\css

Apakah file ini sudah meng-akomodasi ke-inginan anda yaitu menampilkan menu bar Vista

Jika tidak silakan lihat postingan saya sebelumnya tentang JBXMenu

menu  :

Hover :

Hasil    :

handycraftplasa-pink

Menu : 

Hover :

Hasil

handycraftplasa-green

Untuk hasil-hasil lainnya silakan gunakan file-file png dibawah ini

Menu  :  1  2  3  4  5  6  7  8  9 10

Hover :  1  2  3  4  5  6  7  8  9  10

 

Merubah/menambah gambar/warna pada background Prestashop

Merubah / menambah gambar / warna pada background prestashop sebenarnya terbilang mudah dilakukan saya jamin anda semuanya pasti bisa, sekarang mari kita lakukan perubahan sedikit file global.css yang berada di C:\xampp\htdocs\presta144\themes\themes-mu\cssseperti gambar dibawah ini :

merubah-menambah-background

background-color: white;            bagian ini merubah warna background dari standard yang berwarna putih menjadi warna lain sesuai dengan pilihan anda, anda bisa menggunakan ColorSchemer Studio apabila anda ingin mencari warna yang lebih spesifik atau menggunakan addon-nya mozilla yaitu COLOR That Site!

 

background: url(“../img/back-028.gif”) scroll left top transparent;            bagian ini merubah background dengan memberikan latar belakang berupa image/picture, file back-028.gif ini berukuran 151px x 184px atau sesuaikan dengan selera anda , file ini diletakan di C:\xampp\htdocs\presta144\themes\themes-mu\img

background

Lihat gambar dibawah ini, hasil dari perubahan dengan latarbelakang image

background-image-prestashop

background-repeat:repeat-x: repeat-y;                                bagian ini memberikan efect penyebaran image ke seluruh bagian halaman web baik secara  horizontal maupun vertikal , jika anda hanya menuliskan repeat-x maka penyebaran image hanya secara horizontal ( 1 baris ) begitu juga dengan repeat-y penyebaran image dilakukan secara vertikal.

Image background-repeat:repeat-x

background-image_repeat-x

Image background-repeat:repeat-x

background-image_repeat-y

Selamat mencoba

 

untuk background yang lain anda bisa men-download-nya dari http://www.freebackgrounds.com/background_28.htm

 

Merubah / menambah gambar / warna pada block header

Merubah/menambah gambar/warna pada block header sebenarnya gampang-gampang sulit ( atau memang sulit banget… ). Gampang-nya kalau sudah tahu  gambar atau warna-nya harus disisipkan dimana, sulitnya ya kebalikan dari yang tadi…puuuzzzzziiiiinggggg.

Nah sekarang racikan jamunya saya kasih tau supaya gak puzzzing lagi :

Pertama siapkan gambar / warna yang sesuai dengan kebutuhan anda, saya asumsikan anda menggunakan gambar dengan ukuran 958px X 119px dan nama file tersebut adalah header_bg.png seperti dibawah ini

Read more…