MODIFIKASI MAINTENANCE MODE PRESTASHOP ( MODE OFFLINE PRESTASHOP)

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-maintenance pada admin module (BO) lalu ceklist pada pilihan No kemudian disimpan dengan meng-klik button save lihat gambar berikut :

Status Enable Shop : Yes menyatakan toko / shop bisa /siap dikunjungi sedangkan 

Status Enable Shop :  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 :

Kedua, bagaimana cara modifikasi tampilan default dari maintenance mode prestashop ini agar terlihat lebih friendly, carilah file maintenance.css pada folder C:\xampp\htdocs\presta1541\themes\default\css , kemudian bukalah dengan Notepad++ atau text editor favorite anda  rubahlah dengan script dibawah ini

Script : maintenance.css

#maintenance {
margin:0 auto;
width:940px;
font:normal 30px Arial, Verdana, sans-serif;
color:#F4F436;
background:url(../img/offline-hcp.png) no-repeat 100% 0 #fff;
}
#maintenance #message {
margin:0 20px;
padding:50px 310px 0 0;
height:360px;

}

Salin / copy file image offline-hcp.png ke dalam folder C:\xampp\htdocs\presta1541\themes\default\img dan hasil perubahannya seperti dibawah ini :

Sekian, semoga bermanfaat



Tutorial by syah jehan muhammad (syahjehan27@gmail.com )

MERUBAH PENAMPILAN PRESTASHOP DENGAN MENAMBAHKAN WARNA DAN BACKGROUND

Merubah penampilan Prestashop dengan warna / color  dapat kita lakukan melalui file yang bernama global.css file ini berada pada folder your-themes\css, dibawah ini saya lampirkan area yang dapat dirubah warnanya :

1. Background global.css (line 51)

body{
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#222;
background:#8AE3F9
}

Hasil dari penambahan background:#8AE3F9 akan memberikan efek background pada seluruh halaman, lihat gambar

2. Feature product color                        homefeatured.css (line 1)

#featured-products_block_center li {
margin-right:10px;
padding:10px 0;
width:112px;
height:240px;
background-color: #2A0453;
}

Hasil dari penambahan background-color: #2A0453  akan memberikan efek background pada block home featured product, lihat gambar

3. Background dengan picture / image global.css (line 51)

Letakan file love.gif ini ( atau file lain ) ke folder  C:\xampp\htdocs\presta1541\themes\default\img

body{
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#222;
background:url(../img/love.gif) scroll left top transparent;
background-repeat:repeat-x: rapeat-y;
}

Hasil dari penambahan background:url(../img/love.gif) scroll left top transparent; dan background-repeat:repeat-x: rapeat-y; akan memberikan efek background pada halaman  lihat gambar

Sekian, semoga bermanfaat


Tutorial by syah jehan muhammad ( syahjehan27@gmail.com )

CUSTOMIZE HOME FEATURED PRODUCT DI PRESTASHOP 1.5.4.1

Untuk meng-customisasi block home featured Product pada Prestashop 1.5.4.1 dari 4 kolom menjadi 6 kolom dapat kita lakukan dengan merubah script yang ada pada module prestashop.

Pertama, Login-lah ke Admin Module / Dashborad / Control Panel kemudian click tab Preferences – Images, lihat gambar berikut  ini :

Akan muncul halaman selanjutnya seperti ini :

Rubah-lah image size  home_default sesuai dengan yang anda inginkan dengan meng-klik icon edit, kemudian di save

Kedua, bukalah dengan notepad++ script php dari module ini di folder module, homefeatured kemudian klik homefeatured.tpl setelah terbuka rubahlah liHeight  value=250 menjadi 285 dan nbItemsPerLine value=4 menjadi 6

Sebelum dirubah :
{assign var='liHeight' value=250}
{assign var='nbItemsPerLine' value=4}

Sesudah dirubah :
{assign var='liHeight' value=285}
{assign var='nbItemsPerLine' value=6}

Ketiga, rubahlah script homefeatured.css menjadi seperti ini

#featured-products_block_center li {
margin-right:10px;
padding:10px 0;
width:112px;
height:240px
}

Keempat, rubahlah script grid_prestashop.css menjadi seperti ini

