Bài viết này chia sẻ với bạn cách ẩn một phần nội dung khi nó quá dài, phần nội dung có thể không quá cần thiết nhưng vẫn cần có. VD như nội dung cho một sản phẩm nào đó, phần nội dung vẫn cần có để SEO cho sản phẩm đó.
Trong Bricks theme bạn có thể tham khảo bài viết này để tự mình thực hiện và rèn luyện thêm kỹ năng sử dụng Bricks theme.
Trong bài chia sẻ này có sử dụng Advanced Themer for Bricks, đây là một Plugin hỗ trợ rất hiệu quả cho Bricks, giúp người dùng thao tác và quản lý thông minh hơn.
Bạn cùng xem nội dung bài chia sẻ.
Để áp dụng cho phần nội dung chi tiết của trang chi tiết sản phẩm, bạn vào phần Bricks -> Templates (Đây là phần quản lý tất cả các mẫu đã tạo trên website) tạo mới một templates, Bạn đặt tên cho mẫu này, nên đặt sao để chính bạn khi xem lại sẽ nhớ nó là gì.
Để tạo một trang chi tiết cho sản phẩm theo cách của riêng bạn, phần Select template type bạn chọn template type là WooCommerce – Single product
Tiếp theo ấn edit with bricks để tiến hành thiết kế. Về cơ bản để làm điều này bạn cần tạo một div lớn để làm khung chứa các nội dung như content và button bên trong, khung chứa bạn sẽ đặt một chiều cao cố định để khống chế nội dung, phần nội dung thừa ra khỏi khung sẽ được ẩn đi, khi bấm vào nút thì chiều cao của khung sẽ thành tự động để phù hợp với nội dung bên trong nó.
Bước 1. Tạo các class.
Trước tiên bạn tạo các class để áp dụng cho các element sẽ tạo, bạn có thể coppy đoạn mã CSS dưới đây, pase vào file style.css trong theme đang dùng.
.noi-dung__khung {
max-height: 250px; /* Giới hạn chiều cao tối đa */
overflow: hidden;
position: relative;
transition: max-height 0.3s ease;
}
.noi-dung__khung--mo-rong {
max-height: none; /* Cho phép mở rộng khi nhấn nút */
}
.noi-dung__noi-dung {
position: relative;
}
.noi-dung__noi-dung::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
pointer-events: none;
}
.nut-doc-them--an {
display: none; /* Ẩn nút khi nội dung được mở rộng */
}
Bước 2. Tạo các element, đặt id và áp dụng class cho các element này
Bạn đã tạo sẵn các class, tiếp theo tạo các element sau đây
- Tạo một thẻ div, thẻ này bạn đặt ID là dv1-khung-noi-dung, thẻ này sẽ chứa thẻ Post Content bên trong nó, tức là div khung để chứa nội dung áp dụng class noi-dung__khung
- Tạo một element Product Post Content, đặt ID là dv2-noi-dung và áp dụng class noi-dung__noi-dung, đây là phần tử nội dung bài post sản phẩm, nó sẽ lấy nội dung chi tiết của sản phẩm để hiển thị
- Tạo một Button để bấm vào thì khung dv1 ban đầu sẽ được mở dụng tùy vào nội dung bên trong nó tức là Post Content, Buton đặt ID là btn1-show-noi-dung, có thể tạo bên ngoài div khung nội dung
- Tạo một element code để code đoạn JavaScript tùy chỉnh khi có tương tác vào nút bấm, bạn pase đoạn Script dưới đây vào phần nội dung của code
<script>
document.addEventListener('DOMContentLoaded', function() {
const contentContainer = document.getElementById('dv1-khung-noi-dung');
const button = document.getElementById('btn1-show-noi-dung');
button.addEventListener('click', function() {
if (contentContainer.classList.contains('noi-dung__khung')) {
contentContainer.classList.remove('noi-dung__khung');
contentContainer.classList.add('noi-dung__khung--mo-rong');
button.classList.add('nut-doc-them--an');
} else {
contentContainer.classList.remove('noi-dung__khung--mo-rong');
contentContainer.classList.add('noi-dung__khung');
button.classList.remove('nut-doc-them--an');
}
});
});
</script>
Tiếp theo đặt tên id và áp dụng các class cho các phần tử đã tạo phía trên bằng Attributes. Cách đặt tên cho ID và áp dụng class cho phần tử trong Bricks bạn có thể áp dụng theo hướng dẫn dưới đây
Đối với thẻ div đặt tên ID là dv1-khung-noi-dung, trong Bricks để đặt id cho một element bạn chọn phần tử cần đặt, vào mục style chọn Attributes tạo mới một attributes phần name điền id phần value bạn điền dv1-khung-noi-dung như vậy bạn đã đặt id cho phần tử này.
Tương tự đối với cách áp dụng class, bạn cũng tạo thêm một Attributes phần name nhập class phần value bạn nhập vào đúng tên với các class đã tạo ở bước 1. Đối với dv1 sẽ áp dụng class noi-dung__khung, Sử dụng noi-dung__khung để đặt chiều cao ban đầu và overflow: hidden nhằm ẩn phần nội dung không cần thiết. Khi nội dung được mở rộng bằng cách nhấn nút, JavaScript sẽ chuyển đổi class thành noi-dung__khung–mo-rong để mở rộng chiều cao.
Bạn có thể áp dụng nhiều class cho một phần tử theo cách này, mỗi class chỉ cần cách nhau một dấu khoảng trắng là được.
Cách dung Attributes trong Bricks
Kết luận
Bài viết chia sẻ cách ẩn đi nội dung chi tiết , khi người đọc cần đọc đầy đủ thì bấm vào nút , sau khi bấm vào nút thì nội dung sẽ hiện đầy đủ và nút bấm sẽ ẩn đi, cách làm này không ảnh hưởng tới SEO của bài viết vì nôi dung vẫn nằm trong code, code không chặn các công cụ, chỉ ẩn đi phần nội dung bị tràn ra ngoài khỏi vùng chứa, sau khi bấm nut sẽ chạy đoạn Script, đoạn này có tác dụng làm khu chứa có chiều cao tự động bằng với nội dung trong nó và ẩn đi nut bấm.
Bài viết cũng chia sẻ cách sử dụng Attributes trong Bricks theme. Chúc các bạn thành công
