Mục đích: Làm được như ảnh demo.
Áp dụng cho: NukeViet 4.0.29
Module: Shops.
Các file can thiệp :
+ CSS: shops.css
+ PHP: theme.php
+ TPL: detail.tpl
+ Bổ sung file: dep-lao.jpg
Các chế độ sẽ hiển thị: Detail - Xem chi tiết sản phẩm.
Quy tắc vàng: Luôn luôn sao lưu !
Cách làm:
+ theme.php:
Tìm (khoảng dòng 1280-1285):
if (!empty($data_content['homeimgfile']) and file_exists(NV_ROOTDIR . $data_content['homeimgfile'])) { $xtpl->assign('SRC_PRO_LAGE_INFO', nv_is_image(NV_ROOTDIR . $data_content['homeimgfile'])); } $xtpl->assign('TITLE', $data_content[NV_LANG_DATA . '_title']);
Thêm bên dưới nó:
$rating_width = $data_content['rating_value']/5 * 100; $xtpl->assign( 'RATING_TOTAL', $data_content['rating_total'] ); $xtpl->assign( 'RATING_WIDTH', $rating_width );
+ detail.tpl:
Tìm (khoảng dòng 68-70):
<li> <h2>{TITLE}</h2> </li>
Thêm dưới nó:
<li> <span class="rating-box"> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <span style="width:{RATING_WIDTH}%;"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </span> </span> ({RATING_TOTAL} <em>{LANG.rate}</em>) </li>
+ shops.css:
Tìm dòng cuối cùng và thêm dưới nó:
.rating-box { color: #f0c808; line-height: 1; position: relative; white-space: nowrap; display: inline-block; } .rating-box span { display: block; position: absolute; top: 0; left: 0; bottom: 0; z-index: 1; overflow: hidden; line-height: 1; }
Sau đó dọn dẹp hệ thống và kiểm tra thành quả.
Các bạn có thể download các file được nhắc đến trong bài để tham khảo ở đính kèm.