Hướng dẫn tạo tooltip cho virtuemart và joomla [full]

VirtueMart là một component được cài thêm vào Joomla thuộc tầng hệ thống thứ 3 Extention Tier. Chức năng chủ yếu của VirtueMart là một công cụ bao gồm tất cả các chức năng cần thiết của một website thương mại điện tử. Nếu bạn đã từng nghiên cứu Virtuemart để làm 1 webshop thì thủ mình sắp giới thiệu sau đây thực sự rất hữu ích. Mình muốn nhắc đến cách tạo tooltip cho sản phẩm của virtuemart. Bài viết này trên mạng chia sẻ khá nhiều, nhưng nhiều bài viết chưa đầy đủ, hoặc không cụ thể dẫn đến nhiều bạn gặp khó khăn và chung quy là không thành công. Ở đây mình sẽ tổng hợp và bổ sung đầy đủ nhất về cách tạo tooltip.
Trước tiên các bạn cần phải biết “tooltip là gì ?” – Dưới đây là 1 cách định nghĩa theo cách hiểu của mình ( có thể chưa đầy đủ )
Tooltip có thể được hiểu như sau : Tooltip là một ghi chú , lời thông báo hoặc hướng dẫn chức năng của một button, công cụ. Nó sẽ xuất hiện khi bạn di chuyển chuột vào nút,hình hoặc 1 công cụ.
Ví dụ về tooltip : Bạn thử vào 1 số trang web, khi bạn di chuột vào sản phẩm, ảnh sản phẩm phóng to lên, hoặc khi bạn di chuột vào sản phẩm mà hiện ra thông số mô tả ngắn của sản phẩm hoặc hiện ra thông tin khuyến mãi…
I. NGUYÊN TẮC ĐỂ SỬ DỤNG TOOLTIP:
Nguyên tắc chung khi muốn thêm tooltip vào bất kỳ đâu các bạn cần import 2 file .js và .css của tooltip vào. Các file tooltip các bạn có thể search trên mạng rất nhiều. Ở đây mình chỉ chia sẻ một số file tooltip demo thôi và tập trung vào hiển thị thông tin mô tả ngắn hoặc ảnh lớn với component virtuemart của Joomla.
- File Tooltip thứ 1 [ DHTML Tooltip ]: dhtmltooltip.css và dhtmltooltip.js
- File Tooltip thứ 2 rất nhiều chức năng hay kèm hướng dẫn [ WZ-Tooltip ]: wz_tooltip_5.31.zip và hướng dẫn sử dụng tại đây. (Tiếng Anh)
Bạn muốn chèn tooltip vào trang nào thì chèn thêm 2 đoạn mã sau ngay dưới thẻ của trang đó.

Code:

<link rel="stylesheet" href="link-đến-file-css-của-tooltip" type="text/css">
<script type="text/javascript" src="link-đến-file-js-của-tooltip"></script>


\Sau đó muốn thể hiện tooltip thì các bạn gọi 2 function:
Với file tooltip 1:
onmouseover="showttip(Nội dung hiển thị)" ,onmouseout="hidettip()"
Với file tooltip 2:
onmouseover="Tip(Nội dung hiển thị)" ,onmouseout="Untip()"
Ví dụ ( demo với file tooltip 1 nhé ):

Code:


<a href="http://www.dovanphuong.com" onmouseover="Tip('Hướng-dẫn-tạo-tooltip-cho-virtuemart')" onmouseout="UnTip()">Hướng-dẫn-tạo-tooltip</a>

