Like a Classifieds page

Ask the community
,
4

Yep, we’re working on it. That’s all the info I can give at this time, sorry.

Here’s a workaround which I like to call “fake repeaters” or “fakepeaters” for short. It’s far from ideal but it does the job if you’re not afraid of wading into JavaScript Land.

Here’s an example of what can be done. Check it out live:
https://uvalbwix.wixsite.com/fakepeater4

1212×487 277 KB

And here’s a sample of what the code might look like (some of this is specific to my example, you would need to modify it).

import wixData from "wix-data";
var allApartments = null;
var currentItem = 0;
const numItemsInFakepeater = 3;

$w.onReady(function () {
	getAllApartmentsFromDB();
});

function getAllApartmentsFromDB(){
	//Get all the records from the collection called "Apartments"
	wixData.query("Apartments").find().then(function(res){
		allApartments = res.items;
		//show the first batch of apartments
		showApartments(0);	
	}).catch(function(err){
		//in case of an error
		console.log('Error fetching data: ' + err);
	});
	
}

function showApartments(startIndex){
	//Loop through and draw the next n items
	for(let i = 0; i < numItemsInFakepeater; i++){
		//check if we're at the end of the list
		if(startIndex + i >= allApartments.length){
			//hide the whole apartment container for the corresponding item, since there's nothing to show
			$w('#containerApt' + i).hide();
		}
		else{
			//Otherwise, draw the current one
			
			//Get the current one from the data we fetched
			let currApartmentData = allApartments[startIndex + i];

			//Set the elements in my fakepeater accordingly
			$w('#imageApt' + i).src = currApartmentData.picture;
			$w('#priceApt' + i).text = '$' + currApartmentData.priceUsd;
			$w('#titleApt' + i).text = currApartmentData.title;
			$w('#descApt' + i).text = currApartmentData.description;
			$w('#readMoreApt' + i).link = currApartmentData["link-Apartment-title"];
			$w('#containerApt' + i).show();
		}
	}
	
	//update Next and Prev buttons
	if(startIndex===0){
		$w('#prevButton').disable();
	}
	else{
		$w('#prevButton').enable();	
	}
	if(startIndex+numItemsInFakepeater >= allApartments.length){
		$w('#nextButton').disable();
	}
	else{
		$w('#nextButton').enable();	
	}
}

export function prevButton_click() {
	currentItem -= numItemsInFakepeater;
	showApartments(currentItem);
}

export function nextButton_click() {
	currentItem += numItemsInFakepeater;
	showApartments(currentItem);
}