Flatsome, Plugins

Hướng dẫn thu gọn nội dung sản phẩm và danh mục Flatsome

Posted on by Flatsomelite
huong dan thu gon noi dung san pham va danh muc flatsome 1

Hướng dẫn thu gọn nội dung sản phẩm và danh mục Flatsome

Hiện tại có 2 cách thu gọn nội dung bài viết cho nội dung sản phẩm và danh mục bài viết cho theme Flatsome.

Cách 1: Sử dụng Jquery các này của bạn Lê văn Toản

Cách 2: Không sử dụng Jquery của bạn Gia Tuấn ưu điểm:  sử dụng javascript thuần và đảo ngược cách triển khai code cho tính năng xem thêm sản phẩm và danh mục hoạt động ổn định hơn và tốt hơn.

Các bạn có thể xóa jquery hay trì hoãn jquery, gộp nén javascript cũng không còn sợ bị lỗi nữa. Javascript thuần thì hoạt động nhanh hơn gấp 4 lần so với sử dụng jquery, vì vậy bài viết này chia sẻ hướng dẫn cách thu gọn chi tiết sản phẩm plugin woocommerce và giữ bố cục CLS tốt hơn.

huong dan thu gon noi dung san pham va danh muc flatsome 2

Hãy đưa đoạn code này vào file functions.php website của bạn:

Hướng dẫn thu gọn nội dung sản phẩm Flatsome

/*
* Author: Gia Tuan
*/

function xem_them_wptangtoc_add_button_content($content){
if (is_product()){
$content .= '<div class="wptangtoc_readmore_woo"><span title="Xem thêm">Xem thêm</span></div>';
}
return $content;
}

add_filter( 'the_content', 'xem_them_wptangtoc_add_button_content', 100 );

add_action('wp_footer','wptangtoc_readmore_woocommerce');
function wptangtoc_readmore_woocommerce(){
if (is_product()){
?>

<style>
.single-product div#tab-description {
overflow: hidden;
position: relative;
max-height: 600px;
}

.wptangtoc_readmore_woo {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 9999;
bottom: 0;
width: 100%;
background: #fff;
}

.wptangtoc_readmore_woo:before {
height: 55px;
margin-top: -45px;
content: "";
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff00', endColorstr='#ffffff', GradientType=0);
display: block;
}

.wptangtoc_readmore_woo span {
color: #6c6d70;
display: block;
border: 1px solid;
margin-left: auto;
display: flex;
width: 130px;
margin-right: auto;
text-transform: uppercase;
text-align: center;
justify-content: center;
}
</style>
<script>
let xemThemButtonMore = document.querySelector(".wptangtoc_readmore_woo");
let xemThemNoiDung = document.getElementById("tab-description");
const divInnerContentHeight = document.querySelector('.woocommerce-Tabs-panel--description').scrollHeight;
let your_height = 599;
if (divInnerContentHeight > your_height) {
xemThemButtonMore.addEventListener("click", () => {
xemThemNoiDung.style.maxHeight = "none";
xemThemButtonMore.style.display = "none";
})
} else {
xemThemNoiDung.style.maxHeight = "none";
xemThemButtonMore.style.display = "none";
};
</script>
<?php
}
}

Nếu bạn muốn điều chỉnh chiều cao: thì chỉnh sửa dòng 24 = max-height: 600px; bạn có thể nâng thêm chiều cao bạn muốn và dòng 65 = let your_height = 599; thì bạn giảm xuống 1px so với dòng 24 bạn chỉnh sửa.

huong dan thu gon noi dung san pham va danh muc flatsome 1

Hướng dẫn thu gọn nội dung danh mục Flatsome


/*
* Author: Gia Tuan
*/

function xem_them_wptangtoc_add_button_content_danh_muc($content){
if (is_product_category()){
$content .= '<div class="wptangtoc_readmore_woo"><span title="Xem thêm">Xem thêm</span></div>';
}
return $content;
}

add_filter( 'woocommerce_taxonomy_archive_description_raw', 'xem_them_wptangtoc_add_button_content_danh_muc', 100 );

add_action('wp_footer','wptangtoc_readmore_woocommerce_danh_muc');
function wptangtoc_readmore_woocommerce_danh_muc(){
if (is_product_category()){
?>

<style>
.shop-container > div.term-description {
overflow: hidden;
position: relative;
max-height: 600px;
}

.wptangtoc_readmore_woo {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 9999;
bottom: 0;
width: 100%;
background: #fff;
}

.wptangtoc_readmore_woo:before {
height: 55px;
margin-top: -45px;
content: "";
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff00', endColorstr='#ffffff', GradientType=0);
display: block;
}

.wptangtoc_readmore_woo span {
color: #6c6d70;
display: block;
border: 1px solid;
margin-left: auto;
display: flex;
width: 130px;
margin-right: auto;
text-transform: uppercase;
text-align: center;
justify-content: center;
margin-bottom: 20px;
}
</style>
<script>
let xemThemButtonMore = document.querySelector(".wptangtoc_readmore_woo");
let xemThemNoiDung = document.querySelector(".term-description");
const divInnerContentHeight = document.querySelector('.term-description').scrollHeight;
let your_height = 599;
if (divInnerContentHeight > your_height) {
xemThemButtonMore.addEventListener("click", () => {
xemThemNoiDung.style.maxHeight = "none";
xemThemButtonMore.style.display = "none";
})
} else {
xemThemNoiDung.style.maxHeight = "none";
xemThemButtonMore.style.display = "none";
};
</script>
<?php
}
}

Nếu bạn muốn điều chỉnh chiều cao: thì chỉnh sửa dòng 24 = max-height: 600px; bạn có thể nâng thêm chiều cao bạn muốn và dòng 65 = let your_height = 599; thì bạn giảm xuống 1px so với dòng 24 bạn chỉnh sửa.

Nếu bạn có khả năng css thì bạn có thể css lại theo sở thích của bạn.

Nguồn bài viết: wptangtoc.com

Flatsomelite