PT-BR
Well, a while ago I was trying to filter products by page, I looked in the vtex docs and couldn’t find them, I saw options but it always involved cloning the entire project, and I ended up finding a very simple way with a vtex function (searchPageContext.searchQuery.refetch), might be obvious to some, but for me if I had found something in the docs to do just that without building a whole custom paginator
The code can be found below!
EN-US
Well, a while ago I was trying to filter products by page, I looked in the vtex docs and couldn’t find them, I saw options but it always involved cloning the entire project, and I ended up finding a very simple way with a vtex function (searchPageContext.searchQuery.refetch), might be obvious to some, but for me if I had found something in the docs to do just that without building a whole custom paginator
The code can be found below!
Code
import React from 'react';
import { useSearchPage } from "vtex.search-page-context/SearchPageContext";
const FilterProductsQuantity = () => {
const searchPageContext = useSearchPage();
const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
const quantItems = Number(event.currentTarget.value);
if (isNaN(quantItems)) return;
const page = searchPageContext.page - 1;
const initial = page * quantItems;
const final = initial + quantItems - 1;
searchPageContext.searchQuery.refetch({
from: initial,
to: final,
page: page
});
}
return (
<select name= "product-quantity" onChange = { handleChange } >
<option value="4" > 4 </option>
<option value = "8" > 8 </option>
<option value = "12" > 12 </option>
<option value = "16" > 16 </option>
<option value = "20" > 20 </option>
< /select>
);
}
export default FilterProductsQuantity;