Jun
18
2009

Prestashop – Menampilkan slideshow di halaman depan

An article by danni

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:

<!-- Module Editorial -->
<div id="editorial_block_center" class="editorial_block">
<script type="text/javascript" src="{$this_path}s3Slider.js"></script>
<script type="text/javascript">
{literal}
 $(document).ready(function() {$('#slider').s3Slider({timeOut: 3000});});
{/literal}
</script>
<style type="text/css">@import url({$this_path}editorial.css);</style>
<div id="slider">
    <ul id="sliderContent">
        <li class="sliderImage">
            <a href=""><img src="{$this_path}1.jpg" alt="1" /></a>
            <span class="top"><strong>Title text 1</strong><br />Content text...</span>
        </li>
        <li class="sliderImage">
            <a href=""><img src="{$this_path}2.jpg" alt="2" /></a>
            <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>
        </li>
        <li class="sliderImage">
            <img src="{$this_path}3.jpg" alt="3" />
            <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
        </li>
        <li class="sliderImage">
            <img src="{$this_path}4.jpg" alt="4" />
            <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
        </li>
        <li class="sliderImage">
            <img src="{$this_path}5.jpg" alt="5" />
            <span class="top"><strong>Title text 2</strong><br />Content text...</span>
        </li>
        <div class="clear sliderImage"></div>
    </ul>
    <div class="clear"></div>
</div>
{if $xml->body->$logo_subheading}{$xml->body->$logo_subheading|stripslashes}{/if}
{if $xml->body->$title}<h2>{$xml->body->$title|stripslashes}</h2>{/if}
{if $xml->body->$subheading}<h3>{$xml->body->$subheading|stripslashes}</h3>{/if}
{if $xml->body->$paragraph}<div>{$xml->body->$paragraph|stripslashes}</div>{/if}
</div>
<!-- /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)

#slider {
     width: 410px; /* important to be same as image width */
     height: 300px; /* important to be same as image height */
     position: relative; /* important */
     overflow: hidden; /* important */
}
#sliderContent {
     width: 410px; /* important to be same as image width or wider */
     height:310px; /* add extra 10px for consistent height */
}
.sliderImage {float: left;position: relative;display: none;}
.sliderImage span {
     position: absolute;
    font: 10px/15px Arial, Helvetica, sans-serif;
     padding: 10px 13px;
     width: 384px;
     background-color: #000;
     filter: alpha(opacity=70);
     -moz-opacity: 0.7;
     -khtml-opacity: 0.7;
     opacity: 0.7;
     color: #fff;
     display: none;
}
.sliderImage span strong {font-size: 14px;}
.top {top: 0;left: 0;}
.bottom {bottom: 0;left: 0;}
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

Tags: Prestashop, slideshow

Upgrade prestashop

About the Author: Danni Afasyah

31 Comments + Add Comment

Ardian Yuli Setyanto June 18, 2009 at 2:36 pm

thanks dah buat tutorialnya, btw, hasil editan ini compatible kah dengan ie6,ie7,opera,chrome, dll ? Pernah bikin yang serupa tapi tidak bisa jalan jika dibuka di browser yang lain.
danni June 18, 2009 at 2:53 pm

Harusnya support. Dia kan pake script S3Slider, di websitenya bagian “browser support” dibilang sudah mendukung browser berikut (ditambah IE8) :

* Firefox 2.x (Win)
* Firefox 3.0.3 (Win/Linux/Mac)
* Opera 9.6 (Win/Linux)
* Safari 3.0.3 (Win/Mac)
* Internet Explorer 6 (Win)
* Internet Explorer 7 (Win)
* Google Chrome (Win)
jol June 19, 2009 at 3:12 pm

you can put a css file in the module folder and this line in first line of editorial.tpl to call csss

@import url({$base_dir}modules/editorial/filename.css);

This way you don’t need to add csss in global.css
jol June 19, 2009 at 3:22 pm

or this too

@import url({$this_path}filename.css);
danni June 19, 2009 at 5:39 pm

very nice. it’s updated now .. Thanks!
Andreanum September 8, 2009 at 4:08 pm

Contoh hasil jadi nya kayak apa ya???
danni September 9, 2009 at 1:41 am

contoh hasil jadi/demo ada di http://shop.afasyah.web.id/
Abu Kholid September 17, 2009 at 8:16 am

Terima kasih..
Sulistianto October 21, 2009 at 10:17 am

modul ini boleh juga mas, thanx
Ardian Yuli Setyanto October 28, 2009 at 10:39 pm

