https://www.mojocarwash.com/wp-content/themes/mojotheme/js/load-more.js

1document.addEventListener('DOMContentLoaded', function() {
2    const loadMoreBtn = document.getElementById('load-more');
3
4    if (loadMoreBtn) {
5
6        const loader = document.getElementById('loader');
7
8        // Get the post ID from the data-post-id attribute
9        const postId = loadMoreBtn.getAttribute('data-post-id');
10
11        loadMoreBtn.addEventListener('click', function() {
12		
13            // Show the loader
14            loader.classList.remove('hidden');
15    
16            const data = {
17                action: 'loadMoreAcquisitions',  // Updated action name
18                offset: offset,  // The offset value (initially set to 4)
19                post_id: postId, // Pass the post ID
20            };
21    
22            fetch(ajaxUrl, {
23                method: 'POST',
24                credentials: 'same-origin',
25                headers: {
26                    'Content-Type': 'application/x-www-form-urlencoded',
27                },
28                body: new URLSearchParams(data)
29            })
30            .then(response => response.json())
31            .then(response => {
32                
33                // Hide the loader
34                loader.classList.add('hidden');
35    
36                if (response.success && response.data.data.length > 0) {
37                    const container = document.getElementById('acquisitions-container');
38    
39                    // Iterate over the items in response.data.data, not just response.data
40                    response.data.data.forEach(item => {
41                        container.innerHTML += `
42                            <div class="acquisition-item p-4 rounded-lg hover:shadow-lg transition-shadow">
43                                <a href="${item.brand_url}" target="_blank" class="block text-center">
44                                    <div class="acquisition-logo mb-4">
45                                        <img src="${item.brand_logo}" alt="${item.brand_title}" class="mx-auto">
46                                    </div>
47                                    <div class="acquisition-info">
48                                        <h2 class="acquisition-title text-xl font-bold mb-2 mt-4">${item.brand_title}</h2>
49                                    </div>
50                                </a>
51                            </div>
52                        `;
53                    });
54    
55                    // Increase the offset for the next batch
56                    offset += 4;
57    
58                    // If no more items, hide the load more button
59                    if (!response.data.hasMore) {
60                        loadMoreBtn.style.display = 'none';
61                    }
62                } else {
63                    
64                    // Hide the loader if there's an error
65                    loader.classList.add('hidden');
66                    
67                    console.error('No more acquisitions or failed to load data.');
68                }
69            })
70            .catch(error => console.error('Error:', error));
71        });
72    } 
73});