Home > prestablog, Tutorial > Menambah jumlah kolom Home Featured Product Prestashop

Menambah jumlah kolom Home Featured Product Prestashop

Penting : Sebelum anda melakukan perubahan-perubahan back-up-lah module homefeatured dan themes default prestashop-nya dan pada BO,Preferences,Perfomance, pilihlah Force Compile : Yes

 

Untuk menambah jumlah kolom Home Featured Product Prestashop yang standart default-nya hanya 4 kolom menjadi 5 atau 6 kolom dapat kita lakukan dengan merubah script yang ada pada module prestashop.

Pertama, bukalah dengan notepad++ script php dari module ini di folder module, homefeatured kemudian klik homefeatured.tpl setelah terbuka coba diperhatikan bagian seperti gambar dibawah ini

Home Featured product tpl script

Perhatikan script value=342 dan value=4 rubahlah sesuai dengan petunjuk gambar ini menjadi 5 kolom

kolom home featured product

Jika anda perhatikan “value-285” menyatakan bahwa tinggi dari home featured product adalah 285px per 1 baris, jika 2 baris maka tinggi-nya menjadi 2 x 285px = 570px dan jika 3 baris menjadi 3 x 285px = 855px coba lihat simulasi gambar dibawah ini :

skema home featured product

Sedangkan “value=5” adalah jumlah kolom yang diinginkan, jadi jika tinggi 855px maka jumlah kolom yang ada adalah sebanyak 15 kolom featured product. Mungkin akan ada pertanyaan dari sobat-sobat semuanya, bagaimana kita mengetahui lebar kolom masing-masing, jika kita hanya mengetahui tinggi dan jumlah kolomnya ( bingunggggg, puzzzziiiiing …sama dunk ), sebenarnya ini juga yang pertama kali membuat saya puzzziiiiing bagaimana cara merubahnya kalau lebar-nya tidak ada dan jika tidak dirubah posisinya akan sulit mencapai 5  / 6  kolom

Kedua, bukalah admin module / back office kemudian klik tab Preferences, kemudian pilih menu Image seperti gambar dibawah ini :

Administration panel preferences image editing

Anda perhatikan ID No. 6 dengan lingkaran merah menyatakan bahwa imgae yang ada pada hook home adalah 129px X 129px, mari kita edit menjadi 100px X 100px seperti gambar dibawah ini

Administration panel preferences image edit

Setelah di rubah menjadi 100px X 100px simpanlah dengan meng-klik button Save

Ketiga, bukalah file Global.css dengan notepad++, file ini ada di folder C:\xampp\htdocs\presta144\themes\prestashop\css atau di webhost anda http://domain_name.com/themes/folder_theme/css, arahkan cursor ke line 921 ( jika tidak sama dengan gambar yang ada dibawah ini, carilah dengan perintah search / find kata-kata : #center_column atau dengan cara anda sendiri yang pasti data yang akan kita edit harus sama seperti gambar dibawah ini )

Administration panel preferences image edit css

Setelah selesai lanjutkan dengan menuju line 883 rubah width-nya menjadi 105px atau sesuai dengan keinginan anda seperti gambar dibawah ini :

Administration panel preferences image edit css

Layout featured products setelah dilakukan perubahan :

home feature product 5kolom

Keempat, untuk button view & Add to cart agar sesuai dengan kolom yang sudah kita rubah harus disesuaikan juga ukurannya ukuran defaultnya adalah : 124px X 54px, anda dapat mengecilkan button ini dengan editor editor gambar yang ada seperti Microsoft Paint atau lainnya sesuai dengan selera anda, sekarang mari kita rubah button tab ini dengan Ms. Paint buka folder C:\xampp\htdocs\presta144\themes\prestashop\img kemudian carilah file button-medium.png dan button-medium_exclusive.png dan rubahlah size-nya menjadi 90px X 54px

button featured product

Lanjutkan dengan merubah script Global.css pada line 536 dan rubahlah width-nya menjadi 80px atau sesuaikan dengan keinginan anda.

Administration panel preferences image edit css

Kemudian disusul dengan merubah font-size harga barang seperti dibawah ini :

Administration panel preferences image edit css

Lanjutkan dengan melakukan test pada website anda dengan meng-klik view my shop, semoga bermanfaat

Hasil akhir dari customzing yang kita lakukan :

home feature product 5kolom

Selamat mencoba………………

 

 

Advertisements
  1. 26/04/2012 at 04:36

    mas, saya mau tanya, bagaimana caranya supaya setiap upload produk baru tampil di urutan pertama secara otomatis, karena setingan default presta, setiap masukin produk baru, pasti tampilnya di urutan terakhir, seperti contoh mas di atas, produk baru “Jehan Muhammad” tampil di urutan terakhir, di urutan pertamanya adalah “Ipod Nano”..

  2. mahe
    26/11/2012 at 04:25

    mas kalo menambahkan produk di bawahnya gimana?terima kasih

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: