Cách đơn giản nhất tạo Tooltip cho sản phẩm Virtuemart trong Joomla (dùng mootool)

Trong quá trình triển khai các dự án Web cho khách hàng, chúng tôi nhận thấy có nhiều yêu cầu liên quan đến tạo Tooltip cho các sản phẩm trong VirtueMart. Khi các bạn webmaster tìm kiếm thông tin trên Google về phương pháp thực hiện, các bạn sẽ tìm thấy nhiều plugins về Tooltip cho Joomla, nhưng hiếm plugin cho Virtuemart và đa số chúng đều rắc rối, nhiều mã, nặng nề và khó sử dụng.

Hôm nay, WebsitePlaza trình bày một phương pháp đơn giản nhất cho các bạn Webmaster sử dụng khi muốn nhúng Tooltip cho các thiết kế web của mình. Chỉ cần chưa đến 10 dòng lệnh và một số điều chỉnh, bạn sẽ thành công!

Tạo Tooltip cho VirtueMart

Bước 1: 90% công việc bạn thực hiện là vài dòng lệnh thêm vào file "/components/com_virtuemart/themes/default/templates/common/productsnapshot.tpl.php", cụ thể:

Tìm đến thẻ a như dưới đây (khoảng dòng 30):

 <a title=" href="/"><?php echo $product_name; ?></a>

Thay thế thẻ A để thêm vào thuột tính class và title, tiếp theo là chèn đoạn JS ngay sau thẻ đóng </a>, như dưới đây:

 <a class="Tips" title="::<?php echo strip_tags(str_replace("\"","'",$product_desc),'<br><b><i><br /><br/><p><span>'); ?>" href="/"></a> <script type="text/javascript">var ATips = new Tips($$('.Tips<?php echo $product_id; ?>'), {
className: 'vnbttcustom',
showDelay: 300, //default is 100
hideDelay: 100, //default is 100
width: '500px',
});
</script>

Bước 2: Mặc định, VirtueMart không lấy product_desc (mô tả sản phẩm) khi xem ở chế độ list, bạn cần điều chỉnh 1 chút xíu tại file: /administrator/components/com_virtuemart/classes/ps_product.php

Bước 2.a: Bạn mở file ra, tìm đến dòng 2482, có đoạn:

$tpl->set( 'product_id', $product_id); $tpl->set( 'product_name', $db->f("product_name") );

bạn chèn ngay sau đó 1 dòng lệnh duy nhất:

$tpl->set( 'product_desc', $db->f("product_desc") );

Bước 2.b (Bổ sung): VirtueMart ngoài trang chủ, còn có phần liệt kê sản phẩm của danh mục; chúng ta cũng cần phải chỉnh sửa một số File dưới đây:

File "/administrator/components/com_virtuemart/html/shop_browse_queries.php", tại dòng 37, thêm , `product_desc` vào sau , `product_s_desc`

File "/administrator/components/com_virtuemart/html/shop.browse.php" tìm đến

$product_s_desc = $db_browse->f("product_s_desc");
if( empty($product_s_desc) && $product_parent_id!=0 ) {
$product_s_desc = $dbp->f("product_s_desc"); // Use product_s_desc from Parent Product
}

Thêm vào ngay sau đó:

$product_desc = $db_browse->f("product_desc");
if( empty($product_desc) && $product_parent_id!=0 ) {
$product_desc = $dbp->f("product_desc"); // Use product_desc from Parent Product
}

VÀ, tìm đến

$products[$i]['product_s_desc'] = $product_s_desc;

thêm vào ngay sau đó

$products[$i]['product_desc'] = $product_desc;

Cuối cùng: bạn vào thư mục "/components/com_virtuemart/themes/default/templates/browse", tìm file browse_xxxx.php mà bạn dùng, sau đó ADD thông tin tương tự bước 2.a trên đây.

(Đến đây là OK rồi, refresh trang là bạn sẽ có kết quả)

Bước 3: bước này tùy chọn, bạn thêm CSS để Tooltip của bạn được đẹp:

Bạn tạo trong file css của template 3 class có tên như sau và tùy chỉnh tùy thích nhé: 

/* VINABITS/WebsitePlaza: Tooltip */
.vnbttcustom-tip {
color: #000;
width: 130px;
z-index: 13000;
} .vnbttcustom-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #3E4F14;
padding: 8px 8px 4px;
background: #C3DF7D;
border-bottom: 1px solid #B5CF74;
} .vnbttcustom-text {
font-size: 11px;
padding: 4px 8px 8px;
background: #CFDFA7;
}

Đến đây nếu bạn để ý, bạn có thể thực hiện được Tooltip theo nhiều biến, chứ không chỉ là product_desc! 

Tạo Tooltip cho các Component khác của Joomla

Như các bạn đã thấy, chỉ cần tìm đúng file Template tương ứng của mỗi component và thực hiện các bước tương tự...

Ghi chú

Thực hiện tốt trên J1.5, áp dụng để làm tương tự trên J2.5 và J3.0 các bạn nhé.

Nếu bạn thấy bài viết hữu ích, hãy LIKE để ủng hộ chúng tôi tiếp tục chia sẻ nhé!...