Tóm lại: Với nguyên tắc như trên, bạn có thể tùy biến với các mã nguồn khác chứ không riêng gì Joomla.
II. TẠO TOOLTIP CHO VIRTUEMART :
Chỉnh sửa file quy định hiển thị sản phẩm trong VirtueMart theo đường dẫn:
/components/com_virtuemart/themes/default/templates/browse/*.php
Lưu ý: - Nếu bạn sử dụng file browse khác mà không phải browse_1, thì hãy sửa trong file đó. - Add thêm tooltip vào sản phẩm sẽ gây khó chịu cho khách hàng và khiến trang load chậm hơn. - Phần *.php là file php bạn đang dùng để hiển thị trong category của virtuemart.

Trong nội dung file này, bạn chú ý các hàm sau:

Code:

<?php echo $product_price ?> - Chèn giá
 <?php echo $product_name ?> - Chèn tên sản phẩm
 <?php echo $product_sku ?> - Chèn mã SP
 <?php echo $product_rating ?> - Chèn đánh giá
 <?php echo $product_s_desc ?> - Chèn mô tả ngắn</em>


1. Hướng dẫn tạo tooltip cho virtuemart ( sử dụng wz_tooltip )
Bước 1 : Bạn mở file quy định sản phẩm và nhìn đoạn này:

Code:

<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );
 mm_showMyFileName(__FILE__);
 ?>

Bước 2 : Giữ lại đoạn code trên, còn lại xóa hết phần code dưới, sau đó bạn copy toàn bộ code dưới đây thay thế cho phần code vừa xóa:

Code:


<div style="height:200px" align="center" onmouseover="Tip('<?php echo $product_s_desc ?>', TITLE, '<?php echo $product_name ?>')" onmouseout="UnTip()">
 <div>
 <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:90%" >
 <a href="<?php echo $product_flypage ?>" title="<?php echo $product_name ?>">
 <?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?>
 </a>
 </div>
 <p ><?php echo $product_price ?></p>
 
<div style="float:left;width:90%;margin-top: 3px;"><?php echo $form_addtocart ?>
 </div>
 <br style="clear:both;" />
 </div>


Bước 3 : Bạn vào phần quản trị administrator, sau đó vào cấu hình virtuemart. Trong phần tạo mới Category Tree sản phẩm chọn chế độ hiển thị
- Show x products per row ( số sản phẩm trên 1 hàng ): 3.
- Category Browse Page: chọn file browse mà bạn vừa sửa.
Trong phần mô tả ngắn của sản phẩm thông tin cần phải được viết liền mạch không xuống dòng . Muốn xuống dòng bạn dùng
để xuống dòng .
* Lưu ý: Đây chỉ là 1 ví dụ đơn giản giúp bạn tạo được tooltip và từ đó phát triển theo ý bạn.
2. Hướng dẫn tạo tooltip image và mô tả ngắn cho các module virtuemart ( nguồn JoomlaViet.Org ):
Trong file joomla\administrator\components\com_virtuemart\classes\ps_product.php tìm đến dòng:

Code:

<pre>function product_snapshot( $product_sku, $show_price=true, $show_addtocart=true, $show_product_name = true ) {
 
global $sess, $mm_action_url;
 
$db = new ps_DB;
 
require_once(CLASSPATH.'ps_product_category.php');
$ps_product_category = new ps_product_category;
 
$q = "SELECT product_id, product_name, product_parent_id, product_thumb_image FROM #__{vm}_product WHERE product_sku='$product_sku'";
$db->query( $q );
 
if ($db->next_record()) {
$product_id = $db->f("product_id" );
$tpl = new $GLOBALS['VM_THEMECLASS']();
 
$cid = $ps_product_category->get_cid( $product_id );
 
$tpl->set( 'product_id', $product_id);
$tpl->set( 'product_name', $db->f("product_name") );
$tpl->set( 'show_product_name', $show_product_name );
{


và thay bằng đoạn sau:

Code:

function product_snapshot( $product_sku, $show_price=true, $show_addtocart=true, $show_product_name = true ) {
 
global $sess, $mm_action_url;
 
$db = new ps_DB;
 
require_once(CLASSPATH.'ps_product_category.php');
$ps_product_category = new ps_product_category;
 
$q = "SELECT product_id, product_name, product_s_desc, product_parent_id, product_thumb_image FROM #__{vm}_product WHERE product_sku='$product_sku'";
$db->query( $q );
 
if ($db->next_record()) {
$product_id = $db->f("product_id" );
$tpl = new $GLOBALS['VM_THEMECLASS']();
 
$cid = $ps_product_category->get_cid( $product_id );
 
$tpl->set( 'product_id', $product_id);
$tpl->set( 'product_name', $db->f("product_name") );
$tpl->set( 'product_s_desc', $db->f("product_s_desc") );
$tpl->set( 'show_product_name', $show_product_name );



Sau đó tìm đến:

} // ENd of CLASS ps_product
và thêm trước dòng trên bằng
//begin-Hàm lấy hình đầy đủ của sản phẩm -

Code:

function product_full_image($product_id) {
global $mosConfig_live_site, $mosConfig_absolute_path;
require_once( CLASSPATH . 'imageTools.class.php');
$db = new ps_DB;
$path_appendix='product';
$q = "SELECT product_sku, product_name, product_full_image FROM #__{vm}_product WHERE product_id='$product_id'";
$db->query( $q );
if ($db->next_record()) {
$image=$db->f("product_full_image");
}
if ($image != "") {
if( substr( $image, 0, 4) == "http" ) {
$url = $image;
}
else {
$url = IMAGEURL.$path_appendix.'/'.$image;
if( file_exists($image)) {
$url = str_replace( $mosConfig_absolute_path, $mosConfig_live_site, $image );
} elseif( file_exists($mosConfig_absolute_path.'/'.$image)) {
$url = $mosConfig_live_site.'/'.$image;
}
$url = str_replace( basename( $url ), $GLOBALS['VM_LANG']->convert(basename($url)), $url );
}
}
else {
$url = VM_THEMEURL.'images/'.NO_IMAGE;
}
return $url;
}
////end-chuvantai@gmail.com
} // ENd of CLASS ps_product



Sau đó sửa file:
joomla\components\com_virtuemart\themes\default\templates\common\productsnapshot.tpl.php
Thay thế dòn

Code:

g:

<!--?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?-->

Bang doan

Code:

<!--?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?-->
<!--?php JHTML::_('behavior.tooltip');?-->



Tìm đến dòng

Và thay thế bằng đoạn.:
' .'
'. $product_s_desc);?>" href="/">
3. Ngoài ra cũng có 1 bài viết của diễn đàn JoomlaViet.Info hướng dẫn tạo tooltip. Bạn có thể tham khảo tại đây. Tuy nhiên mình đã test thử nhưng chưa làm được.
III. KẾT LUẬN:
1. Bài viết này chỉ hướng dẫn các bạn tạo thành công tooltip, còn việc tùy biến sao cho đẹp, hợp lý là do các bạn.
2. Với nguyên lý chung khi chèn tooltip, các bạn có thể áp dụng nó cho các component khác và các trang khác chứ không chỉ riêng Joomla.
3. Nếu sử dụng WZ_TOOLTIP , bạn vui lòng đọc kỹ hướng dẫn.
4. Chúc bạn thành công



DOWNLOAD FILE
[You must be registered and logged in to see this link.]

CÁC BẠN CÓ THỂ THAM KHẢO TẠI ĐÂY
[You must be registered and logged in to see this link.]