Ebook: Tuổi ít leads nhiều

THIS E-BOOK
JUST RIGHT FOR YOU

DOWNLOAD

ENJOY YOUR WORK WITH oplacrm

Don’t be an office zombie: Unleash your inner work hero with OPLACRM.
Connect with an expert
Freemium
oplacrm logo

ISO CERTIFICATION

Company
DemoPricingAbout Us
Product
CRM for B2B SalesMarketing AutomationOpla Marketplace
download form appstoredownload form google play

OplaCRM © All Rights Reserved

Term & Conditions
Privacy Policy
// Wait for the DOM to be fully loaded before running the script document.addEventListener('DOMContentLoaded', function() { // --- Configuration: Replace these with your actual class names and attributes --- // The class of the wrapper containing your Collection List const collectionListWrapperSelector = '.Collection-List-Wrapper'; // Updated based on Navigator // The class of the Collection List itself const collectionListSelector = '.Collection-List'; // Updated based on Navigator // The class of each individual Collection Item (blog post element) const collectionItemSelector = '.Collection-Item'; // Updated based on Navigator // Note: Filtering will be applied to the .Collection-Item element // The class used for all your filter buttons ("All", "Opla's News", etc.) const filterButtonSelector = '.Tab-link_v1'; // Updated based on Navigator // The data attribute on each Collection Item that stores its category // e.g., data-category="opla-news" - YOU NEED TO REPLACE 'data-category' const categoryDataAttribute = 'data-category'; // <<<<< REPLACE 'data-category' with your attribute name // The data attribute on each filter button that indicates which category it filters // e.g., data-filter="opla-news" or data-filter="all" - YOU NEED TO REPLACE 'data-filter' const filterDataAttribute = 'data-filter'; // <<<<< REPLACE 'data-filter' with your attribute name // Also, ensure your filter buttons have this attribute with values like "all", "oplas-news", "sale-b2b", etc. // The class added to the currently active filter button - YOU NEED TO CHOOSE/REPLACE THIS const activeFilterClass = 'is-active'; // <<<<< REPLACE 'is-active' with your desired active class // Webflow's default class for the 'Next' pagination button const nextButtonSelector = '.w-pagination-next'; // Webflow's default class for the 'Previous' pagination button const prevButtonSelector = '.w-pagination-previous'; // --- End Configuration --- // Get references to the main elements const collectionListWrapper = document.querySelector(collectionListWrapperSelector); const collectionList = document.querySelector(collectionListSelector); const filterButtons = document.querySelectorAll(filterButtonSelector); const nextButton = document.querySelector(nextButtonSelector); const prevButton = document.querySelector(prevButtonSelector); // Variable to store the currently active filter category let currentFilter = 'all'; // Default to 'all' initially (assuming your "All" button has data-filter="all") // Function to filter the collection items function applyFilter(filter) { currentFilter = filter; // Update the active filter state const collectionItems = collectionList.querySelectorAll(collectionItemSelector); collectionItems.forEach(item => { const itemCategory = item.getAttribute(categoryDataAttribute); if (filter === 'all') { // Show all items if the filter is 'all' item.style.display = ''; // Or whatever display property your items use (e.g., 'block', 'flex', 'grid') } else { // Show item if its category matches the filter, hide otherwise if (itemCategory === filter) { item.style.display = ''; // Show the item } else { item.style.display = 'none'; // Hide the item } } }); // Update active class on filter buttons filterButtons.forEach(button => { if (button.getAttribute(filterDataAttribute) === filter) { button.classList.add(activeFilterClass); } else { button.classList.remove(activeFilterClass); } }); } // Add event listeners to filter buttons filterButtons.forEach(button => { button.addEventListener('click', function() { const filter = this.getAttribute(filterDataAttribute); applyFilter(filter); // When a filter button is clicked, you might want to go back to the first page. // Implementing this with Webflow's native pagination requires more advanced // techniques or potentially simulating a click on the first pagination button // if it exists and is visible. For now, we focus on applying the filter // correctly after pagination loads new items. }); }); // --- Mutation Observer to detect when new items are added by pagination --- // Select the target node for the observer (the Collection List where items are added) const targetNode = collectionList; // Options for the observer (listen for changes in the child list) const config = { childList: true }; // Callback function to execute when mutations are observed const callback = function(mutationsList, observer) { for(const mutation of mutationsList) { if (mutation.type === 'childList') { // Child nodes have been added or removed // Re-apply the current filter to the potentially new list items applyFilter(currentFilter); // console.log('Collection List updated by pagination. Filter reapplied.'); // Optional: for debugging } } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the target node for configured mutations if (targetNode) { observer.observe(targetNode, config); } else { console.error("Mutation Observer target node (Collection List) not found!"); } // --- Initial setup --- // Apply the default filter ('all') when the page loads // Ensure your "All" button has data-filter="all" applyFilter(currentFilter); });