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 );
})
}
};