Thêm nút xem thêm và thu gọn dành cho chi tiết sản phẩm

Thứ tư - 13/04/2022 04:26
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

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây