Tạo phân trang bằng js cho element trong UX Builder theme Flatsome

Xin chào các bạn, trong bài viết hôm nay mình sẽ chia sẻ tới các bạn cách để tạo phân trang bằng js cho element trong UX Builder theme Flatsome. OK chúng ta bắt đầu thôi .

Lý do phân trang cho element để làm gì ?

Chẳng là mình vừa clone xong 1 web cho khách hàng, trong đó mình check thấy page của họ sử dụng UX Builder để kéo thả nhưng vẫn có thể phân trang được cho các element đó. Sau khoảng thời gian tìm hiểu trong khả năng của mình, Mình cũng đã tìm được cách để tạo ra phân trang.

Tuy không thể giống được trang kia 100% nhưng nó vẫn hoạt động khá tốt và gần giống được với demo :))).  Và quan trọng hơn hết khách hàng đã ok về tính năng đó 😀 .

Mình đã tạo phân trang như thế nào ?

Bước 1: Xây dựng layout bằng kéo thả các element

Đối với bước này, mình sẽ không hướng dẫn sâu cách kéo thả như thế nào nữa vì nó quá đơn giản. Mình sẽ nói sơ qua về quá trình thôi.

Đầu tiên mình sẽ tạo 1 section để bao bọc các row , section này mình sẽ để class là top-du-an . Tại sao mình lại thêm class cho section này, là bởi mình muốn khi click vào trang thứ 2 thì sẽ có hiệu ứng scroll lên đầu section.

Tiếp đến trong row mình tạo ra các column chứa nội dung chính cần hiển thị . Ở các column này mình sẽ đặt class chung là item. Mục đích để tí nữa mình viết js đếm các item này để phân trang.

Bước 2: Viết code trong functions.php

function html_phan_trang() { 
if(is_page(992)){
?>
<nav class="pagination-container">
<button class="pagination-button" id="prev-button" aria-label="Previous page" title="Previous page">
&lt;
</button>

<div id="pagination-numbers">

</div>

<button class="pagination-button" id="next-button" aria-label="Next page" title="Next page">
&gt;
</button>
</nav>
<script type="text/javascript">
const paginationNumbers = document.getElementById("pagination-numbers");
const paginatedList = document.getElementsByClassName("list");
const listItems = document.querySelectorAll(".item");
const nextButton = document.getElementById("next-button");
const prevButton = document.getElementById("prev-button");

const paginationLimit = 3;
const pageCount = Math.ceil(listItems.length / paginationLimit);
let currentPage = 1;

const disableButton = (button) => {
button.classList.add("disabled");
button.setAttribute("disabled", true);
};

const enableButton = (button) => {
button.classList.remove("disabled");
button.removeAttribute("disabled");
};

const handlePageButtonsStatus = () => {
if (currentPage === 1) {
disableButton(prevButton);
} else {
enableButton(prevButton);
}

if (pageCount === currentPage) {
disableButton(nextButton);
} else {
enableButton(nextButton);
}
};

const handleActivePageNumber = () => {
document.querySelectorAll(".pagination-number").forEach((button) => {
button.classList.remove("active");
const pageIndex = Number(button.getAttribute("page-index"));
if (pageIndex == currentPage) {
button.classList.add("active");
}
});
};

const appendPageNumber = (index) => {
const pageNumber = document.createElement("button");
pageNumber.className = "pagination-number";
pageNumber.innerHTML = index;
pageNumber.setAttribute("page-index", index);
pageNumber.setAttribute("aria-label", "Page " + index);

paginationNumbers.appendChild(pageNumber);
};

const getPaginationNumbers = () => {
for (let i = 1; i <= pageCount; i++) {
appendPageNumber(i);
}
};

const setCurrentPage = (pageNum) => {
currentPage = pageNum;

handleActivePageNumber();
handlePageButtonsStatus();

const prevRange = (pageNum - 1) * paginationLimit;
const currRange = pageNum * paginationLimit;

listItems.forEach((item, index) => {
item.classList.add("hidden");
if (index >= prevRange && index < currRange) {
item.classList.remove("hidden");
}
});

// Scroll to the top of the section "top-du-an" on page change
const sectionTopDuAn = document.querySelector('.top-du-an');
if (sectionTopDuAn) {
sectionTopDuAn.scrollIntoView({ behavior: 'smooth' });
}
};

window.addEventListener("load", () => {
getPaginationNumbers();
setCurrentPage(1);

prevButton.addEventListener("click", () => {
setCurrentPage(currentPage - 1);
});

nextButton.addEventListener("click", () => {
setCurrentPage(currentPage + 1);
});

document.querySelectorAll(".pagination-number").forEach((button) => {
const pageIndex = Number(button.getAttribute("page-index"));

if (pageIndex) {
button.addEventListener("click", () => {
setCurrentPage(pageIndex);
});
}
});
});

</script> 
<?php } }
add_action('flatsome_after_page','html_phan_trang');

Mình sẽ giải thích 1 chút về code.

Đoạn  if(is_page(992)) mình sẽ chỉ muốn phân trang trên page có id là 992 này mà thôi, nên mình sẽ set điều kiện cho nó kiểm tra nếu đúng page đó thì code mới được thực thi.

Còn cơ bản mình sẽ tạo ra các div chứa phân trang và button next và trở về. Đoạn js mình sẽ tạo các biến lấy class top-du-an và class item để làm việc.

Các bạn để ý dòng này: const paginationLimit = 3; Đoạn này sẽ giới hạn các item được hiển thị cho 1 page, ở đây mình đang để là 3, các bạn có thể đổi lại theo ý của mình.

Tiếp đến mình sẽ css thêm cho nó đẹp hơn một chút.

.pagination-container {
width: calc(100% - 2rem);
display: flex;
align-items: center;
position: relative;
bottom: 0;
padding: 1rem 0;
justify-content: center;
}

.pagination-number, .pagination-button {
font-size: 1em;
background-color: transparent;
border: 2px solid;
margin: 0.25rem 0.25rem;
cursor: pointer;
width: 40px;
border-radius: 50%;
text-align: center;
padding: 0px 5px;
line-height: normal;
}
.pagination-number:hover,
.pagination-button:not(.disabled):hover {
background: #fff;
}

.pagination-number.active {
border: 2px solid var(--primary-color);
color: #fff;
background: var(--primary-color);
}

Lời kết

Như vậy mình đã hướng dẫn các bạn cách để tạo phân trang bằng js cho element trong UX Builder theme Flatsome. Các bạn có thể tạo với bất kì element nào nhé. Chúc các bạn thành công

Nếu trong quá trình làm có thắc mắc, các bạn có thể liên hệ với mình tại đây