Mega search images are not appearing

Ask the community
,
1

Hey @ahmadnasriya , i really need help implementing mega search feauture: https://www.wix.com/corvid/example/mega-search
I have done all the necessary changes, but still the properties are not displayed, this is how it looks while viewing the site: https://www.saifahamedmasood.com/blank-2

Here are my codes:
Mega search page code

import wixData from 'wix-data';
import { debounce } from 'lodash';

const collectionName = 'realEstateProperties';
const debounceTime = 500;

$w.onReady(function () {
    initComps();
    initRepeater();
    buildFiltersAndPopulateRepeater();
});

async function initComps() {
 // populate iLocation dropdown
 const res = await wixData.query(collectionName)
        .ascending('mainLocation')
        .distinct('mainLocation')
        .then((locationData) => {
 return locationData.items.map((location) => {
 return {
                    value: location,
                    label: location
                }
            });
        });
    $w('#iLocation').options = res;

 // change max price according to type selection
    $w('#iType').onChange((event) => {
        $w('#iMaxPrice').max = event.target.value === 'RENT' ? 20000 : 50000000;
    });

 // bind all input elements
 const componentsTypeArray = ['RadioButtonGroup', 'Dropdown', 'Slider', 'CheckboxGroup'];

 const debounceFunction = debounce(buildFiltersAndPopulateRepeater, debounceTime);
    componentsTypeArray.forEach((compType) => {
 const compArray = $w(compType);
        compArray.forEach((comp) => {
            comp.onChange((event) => {
                debounceFunction();
            });
        });
    });
}

async function buildFiltersAndPopulateRepeater() {
 let dataQuery = wixData.query(collectionName);

    dataQuery = dataQuery.eq('type', $w('#iType').value);
 if ($w('#iLocation').value) {
        dataQuery = dataQuery.eq('mainLocation', $w('#iLocation').value);
    }

 // sliders
    dataQuery = dataQuery.ge('squareFeet', $w('#iSize').value);
    dataQuery = dataQuery.ge('bedrooms', $w('#iBedrooms').value);
    dataQuery = dataQuery.ge('bathrooms', $w('#iBathrooms').value);
    dataQuery = dataQuery.ge('levels', $w('#iLevels').value);
    dataQuery = dataQuery.ge('price', $w('#iMinPrice').value);
 if ($w('#iMaxPrice').value > 0) {
        dataQuery = dataQuery.le('price', $w('#iMaxPrice').value);
    }

 // multiple selection
    $w('#iOptions').value.forEach((selectedOption) => {
        dataQuery = dataQuery.eq(selectedOption, true);
    })

    $w('#propertyList').data = await dataQuery.find().then((res) => res.items);
}

function initRepeater() {
    $w('#propertyList').onItemReady(($item, itemData) => {
        $item('#pImage').src = itemData.thumbnailImage;
        $item('#pName').label = itemData.propertyName;
        $item('#pLocation').text = itemData.mainLocation;
        $item('#pPrice').text = '$' + String(itemData.price);
        $item('#pTyp').text = itemData.type;
        $item('#pBedrooms').text = String(itemData.bedrooms);
        $item('#pLevels').text = String(itemData.levels);
        $item('#pBaths').text = String(itemData.bathrooms);
        $item('#pSize').text = String(itemData.squareFeet);
    });
}

This is how my databse looks:

1152×864 126 KB

I’ve also synced it to live!
Can’t figure out where is the problem. Please help me with this, thanks in advance!

2

Hi Roshan,

It seems you just copy and pasted the code but didn’t change it to suit your site.

In the data queries on your code you have left it as

wixData.query(collectionName)

They should have the name of the collection you want to query in between the parentheses, not just collectionName.

Make sure all values match the element ids and collection names on your site.

I hope this helps!

Dara | Corvid Team

3

If u look at the 3rd line in code. The collection name is declared with real-estate properties. So, I don’t have to declare real-estate properties in the place of collection name. And coming to element IDs and collection names, I’ve made sure and everything is correct. Still facing this