maaf tanya lagi, di web saya kok ada bug nya ya, setiap kali slide show nya jalan dia seperti nambah tag html baru. webnya di http://masakandaerah.com/ silahkan tunggu beberapa saat kemudian scroll ke bawah dan space nya akan bertambah terus.
terima kasih atas jawabannya.
dedi November 19, 2009 at 5:09 pm

cara add produk gi mana ya??
bantuin dunk ajarin caranya..
soe November 30, 2009 at 6:51 pm

Thanks, dan mohon maaf, sebelumnya.
tulisan anda telah aku praktekkan, dan sipp jadinya.
namun, seperti halnya milik anda;
http://shop.afasyah.web.id/

gambar sildeshownya rasanya tidak lurus, dan cenderung ke kiri.

nah, bagaimana ada lurus atau paling tidak senter (tengah2)

tx juragan.
danni December 1, 2009 at 3:10 pm

@dedi: tinggal taro gambar untuk slide di folder editorial dan tambahkan daftar filenya di editorial.tpl

@seo : itu karena gambar yg dipake buat slidenya lebarnya kurang dari kontainer yang ada. Solusinya sesuaikan lebar gambar dengan @lebar container.

Maksudnya gini, kolom tengah di default theme prestashop itu lebarnya 556px, nah bikin imagenya yg pas aja, 555px ato 556px kyknya bisa pas.
soe December 1, 2009 at 4:10 pm

thx. juragan

aku, coba…

Rasanya TEPAT anda!!!!
aku udah coba ;
untuk image 530px (karena prakiraan aku image prestashop 530x280px);
kok hasilnya sama;

oke-oke tx juragan afasyah.web.id.
danni December 1, 2009 at 5:08 pm

okay,, btw jgn lupa cms nya di modif juga ngikutin lebar si image.
dedi December 7, 2009 at 7:43 pm

bisa di pasang di wp g gan…???
danni December 17, 2009 at 7:06 pm

di WP ? bisa,,, mau modif sendiri di header template (misalnya kyk yg ada di http://waroengvb.net) ato pake yg dah jadi plugin kan ada.
Lirik Lagu Barat March 16, 2010 at 8:13 pm

Ini yg sy butuhkan…thanks atas tipsnya..
dono May 15, 2010 at 4:06 pm

mas tak cobo pasang, ganti folder editorial dari donlot malah ilang, tampilan halaman atas depan
dono May 15, 2010 at 10:58 pm

Gan Newbi bau kencur gak bisa pasang mod editorial,aku timpa editorial donlot gak ngefek trus aku delete dan ganti yg donlot dari agan..eh malah ilang alias tak tampak…

bantuin ya Gan
iyul May 24, 2010 at 7:36 am

thanks banget saya lagi butuh untuk ini
iyul May 24, 2010 at 7:37 am

thanks ini yang lagi saya butuhkan
sahabatshop.com
software toko July 14, 2010 at 9:13 pm

wah bagus nih, biar website semakin hidup.. thx
budy beo November 20, 2010 at 6:28 am

contoh ngerubah src=”{$this_path}s3Slider.js” dan @import url({$this_path}editorial.css); gimana ya, apanya yg harus dirubah dan apa aja yg harus di rubah?
mohon bantuannya

terimakasih
budy beo November 25, 2010 at 7:46 am

agan dani mohon penjelasannya lagi, agar yg ga bisa bisa teratasi.. apa aja yg perlu di rubah pada linknya agar gambara bisa muncul
danni November 25, 2010 at 7:58 am

@budy ngerubah gmn ? src itu kan dah ditentukan di file tpl nya jadi kalo dah download editorial.zip diatas harusnya tinggal pasang aja.
budy beo November 28, 2010 at 10:43 am

tampilan flashnya di tempat saya tidak muncul sama sekali.. jadi apanya yg perlu di rubah jika ada yg di rubah?
jadi dari file editorial.zip yg saya download ada yg perlu di edit lagi ataw tinggal pasang aja? klw ada yg perly di rubah atw di tmbahin di bagian tag nya, bagai mana caranya?
tanks sob…
bambang December 26, 2010 at 12:40 pm

bos mohon bantuannya……? gimana cara merubah dan mengganti gambar slidernya agar bs menampilkan produk yang kita jual.web saya di http://bambangirawan.com terimakasih atas info nya mantap…………….
Jay April 3, 2011 at 7:17 am

ijin praktekan, gan..ini sedang proses develop toko online moga lancar bisa berjalan thanks buat modulnya
Widya Wicaksana May 3, 2011 at 12:59 pm

Wah mantep banget nih tipsnya.
Trims bro..
Kakalu Indonesia Shop May 26, 2011 at 8:42 pm

Terimakasih banyak atas tutorialnya