AIO — All In One – Johan’s Blog

Hari ini saya mencoba untuk mendokumentasikan percobaan saya untuk merombak tampilan daftar kategori produk di virtuemart agar kalo ada pengunjung melakukan browse terhadap kategori produk, maka produk akan di tampilkan dengan tampilan Grid View sesuai selera saya pribadi.  Dalam percobaan kali ini saya menggunakan VirtueMart 1.1.4 stable. Dalam percobaan ini saya menggunakan template dasar VM_BLUE yang saya ambil dari alamat situs https://dev.virtuemart.net/cb/proj/doc.do?doc_id=2079

Sebelum Melangkah lebih jauh, saya terlebih dahulu melakukan beberapa konfigurasi di Vituemart, adapun beberapa konfigurasi yang saya lakukan adalah :

• Menentukan Category Template yang nantinya akan digunakan dalam percobaan ini.  Caranya sebagai berikut, Tekan Menu [Components] –> [Vituemart] –> [Admin] –> [Configuration] –> [Site]. Pada Bagian Layout :
  • Select the theme for your Shop : Saya pilih VM_BLUE, pada bagian “Configuration” pilih Product List Style dengan Product Listing with a table
  • Default number of products in a row : 3, nilai 3 karena saya ingin dalan satu baris nanti muncul 3 produk
  • Category Template : browse_2, file ini nantinya yang saya jadikan percobaan
  • FLYPAGE :  flypage_color.tpl
• Melakukan konfigurasi kategori di bagian Category Information dan memastikan bahwa setingan untuk Category Browse Page sudah di arahkan ke file browse_2 dan Category Flypage ke file flypage_color.tpl

Setelah dua langkah diatas dijalankan, maka sekarang saatnya untuk modifikasi file browse_2.php agar tampilannya sesuai dengan keinginan dan tentunya sesuai dengan selera saya. File browse_2.php berlokasi di ./components/com_virtuemart/themes/vm_blue/templates/browse/

Berikut isi asli file browse_2.php

<div style=”width:100%;padding: 0px 3px 3px 3px;”>
<h2>
<a style=”font-size:16px; font-weight:bold;” href=”<?php echo $product_flypage ?>”><?php echo $product_name ?></a>
</h2>
<div style=”float:left;width:32%” >
<a href=”<?php echo $product_flypage ?>”>
<?php echo ps_product::image_tag( $product_thumb_image, ‘class=”browseProductImage” border=”0″ title=”‘.$product_name.’” alt=”‘.$product_name .’”‘ ) ?>
</a>
</div>
<div style=”float:left;width:60%”><?php echo $product_s_desc ?><br />
<a href=”<?php echo $product_flypage ?>”>[<?php echo $product_details ?>...]</a>
</div>
<br style=”clear:both;” />
<p><?php echo $product_price ?></p>
<div style=”float:left;width:60%”>
<?php echo $product_rating ?>
</div>
<div style=”float:left;width:32%”><?php echo $form_addtocart ?>
</div>
<br style=”clear:both;” />
</div>

Untuk mendapat kan hasil yang saya inginkan, maka file tersebut saya modifikasi dengan menambah beberapa baris scritp html. Disini saya menggunakan table html, karena saya masih buta dengan CSS untuk pembuatan table.

<table border=”1″ cellspacing=”1″ width=”192″ align=”left” style=”border: 1px solid #a0a9f7;” >

<tr>
<th colspan=”0″ text-align: “center”; height=”75″>

<h2>
<a style=”font-size:12px;float:center; font-weight:bold;” href=”<?php echo $product_flypage ?>”><?php echo $product_name ?></a>
</h2>

</th>
</tr>

<tr>
<th colspan=”0″ height=”200″>

<div style=”float:center” >
<a href=”<?php echo $product_flypage ?>”>
<?php echo ps_product::image_tag( $product_thumb_image, ‘class=”browseProductImage” border=”2″ title=”‘.$product_name.’” alt=”‘.$product_name .’”‘ ) ?>
</a>
</div>
<br style=”clear:both;” />

</th>
</tr>

<tr>
<th colspan=”0″>

<div style=”float:center;”>

<p>Harga: <?php echo $product_price ?></p>
<?php echo $form_addtocart ?>
</div>

</th>
</tr>
</table>
<br style=”clear:both;” />

Setelah modifikasi file diatas, maka saya mendapatkan hasil sesuai keinginan saya, seperti tampilan di bawah ini

Untuk hasil live nya bisa dilihat di sini , Oke tulisan kali ini samapi disini dulu.