Prestashop – Menampilkan slideshow di halaman depan

danni — Thu, 18 Jun 2009 05:27:17 +0000

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

afasyah.web.id » CSS

Prestashop – Menampilkan slideshow di halaman depan

S3Slider

Integrasi S3Slider dengan Prestashop