Thêm nút xem thêm và thu gọn dành cho chi tiết sản phẩm
admin
2022-05-02T12:08:45-04:00
2022-05-02T12:08:45-04:00
http://dacloi.net/thu-thuat-chia-se-hay/them-nut-xem-them-va-thu-gon-danh-cho-chi-tiet-san-pham-74.html
http://dacloi.net/uploads/news/2022_04/css.png
Sourcode teamplate free | Nukeviet HCMC | PSD file teamplate | Figma teamplate | Nukeviet
http://dacloi.net/uploads/vncode.png
Hướng dẫn thêm nút xem thêm và thu gọn cho danh mục, chi tiết sản phẩm shops, với đoạn code này bạn có thể rút gọn nội dung cho sản phẩm, danh mục, bài viết hoặc thậm chí tất cả đoạn nào muốn làm ngắn lại trong module shops nukeviet.
Dưới đây là đoạn code thu gọn nội dung mô tả sản phẩm trong module shops
Với đoạn code này bạn có thẻ thu gọn nội dung phần mô tả của danh mục sản phẩm trong module Shops một cách dễ dàng, khi thêm code sẽ xuất hiện nút xem thêm và thu gọn sản phẩm, bạn hoặc khách hàng có thể click để xem nhiều nội dung sản phẩm hơn rất tiện.Tìm tới file modules\shops\theme.php dòng 389 thay đổi thành
$tabs_content = '<div class="des">'
.$data_content[NV_LANG_DATA . '_bodytext'].
'<div class="opacity_readmore"></div></div>
<div class="show-more">
<a class="btn btn-default btn--view-more btn--view-more-1">
<span class="more-text">Xem đầy đủ</span>
<span class="less-text">Thu gọn</span>
</a>
</div>';
Thêm css ở file shop.css
.des{
height: 113px;
overflow: hidden;
transition: height 0.2s;
position: relative;
}
.product-well .show-more {
position: relative;
}
.product-well .product-well .show-more:before {
display: block;
content: "";
height: 120px;
position: absolute;
top: -120px;
width: 100%;
left: 0;
background: rgba(255, 255, 255, 0.6);
background: linear-gradient(
180deg
, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.33) 33%, rgba(255, 255, 255, 0.8) 83%, #fff);
}
.product-well .show-more .btn--view-more {
position: absolute;
top: 100%;
left: 50%;
width: 120px;
margin-left: -60px;
margin-top: 0px;
text-align: center;
background-color: transparent;
color: #008744;
font-weight: 400;
height: 30px;
border-radius: 3px;
line-height: 18px;
font-size: 14px;
border: 1px solid #008744;
}
.product-well .show-more .btn--view-more span {
color: #008744 !important;
text-transform: none !important;
font-size: 14px !important;
font-weight: 400 !important;
}
.product-well.expanded .des {
height: auto;
-webkit-transition: height 0.2s;
-moz-transition: height 0.2s;
transition: height 0.2s
}
.product-well.expanded .less-text {
display: block
}
.product-well.expanded .more-text {
display: none
}
.product-well.expanded .show-more::before {
display: none
}
.product-well .less-text {
display: none;
}
.opacity_readmore {
position: absolute;
bottom: 1px;
left: 0px;
width: 100%;
height: 120px;
z-index: 2;
background-image: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
}
Thêm đoạn jquery ở cuối file detail.tpl của themes\default\modules\shops
$(document).ready(function(e){
$('.btn--view-more-1').on('click', function(e){
e.preventDefault();
var $this = $(this);
$this.parents('#tab-1').find('.product-well').toggleClass('expanded');
$(this).toggleClass('active');
$('.opacity_readmore').toggleClass('hidden');
return false;
});
});
Mong bài viết giúp ích được các bạn phần nào trong thiết kế Website. Hãy nhấn nút like và share để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm VNCODE.
Tác giả: admin
Ý kiến bạn đọc
Bạn cần đăng nhập với tư cách là Thành viên chính thức để có thể bình luận
Những tin mới hơn
-
Hướng dẫn thêm nút sao chép code với hightlight js nukeviet
(17/04/2022) -
19 trang website chia sẽ html 5 miễn phí
(24/04/2022) -
Hướng dẫn fix lỗi không có og:image module download
(24/04/2022) -
Hướng dẫn sử dụng module background video nukeviet
(06/05/2022) -
Hướng dẫn tải icon Flaticon không cần tài khoản Premium
(29/05/2022) -
Gird css là gì ? Chia sẻ kiến thức cơ bản về Gird css
(14/06/2022) -
Xây hệ thống gửi Email qua Google Sheet dễ dàng
(20/06/2022) -
Sử dụng thư viện validation javacript form
(27/06/2022) -
Hướng dẫn chỉnh sửa giá woocommerce bất động sản wordpress
(07/07/2022)
Những tin cũ hơn
-
Hướng dẫn thay đổi chữ "Trang nhất" thành trang chủ trên Nukeviet
(10/04/2022) -
Hướng dẫn xử lý ký tự đặc biệt khi xuất excel
(21/03/2022) -
Fix lỗi Undefined index: captcha_area_comm nukeviet 4.0
(17/03/2022) -
Hướng dẫn làm menu đa cấp mobile nukeviet
(15/03/2022) -
Hiển thị xem trước meta google
(14/03/2022) -
Hướng dẫn tạo hiệu ứng tuyết rơi canvas html5
(26/11/2021) -
Incorrect temprorary directory specified fix lỗi trên Nukeviet
(25/11/2021)
Hỏi đáp với tôi
close- smart_toy Hi there 👋 How can I help you today?
send