The collection does not show in repeater

Ask the community
,
1

Hi, VELO Team.

I really need support now, the products on my website do not show in a repeater. It’s been 2 weeks but the WIX support cannot resolve my problem. They’re pointing the issues on the code, but it’s weird to not work so suddenly when we’re not touching the code. But, I took the time to check the logs and I got this error message.

"Error at i (https://static.parastorage.com/services/wix-code-platform/1.964.0/elementory-browser-support.min.js:1:2997) at XMLHttpRequest.n.onreadystatechange (https://static.parastorage.com/services/wix-code-platform/1.964.0/elementory-browser-support.min.js:1:3617) "

BTW, I’m using VELO to generate the repeater from a collection, the collection is consist of Product Categories based on the Location the user selects in the home page: Fisher Fresh Shop | Fisher Supermarket Online Shop

Here’s some of the code in repeater show:

$w ( ‘#repeater1’ ). onItemReady (( w , data , i ) => {
w ( ‘#button32’ ). label = data . name ;
console . log ( decodedActiveMainCat + ’ == ’ + data . title );
if ( decodedActiveMainCat === data . title ) {
selectedMainCategory = data ;
w ( ‘#button32’ ). disable ();
} else {
w ( ‘#button32’ ). link = ctrl . shopUrl () + ‘/’ + data . title ;
w ( ‘#button32’ ). target = ‘_self’ ;
}
});

        const  subCategories  =  selectedMainCategory . categories . map (({  name ,  _id  }) => { 
            const  label  =  name ; 
            const  value  =  _id ; 
            **return**  {  label ,  value  }; 
        }); 

        const  all  = []; 
        **for**  ( let  i  =  0 ;  i  <  subCategories . length ;  i ++) { 
            all . push ( i ); 
        } 

        $w ( '#checkboxGroup1' ). options  =  subCategories ; 
        $w ( '#checkboxGroup1' ). selectedIndices  =  all ; 
        $w ( '#text101' ). text  =  $w ( '#text101' ). text . replace ( 'MainCategory' ,  selectedMainCategory . name ); 

        ctrl . show ( $w ( '#repeater1' ));
2

One thing that I noticed right off is that you should be using the Repeated Item Scope in the onItemReady() function.

Also, context is missing. Where are you setting the onItemReady() function? Hopefully in the page’s onReady() function. A number of variables are referenced that I don’t know what they are and how you’re using them.

3

Thank you for your response.

I found a log that describes the error.

"TypeError: Cannot read properties of undefined (reading ‘categories’) at https://bundler.wix-code.com/09057cad-1980-443b-b10f-51fce26be306/2918c6f1-1d10-4af8-a546-b7139ca8967e/302fe31b-12e8-4c68-86fb-82550510d065/pages/ta2jz.js?wix-data-as-namespace=true&replace-console=false&dependencies-token=3938:1:8812"

It’s been months since the problem, the weird thing is, we didn’t even touch the code ever since but now we’re encountering error’s that stops the “repeater” from showing the Stores/Collections.

4

Hi Yisrael,

Here’s the code.

import wixLocation from ‘wix-location’ ;
import { initLocationPage } from ‘public/locationPageCtrl.js’ ;
import { getItemsByCategory , countProducts } from ‘backend/locationItemsModel.jsw’ ;
import { getCategoriesForLocation } from ‘backend/locationCategoryModel.jsw’ ;

import wixWindow from ‘wix-window’ ;

$w . onReady (() => initLocationPage ( $w ). then ( pageReady ));

const Cache = {
products : [],
subcategories : null ,
paginationReady : false ,
};

const pageReady = ( ctrl ) => {
const [ locationTitle , shop , mainCategory ] = wixLocation . path ;
console . log ( 'ctrl.routInfo: ’ , ctrl . routInfo );

getCategoriesForLocation ( ctrl . routInfo . location ) 
    . then (( categories ) => { 
        console . log ( 'Categories: ' ,  categories ); 
        $w ( '#repeater1' ). data  =  categories . locationCategories ;       
        **let**  selectedMainCategory ;    

        **const**  activeMainCat  =  mainCategory  ?  mainCategory  :  categories . locationCategories [ 0 ]. title ; 
        **const**  decodedActiveMainCat  =  decodeURIComponent ( activeMainCat ); 

        $w ( '#repeater1' ). onItemReady (( w ,  data ,  i ) => { 
            w ( '#button32' ). label  =  data . name ; 
            **if**  ( decodedActiveMainCat  ===  data . title ) { 
                selectedMainCategory  =  data ; 
                w ( '#button32' ). disable (); 
            }  **else**  { 
                w ( '#button32' ). link  =  ctrl . shopUrl () +  '/'  +  data . title ; 
                w ( '#button32' ). target  =  '_self' ; 
            } 
        }); 

        **const**  subCategories  =  selectedMainCategory . categories . map (({  name ,  _id  }) => { 
            **const**  label  =  name ; 
            **const**  value  =  _id ; 
            **return**  {  label ,  value  };                 
        }); 
        
        **const**  all  = []; 
        **for**  ( **let**  i  =  0 ;  i  <  subCategories . length ;  i ++) { 
            all . push ( i ); 
        } 

        $w ( '#checkboxGroup1' ). options  =  subCategories ; 
        $w ( '#checkboxGroup1' ). selectedIndices  =  all ; 
        $w ( '#text101' ). text  =  $w ( '#text101' ). text . replace ( 'MainCategory' ,  selectedMainCategory . name ); 

        ctrl . show ( $w ( '#repeater1' )); 

        $w ( '#button34' ). onClick (() => { 
            **const**  selectedSubCats  = []; 
            $w ( '#checkboxGroup1' ). selectedIndices . forEach (( i ) => { 
                selectedSubCats . push ( $w ( '#checkboxGroup1' ). options [ i ]. value ); 
            }); 

            console . log ( 'Selected: ' ,  selectedSubCats ); 
            Cache . subcategories  =  selectedSubCats ; 
            showProducts ( ctrl ,  selectedMainCategory ,  selectedSubCats ); 
        }); 

        showProducts ( ctrl ,  selectedMainCategory ); 

        **const**  itemsPerPage  =  ctrl . defaults . gallerySize ; 

        $w ( '#pagination1' ). onChange (({  target  }) => { 
            **if**  ( Cache . paginationReady )  **return** ; 

            Cache . paginationReady  =  **true** ; 
            ctrl . show ( $w ( '#box12' )); 
            ctrl . hide ( $w ( '#pagination1' )); 
            **const**  offset  = ( target . currentPage  -  1 ) *  itemsPerPage ; 
            ctrl . hide ( $w ( '#repeater2' )). then (() => { 
                getItemsByCategory ( ctrl . routInfo . location ,  selectedMainCategory . title ,  Cache . subcategories ,  itemsPerPage ,  offset ) 
                    . then (( paginatedItems ) => { 
                        Cache . products  =  paginatedItems ; 
                        Cache . paginationReady  =  **false** ; 
                        showProductsForPage ( ctrl ); 
                    }) 
                    . **catch** (( e ) => { 
                        console . error ( e ); 
                    }); 
            }); 
        }); 
    }) 
    . **catch** (( e ) => { 
        console . log ( e ); 
        console . error ( e ); 
    });

};

const showProducts = ( ctrl , mainCategory , subcategories ) => {
ctrl . hide ( $w ( ‘#repeater2’ ));
ctrl . hide ( $w ( ‘#box11’ ));
ctrl . show ( $w ( ‘#box12’ ));

**if**  ( mainCategory . categories . length  ===  0 ) { 
    $w ( '#text102' ). text  =  'No available products for the selected category.' ; 
    **return** ; 
} 

**const**  itemsPerPage  =  ctrl . defaults . gallerySize ; 

countProducts ( ctrl . routInfo . location ,  mainCategory . title ,  subcategories ) 
    . then (( itemsCount ) => { 
        console . log ( 'itemsCount: ' ,  itemsCount ,  'itemsPerPage: ' ,  itemsPerPage ); 
        $w ( '#pagination1' ). totalPages  =  Math . ceil ( itemsCount  /  itemsPerPage ); 
        $w ( '#pagination1' ). currentPage  =  1 ; 
        ctrl . hide ( $w ( '#repeater2' )); 
        **return**  getItemsByCategory ( ctrl . routInfo . location ,  mainCategory . title ,  subcategories ,  itemsPerPage ,  0 ); 
    }) 
    . then (( items ) => { 
        console . log ( 'Items: ' ,  items ); 
        Cache . products  =  items ; 
        showProductsForPage ( ctrl ); 
        ctrl . show ( $w ( '#box11' )); 
        ctrl . hide ( $w ( '#box12' )); 
    }) 
    . **catch** (( e ) => { 
        console . error ( e ); 
        console . log ( e ); 
    })

};

const showProductsForPage = ( ctrl ) => {
console . log ( 'showProductsForPage: ’ , Cache . products );
$w ( ‘#repeater2’ ). data = Cache . products ;
$w ( ‘#repeater2’ ). onItemReady (( w , data , i ) => {

    w ( '#text100' ). text  =  data . product . name ; 
    w ( '#image3' ). src  =  data . product . mainMedia ; 
    w ( '#image3' ). link  =  ctrl . productUrl ( data . _id ); 

    w ( '#image3' ). tooltip  =  data . product . name ;  
    w ( "#image3" ). fitMode  =  "fit" ;    

    w ( '#text96' ). text  =  '₱ '  +  data . price ; 
    w ( '#button33' ). onClick (() => { 
        addToCart ( ctrl ,  data ,  w ( '#input21' ),  w ( '#text103' )); 
    });          
}); 
ctrl . hide ( $w ( '#box12' )); 
ctrl . show ( $w ( '#repeater2' )); 
ctrl . show ( $w ( '#pagination1' )). then (() => { 
    console . log ( 'Pagination shoed!!!' ); 
});

};

const addToCart = ( ctrl , item , input , output ) => {
const quantity = input . value ;
const itemId = item . _id ;
output . text = ‘Please wait…’ ;
ctrl . show ( output );
if ( itemId && quantity ) {
ctrl . addToCartInline ( item . _id , parseInt ( quantity , 10 ))
. then (( added ) => {
if ( added ) {
output . text = ‘Item added to cart’ ;
} else {
output . text = ‘Failed!’ ;
}
ctrl . show ( output );
input . value = ‘’ ;
})
. catch (( e ) => {
output . text = 'Error: ’ + e ;
ctrl . show ( output );
})
}
};