afasyah.web.id

Upgrade prestashop

Detail cara upgrade sudah dijelaskan dengan detail di-wikinya. Tapi berikut proses yang aku gunakan untuk upgrade Prestashop ke versi yang lebih baru di hosting yang menggunakan CPanel.

Catatan : Prestashop sudah diinstall di root folder (\public_html\)

1. Backup terlebih dahulu database yang digunakan.

2. Jika Anda menggunakan bahasa selain bahasa Inggris, backup terlebih dahulu translationnya (dari menu Tools | Translations | Export a language).

3. Download Prestashop versi terbaru.

4. Extract filenya, kemudian compress lagi (dengan nama file, misalnya update.zip) tapi tanpa root folder (kalo urang jelas lihat perbandingan dibawah)

5. Buat folder baru diserver, misalnya backup.

6. Login ke CPanel, pilih File Manager :

7. Pindahkan/move semua folder dan file prestashop ke folder backup.

8. Upload file update.zip tadi ke root dan extract.

9. Jika Anda sudah memodifikasi Modul yang ada, copy module tersebut dari folder backup ke root, demikian juga dengan folder img, mails dan theme (jika menggunakan custom theme).

10. Copy file settings.inc.php dari folder backup\config ke public_html\config.

9. Buka http://domainanda.com/install dan ikuti petunjuknya (prosesnya lebih kurang sama dengan instalasi Prestashop pertama kali).

10. Jika proses instalasi berjalan lancar dan Anda berhasil login ke back office, perhatikan bagian footernya karena disana terdapat informasi versi Prestashop yang sedang digunakan. Jangan lupa untuk me-restore kembali translation diatas (jika menggunakan bahasa selain Inggris).

Prestashop – Menampilkan slideshow di halaman depan

Prestashop seperti yang mungkin sudah Anda kenal, adalah salah satu aplikasi web, berupa Content Management System (CMS) khusus untuk keperluan e-commerce. Dibuat menggunakan PHP dan memanfaatkan SMARTY sebagai template engine-nya. Sekarang kita akan mencoba untuk menambahkan slideshow dihalaman depan satu website yang berguna misalnya untuk menampilkan serangkaian produk terbaru.

S3Slider

Untuk keperluan slideshow ada beberapa alternatif yang dapat digunakan antara lain menggunakan Flash atau Javascript. Untuk sederhananya kita gunakan javascript untuk keperluan slideshow diatas yaitu S3Slider.

Menggunakan script ini sangat mudah, cukup dengan menyisipkan kode javascript, CSS dan HTML (berupa list untuk .menampilkan image). Lebih detailnya Anda dapat melihat contohnya di website S3Slider atau download s3SliderFull.zip yang berisi script berikut contoh penggunaannya.

Integrasi S3Slider dengan Prestashop

Halaman depan yang memuat tampilan yang akan diganti sebetulnya adalah berupa modul bernama “Editorial”. Modul ini dapat Anda temukan di folder modules\Editorial. Backup dahulu folder tersebut sebelum melakukan perubahan berikut.

Ada beberapa file disana, antara lain: editorial.xml (sumber data), editorial.tpl (template layout), editorial.php (bertanggung jawab mengisi data dengan menggunakan layout diatas dan menampilkannya di halaman depan). Karena yang akan kita ubah adalah layoutnya, maka perubahan cukup dilakukan pada file editorial.tpl. Buka file tersebut dan paste kode dibawah ini:

   1: <!-- Module Editorial -->

   2: <div id="editorial_block_center" class="editorial_block">

   3: <script type="text/javascript" src="{$this_path}s3Slider.js"></script>

   4: <script type="text/javascript">

   5: {literal}

   6:  $(document).ready(function() {$('#slider').s3Slider({timeOut: 3000});});

   7: {/literal}

   8: </script>

   9: <style type="text/css">@import url({$this_path}editorial.css);</style>

  10: <div id="slider">

  11:     <ul id="sliderContent">

  12:         <li class="sliderImage">

  13:             <a href=""><img src="{$this_path}1.jpg" alt="1" /></a>

  14:             <span class="top"><strong>Title text 1</strong><br />Content text...</span>

  15:         </li>

  16:         <li class="sliderImage">

  17:             <a href=""><img src="{$this_path}2.jpg" alt="2" /></a>

  18:             <span class="top"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>

  19:         </li>

  20:         <li class="sliderImage">

  21:             <img src="{$this_path}3.jpg" alt="3" />

  22:             <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>

  23:         </li>

  24:         <li class="sliderImage">

  25:             <img src="{$this_path}4.jpg" alt="4" />

  26:             <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>

  27:         </li>

  28:         <li class="sliderImage">

  29:             <img src="{$this_path}5.jpg" alt="5" />

  30:             <span class="top"><strong>Title text 2</strong><br />Content text...</span>

  31:         </li>

  32:         <div class="clear sliderImage"></div>

  33:     </ul>

  34:     <div class="clear"></div>

  35: </div>

  36: {if $xml->body->$logo_subheading}{$xml->body->$logo_subheading|stripslashes}{/if}

  37: {if $xml->body->$title}<h2>{$xml->body->$title|stripslashes}</h2>{/if}

  38: {if $xml->body->$subheading}<h3>{$xml->body->$subheading|stripslashes}</h3>{/if}

  39: {if $xml->body->$paragraph}<div>{$xml->body->$paragraph|stripslashes}</div>{/if}

  40: </div>

  41: <!-- /Module Editorial -->

Selanjutnya copy file s3Slider.js dan file image dari s3SliderFull.zip (ada di folder images\410) ke folder modules\editoral. Buat file editorial.css di folder yang sama dan tambahkan kode dibawah ini (catatan : width dan height dapat diatur menyesuaikan image yang akan Anda gunakan)

   1: #slider {

   2:      width: 410px; /* important to be same as image width */

   3:      height: 300px; /* important to be same as image height */

   4:      position: relative; /* important */

   5:      overflow: hidden; /* important */

   6: }

   7: #sliderContent {

   8:      width: 410px; /* important to be same as image width or wider */

   9:      height:310px; /* add extra 10px for consistent height */

  10: }

  11: .sliderImage {float: left;position: relative;display: none;}

  12: .sliderImage span {

  13:      position: absolute;

  14:     font: 10px/15px Arial, Helvetica, sans-serif;

  15:      padding: 10px 13px;

  16:      width: 384px;

  17:      background-color: #000;

  18:      filter: alpha(opacity=70);

  19:      -moz-opacity: 0.7;

  20:      -khtml-opacity: 0.7;

  21:      opacity: 0.7;

  22:      color: #fff;

  23:      display: none;

  24: }

  25: .sliderImage span strong {font-size: 14px;}

  26: .top {top: 0;left: 0;}

  27: .bottom {bottom: 0;left: 0;}

  28: ul { list-style-type: none;}

Itu saja. Jalankan Prestashop Anda, maka akan memiliki tampilan seperti dibawah ini:

-> Download modul Editorial yang telah dimodifikasi diatas.
-> demo http://shop.afasyah.web.id