/* Grid >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .grid_1 {width:91px;}
.container_9 .grid_2 {width:202px;}
.container_9 .grid_3 {width:313px;}
.container_9 .grid_4 {width:424px;}
.container_9 .grid_5 {width:750px;}
.container_9 .grid_6 {width:646px;}
.container_9 .grid_7 {width:757px;}
.container_9 .grid_8 {width:868px;}
.container_9 .grid_9 {width:980px;}

Hasil dari perubahan yang anda lakukan seperti ini :

Sekian, semoga bermanfaat



Tutorial by syah jehan muhammad ( syahjehan27@gmail.com )

PRESTASHOP 1.5.4 - MERUBAH / MEMINDAHKAN POSISI MODULE KE BLOCK LAIN

Untuk merubah atau memindahkan posisi module block dari kiri ke kanan atau sebaliknya dapat kita lakukan dengan cara sebagai berikut

1. Target memidahkan module yang ada di kanan ke kiri serta me-non active-kan dan men-disable beberapa module
2. Login ke admin module / dashboard pilih tab menu Modules-Modules

3. Akan muncul halaman yang berisi list module yang digunakan, pilih tab menu front office features carilah file-file berikut ini dan anda bisa men-disable-nya bila tidak diperlukan

4. Setelah anda men-disable beberapa module yang tidak diperlukan ( bila diperlukan kembali, klik Enable ) lanjutkan dengan meng-clik tab module-positions

Selanjutnya akan muncul halaman module positions seperti ini :

5. Pilihlah transplant module lihat gambar dibawah, pilih tanda panah kecil ke bawah kemudian click module yang akan dipindahkan misalkan Special block, click Hook into displayLeftColumn ( Left Column blocks ) kemudian Save

Setelah di save akan muncul konfirmasi yang menyatakan berhasil, lihat gambar 

Selanjutnya pada halaman module-positions arahkan mouse ke Box Right Column Block carilah block yang anda pindahkan ke sisi kiri ( left column block ) hapuslah block tersebut dengan meng-click icon tong sampah akan muncul konfirmasi yang menyatakan module tersebut berhasil dihapus, lihat gambar 

lihat tampilan setelah di pindahkan dan di disable beberapa block

Sekian, Semoga bermanfaat

Tutorial by syah jehan muhammad ( syahjehan27@gmail.com )

PRESTASHOP 1.5.4 CUSTOMIZE / MODIFIKASI BLOCK HOME SLIDER

Untuk me-modifikasi Block Home Slider dapat kita lakukan sebagai berikut :
1. Target merubah block home slider lebih panjang dari sebelumnya
2. Siapkan gambar/ image berukuran 725 x 184 x 24 atau sesuai ukuran yang anda inginkan, tapi dengan ketentuan panjang tidak melebihi 725px
3. Login ke Admin Module / Back Office / Control Panel lalu pilih Modules – Modules – Front Office Page – Image slider for your homepage – Configure dan isilah ukuran image yang anda inginkan lihat gambar

4. Kemudian buka file Homesilder.php dan grid_prestashop.css dengan Notepad++ rubahlah beberapa syntax . script berikut ini :
* Pada file Homeslider.php rubahlah sesuai dengan ukuran gambar pada isian berikut ini Height menjadi 184 dan Height menjadi 725

Pada file grid_prestashop.css rubah script-ya menjadi seperti gambar ini

Pada file bx_styles.css rubah script-ya menjadi seperti gambar ini

Untuk merubah ketiga file tersebut anda dapat mencari-nya di :

C:\xampp\htdocs\presta1541\modules\homeslider               untuk file homeslider.php dan bx_styles.css
C:\xampp\htdocs\presta1541\themes\default\css                  untuk file grid_prestashop.css
C:\xampp\htdocs\presta1541\modules\homeslider\images   untuk file image / gambar

Hasil dari modifikasi ini sebagai berikut :

Sekian, semoga bermanfaat

Tutorial by syah jehan muhammad ( syahjehan27@gmail.com )

SETTING FORCE COMPILE PRESTASHOP

Force compile
This forces Smarty to (re)compile templates on every invocation. This is handy for development and debugging, but should never be used in a production environment.

---------------------------------------------------------------------------------------------------------
Banyak sekali dari para Prestashoper tidak melakukan setting Force Compile ini pada saat me-modifikasi prestashop sehingga sering sekali terjadi error traping atau hasil modifikasi tidak menunjukan perubahan yang sebenarnya atau blank dan lain sebagainya.

Agar hal itu tidak terjadi pada saat melakukan customizing dan modification saya sangat sarankan untuk men-setting mode ini melalui admin module / control panel / dasboard – Advanced Paramters – Performance – click force compilation

Note : 
Pada kondisi online ( Webhost ) setiap anda melakukan hal yang sama ( editing / customizing / modification )  setting ini wajib diterapkan, setelah dirasa cukup kembalikan ke kondisi defaultnya.


Sekian, semoga bermanfaat


Tutorial by syah jehan muhammad ( syahjehan27@gmail.com )

PRESTASHOP 1.5.4 –CUSTOMISASI PRESTASHOP THEME PART 1 - (LEFT SIDE-HOME-RIGHT SIDE )

Sebelumnya kita sudah membahas Block Top / sisi bagian atas dari Prestashop Theme yaitu Block Header, Language, Currency, Cart, Search & Logo sekarang mari kita bahas blok selanjutnya yaitu
LEFT SIDE - LEFT COLUMN BLOCK, RGHT SIDE  - RIGHT COLUMN  BLOCK, HOME SIDE – HOME CONTENT BLOCK

Perhatikan layout default Prestashop 1.5.4.1 dibawah ini :

Untuk dapat melihat berapa module dan module apa saja yang ada di halaman depan ini, masuklah ke Admin Control / Control Panel pilih tab Modules-Positions.

anda akan disajikan halaman yang berisi penempatan module-module diberbagai sisi sebagai contoh 

Left Block Column berisi 9 modules seperti gambar dibawah 

Sedangkan Right Column Block  berisi 6 modules seperti gambar dibawah 

Sedangkan Home Content Block Column berisi 2 modules seperti gambar dibawah 

Yang jadi pertanyaan bagi para Prestashoper adalah bagaimana jika saya akan memindahkan atau menghapus dari halaman depan block-block tersebut

1. Masuklah ke Admin/Control Panel Prestashop kemudian pilih tab Modules-Modules akan muncul halaman yang berisi seluruh modules yang digunakan dalam CMS Prestashop ini.

2. Pilihlah salah satu block yang akan anda disable / uninstall / delete misal block  supplier, block manufactur, block information dan block newsletter click text “disable”

Hasil setelah di disable seperti gambar dibawah ini :

Sekian, semoga bermanfaat

-------------- Perhatian dan Sangat PENTING ----------------------------------------------------------
1. Sebelum anda melakukan customze back-up lah terlebih dahulu
2. Setiap perubahan yang di lakukan di Prestashop ini harus di re-compile agar dapat berjalan dengan
    optimal.
    caranya : Login ke Dashboard/Control Panel – pilih tab Advanced Parameters – Perfomance -
                    Template cache click force compilation
-----------------------------------------------------------------------------------------------------------

Tutorial by syah jehan muhammad ( syahjehan27@gmail.com )

Prestashop 1.5.4 – TRANSAKSI CUSTOMER MELALUI SHOPING CART

Setelah anda memilih barang yang anda inginkan dengan  meng-click Add to Cart lanjutkan dengan meng-arah-kan  mouse ke cart area seperti dibawah ini

Akan muncul dialog box seperti dibawah ini :

Lanjutkan dengan meng-click button Checkout akan muncul kotak dialog selanjutnya

Selanjutnya klik Next button akan muncul kotak dialog selanjutnya, isilah sesuai dengan identitas pembeli

Setelah diisi klik Register button, akan kotak dialog selanjutnya

Lanjutkan dengan meng-click Next Button, akan muncul kotak dialog selanjutnya

Bila terjadi Error traping seperti diatas, maka click button Back dan perrbaikilah dengan mengisi Carriers ( Shipping ) lihat postingan saya sebelumnya tentang SHIPPING, CARRIERS, PRICE RANGES & WEIGHT RANGES setelah dilakukan perbaikan  akan muncul kotak dialog selanjutnya

Click “I agree to the terms of service and will adhere to them unconditionally. (Read the Terms of Service”, Next muncul kotak dialog selanjutnya

Pilihlah cara pembayaran yang paling mudah bisa dengan Cek atau Transfer
misal pembayaran akan dilakukan dengan cara di transfer antar bank, dan BCA yang dipilih
click pada text  “ PAY BY BCA BANK WIRE ( ORDER PROCESS WILL BE LONGER ) ”  akan muncul kotak dialog selanjutnya.

Click Place my order, akan muncul dialog selanjutnya

















Sampai disini proses transaksi telah berhasil, untuk selanjutnya anda dapat mengecek seluruh transaksi yang ada melalui order history yang ada di Admin Control / Dashboard / BO / CP




Sekian, semoga bermanfaat
Tutorial by syah jehan muhammad ( syahjehan27@gmail.com )