Tạo tooltip hình lớn cho Virtuemart

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

Tạo tooltip hình lớn cho Virtuemart

Bài gửi by Thuykai on 25th October 2010, 8:06 pm

Tạo tooltip hình lớn cho Virtuemart


Như các bạn đã biết, bản thân joomla đã hỗ trợ tooltip kèm theo thư viện mootools. Khác với các bài hướng dẫn trước đây, mình sẽ chia sẻ với các bạn cách tạo tooltips hình ảnh lớn khi rê chuột tới sản phẩm sử dụng tooltips sẵn có của joomla, chạy ở tất cả các trang và hầu hết các module kèm theo virtuemart như Sản phẩm mới, sản phẩm đặc biệt, sản phẩm ngẫu nhiên,...


Công việc đơn giản chỉ là lấy ra đường dẫn hình ảnh lớn và đưa vào code sẵn có của joomla.
Không dài dòng nữa, mình bắt đầu nhé.
Hình ảnh
I. Tooltip đối với trang danh mục sản phẩm (Category browse)

Các bạn sửa file browse mà bạn đang dùng, thường là trong thư mục :
joomla\components\com_virtuemart\themes\default\templates\browse\
ở đây mình sửa file browse_4.php nhé
1. ở sau dòng đầu tiên

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

Bạn chèn thêm dòng này vào:

view source
print?
1.<?php JHTML::_('behavior.tooltip');?>

2. Thay dòng số 12

view source
print?
1.<a href="/" title="">

bằng đoạn:

view source
print?
1.<a class="hasTip"><a class="hasTip" title="<?php echo htmlspecialchars($product_name).'::'.htmlspecialchars(ps_product::image_tag( $product_full_image, 'height="300" title="'.$product_name.'" alt="'.$product_name .'"' ))?>" href="/"></a>

II. Tooltip đối với các module

Cái này hơi phức tạp hơn tý, vì các module dựng sẵn sử dụng hàm product_snapshot() của class ps_product kết hợp với file productsnapshot.tpl để đưa hình ảnh và thông tin sản phẩm vào module. mà bản thân hàm product_snapshot() lại không lấy được hình ảnh lớn mà chỉ lấy hình ảnh thumbnail.
Giải pháp của mình là viết thêm một hàm nữa để lấy đường dẫn hình lớn, sau đó sửa file productsnapshot.tpl để nó đưa hình lớn ra tooltip. Bắt đầu nhé:

1. Sửa file joomla\administrator\components\com_virtuemart\classes\ps_product.php

tìm đến cuối file, bạn chèn trước thẻ đóng ?> và dấu đóng móc nhọn } đoạn code sau:

view source
print?
01.function product_full_image($product_id) {
02. global $mosConfig_live_site, $mosConfig_absolute_path;
03. require_once( CLASSPATH . 'imageTools.class.php');
04. $db = new ps_DB;
05. $path_appendix='product';
06. $q = "SELECT product_sku, product_name, product_full_image FROM #__{vm}_product WHERE product_id='$product_id'";
07. $db->query( $q );
08. if ($db->next_record()) {
09. $image=$db->f("product_full_image");
10. }
11. if ($image != "") {
12. if( substr( $image, 0, 4) == "http" ) {
13. $url = $image;
14. }
15. else {
16. $url = IMAGEURL.$path_appendix.'/'.$image;
17. if( file_exists($image)) {
18. $url = str_replace( $mosConfig_absolute_path, $mosConfig_live_site, $image );
19. } elseif( file_exists($mosConfig_absolute_path.'/'.$image)) {
20. $url = $mosConfig_live_site.'/'.$image;
21. }
22. $url = str_replace( basename( $url ), $GLOBALS['VM_LANG']->convert(basename($url)), $url );
23. }
24. }
25. else {
26. $url = VM_THEMEURL.'images/'.NO_IMAGE;
27. }
28. return $url;
29. }

(hàm này mình viết dựa theo hàm image_tag() )
2. Sửa file
joomla\components\com_virtuemart\themes\default\templates\common\productsnapshot.tpl.php
ở sau dòng đầu tiên

view source
print?
1.

Bạn chèn thêm dòng này vào:

view source
print?
1.

Thay dòng số 7 :
view source
print?
1.<a></a>

bằng dòng sau:

view source
print?
1.<a class="hasTip"></a>

Nếu template đó không hỗ trợ css cho tooltip, các bạn hãy chèn đoạn sau vào cuối file template.css nhé:

view source
print?
01./* Tooltips */
02. .tool-tip {
03. background: #FFFFFF;
04. border: 1px solid #cccccc;
05. float: left;
06. max-width: 200px;
07. padding: 5px;
08. }
09.
10. .tool-title {// Cái này là tiêu đề của tooltip
11. background: url(../../system/images/selector-arrow.png) no-repeat;
12. font-size: 100%;
13. font-weight: bold;
14. margin: 0;
15. margin-top: -15px;
16. padding: 0;
17. padding-bottom: 5px;
18. padding-top: 15px;
19. }
20.
21. .tool-text {
22. font-size: 100%;
23. margin: 0;
24. }

Chúc các bạn thành công

Bài viết của chuvantai - joomlaviet.org

Chi tiết thêm, hãy xem link sau: [You must be registered and logged in to see this link.]

Thuykai
Thành viên mới

Tổng số bài viết : 608
Danh tiếng : 11
Ngày tham gia : 19/12/2009

http://giaovien.forum-viet.net

Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang


 
Permissions in this forum:
Bạn không có quyền trả lời bài viết