What am I doing wrong?

Ask the community
, ,
1

I try to do a search at additional Info Sectios of the products and it does not work


import {local} from 'wix-storage';

import wixData from 'wix-data';

import wixLocation from 'wix-location';

import wixWindow from 'wix-window';

import wixStoresBackend from 'wix-stores-backend';

$w.onReady(function () {
 if (wixWindow.rendering.env === "browser") {
 if (debounceTimer) {
            clearTimeout(debounceTimer);
            debounceTimer = undefined;
        }
    debounceTimer = setTimeout(() => {
        $w('#searchInkRepeater').onItemReady(($w, itemData, index) => {
        $w('#image21').src = itemData.mainMedia;
        $w('#image21').alt = itemData.name;
        $w('#image21').link = itemData.productPageUrl;
    $w('#button29').onClick(() => {
    wixLocation.to("https://www.topink.co.il/product-page/" + itemData.slug);
      });
    $w('#addToCartIcon').onClick(()=>{
      $w('#shoppingCartIcon1').addToCart(itemData._id);
      });

        $w('#text64').text = itemData.name;
        $w('#text86').text = itemData.formattedDiscountedPrice;
        }, 1000);
    })
  }//TODO: write your page related code here...

});

let lastFilterInfoSections;
let debounceTimer;
export function searchInk_keyPress(event, $w) {
  $w('#group15').expand()
 if (debounceTimer) {
    clearTimeout(debounceTimer);
    debounceTimer = undefined;
  }
  debounceTimer = setTimeout(() => {
    filter($w('#searchInk').value);  
  }, 100);//Add your code for this event here: 
}
function filter(InfoSections) {
 if (lastFilterInfoSections !== InfoSections) {
    wixData.query("Stores/Products")
        .limit(8)
        .contains('additionalInfoSections', InfoSections)
 
             .find()
        .then(res => {
            $w('#searchInkRepeater').data = res.items;
 let items = res.items;
 let firstItem = items[0];
 let totalCount = res.totalCount;
 let pageSize = res.pageSize;
 let currentPage = res.currentPage;
 let totalPages = res.totalPages;
 let hasNext = res.hasNext();
 let hasPrev = res.hasPrev();
 let length = res.length;
 let query = res.query;
        })
        .catch( (error) => {
 let errorMsg = error.message;
 let code = error.code;
  } );
    lastFilterInfoSections = InfoSections;
 
  }
}

https://www.topink.co.il/ink-and-toner

900×421 78 KB

I appreciate the help
have a nice day

1 Like
2

?

3

:sob:

4

Hi! I’m looking into this.

5

Thanks man, I appreciate that

6

I try to do a search at additional Info Sectios of the products and it does not work

wixData
  .query("Stores/Products")
  .limit(8)
  .contains("additionalInfoSections", InfoSections);

contains WixDataQuery - Velo API Reference - Wix.com won’t work in this case. A data item from Stores/Products collection looks like as follows (I omitted all fields except additionalInfoSections):

{
  additionalInfoSections: [
    { title: "Some Title", description: "Some Description" }
  ];
}

contains would work if additionalInfoSections was a string, not an array of objects.

There’s no filter for searching for a property value inside an object tree (an array of objects in your case).

But a workaround is possible. Below is a rough example of such a workaround:

function filter(InfoSections) {
  if (lastFilterInfoSections !== InfoSections) {
    allProductsPromise.then(allProducts => {
      const matchingProducts = [];
      for (
        let index = 0;
        index < allProducts.length && matchingProducts.length < 8;
        index += 1
      ) {
        const product = allProducts[index];
        const productMatchesSearchString = product.additionalInfoSections.some(
          ({ title, description }) =>
            title.includes(InfoSections) || description.includes(InfoSections)
        );
        if (productMatchesSearchString) matchingProducts.push(product);
      }

      $w("#searchInkRepeater").data = matchingProducts;
    });
    lastFilterInfoSections = InfoSections;
  }
}

const getAllProducts = async () => {
  let queryResult = await wixData.query("Stores/Products").find();
  const allProducts = queryResult.items;
  while (queryResult.hasNext()) {
    queryResult = await queryResult.next();
    allProducts.push(...queryResult.items);
  }
  return allProducts;
};

const allProductsPromise = getAllProducts();

This is modification of your filter function plus my getAllProducts function and allProductsPromise variable.

In this example I get all the products when the page loads and then search through them on the client when the user does a search.

This is probably not the best solution because getting all the products takes time and there may be a lot of them. And if the page stays open long enough, they may become obsolete. And not all users are gonna use the search, so getting all the products every time is an overkill.

I only did this example to show that a workaround is possible.

You may come up with a better solution. For instance, instead of getting all the products on page load and caching them, you may search through query result pages dynamically until the required number of matching products (if any) is found and do this for every single search.

7

Thanks man, it works, you’re the best.
And I’m fine with it as long as it works :joy:
I’m sure I will not come up with a better solution. I’m not a code man. Much of what I did on this site is experimentation, copy paste and help from good people.
thanks again and have a great weekend.